Chrome 插件开发 B站播放量监控项目

Chrome 插件开发 B站播放量监控项目

小目标，给视频列表增加一个按钮

找到可以提取的点
在meta下，追加一个按钮节点试试， data-aid 可以用来拼url

XHR异步处理
由于bilibili的数据是通过异步加载的， XHR = xhtml request
所以会在dom加载完成后再过一会儿处理完
此时如果用content-script的document load时机，会太早，数据根本没加载完

网上查理下，有一个看似山寨却很通用的做法，放一个定时器轮询检查数据加载完没
我把他包成了一个通用API

function XHRAction(key, action){
   var timer = setInterval(Checker, 100, key, action)
   function Checker(key, action){
       if ($(key).length){
           clearInterval(timer)
           action()
       }
   }
}


$(document).ready(function(){
   XHRAction("li.small-item.fakeDanmu-item > div.meta", function (){
           $("li.small-item.fakeDanmu-item > div.meta").append('<span class="play"><i class="icon"/> "check data"</span>')
       }
   )
})

Chrome插件调试
先用开发者模式通过源码文件夹加载插件
每次修改完插件，需要重载

然后用回车重新加载对应网页，在F12调试工具界面下就能起效

结合上面这些技术，大致成型了

console.log('这是content script!');


function XHRAction(key, action){
    var timer = setInterval(Checker, 100, key, action)
    function Checker(key, action){
        if ($(key).length){
            clearInterval(timer)
            action()
        }
    }
}


$(document).ready(function(){
    XHRAction("li.small-item.fakeDanmu-item", function (){
            $("li.small-item.fakeDanmu-item").each(function () {
                var aid = $(this).attr("data-aid")
                url = `https://127.0.0.1/query?aid=${aid}`
                console.log(url)
                $(this).children("div.meta").append(`<span><a href="${url}" class="button">查看数据</a></span>`)
            })
        }
    )
})

注意，格式化串 用反引号 `, 才可以在其中使用 ${XXX} 嵌入变量
效果：

插件上传Chrome商店以后
安装失败，显示 image decode failed

把下面这个网址FQ就行了

*.googleusercontent.com

开发者上传地址:
https://chrome.google.com/webstore/devconsole