实战开发一款谷歌插件:实现自动刷课

今天周末,发现我的公共课没刷,闲来无事就开发一个插件想自动刷课,于是乎就有了这款插件。

这是一款自动点击下一页的谷歌浏览器插件,可用作课程管理系统(http://219.159.82.30:9004),实现视频播放完毕后自动点击下一页的功能,通俗来讲就是刷课(滑稽)。

第一步,随便新建一个文件夹,里面有插件图标PNG、JS文件、manifest.json文件(必须)。

/class
    biny.png
    index.js
    manifest.json

第二步,在manifest.json文件进行编写主要代码:

{
    "name": "classdemo_biny",
    "version": "1.0.0",
    "manifest_version": 2,
    "description": "classdemo_biny",
    "browser_action": {
        "default_icon": "biny.png"
    },
    "content_scripts": [{
        "matches": ["http://219.159.82.30:9004/*/*/*/*"],
        "js": ["jquery.min.js", "index.js"]
    }]
}
  • "name": 表示插件名称
  • "version": 插件版本
  • "manifest_version":2 (必须项)
  • "description":插件简介
  • "default_icon": 插件图标路径
  • "matches":需要执行插件的主要地址
  • "js": 得到主要地址后需要执行的JS文件,有前后顺序

第三步,写页面需要执行的JS逻辑

setTimeout(function(){
    videosInit()
},1000)

function videosInit() {

    // 监听获取视频标签
    var videos = document.querySelector('#my-video_html5_api')
    
    // 获取视频总长度
    var videoTime = Math.floor(videos.duration);
    
    //创建元素
    var divs = document.createElement("div");
    divs.className = 'divs'
    document.body.appendChild(divs);

    // 如果 当前时间段播放值 大于 视频总长度 即点击下一页
    var timer = setInterval(function() {
        // 获取当前时间段播放值
        var videoCurrentTime = videos.currentTime;
        
        var mask = document.querySelector('.divs')
        // console.log(videoCurrentTime, videoTime)
        mask.innerHTML = '<div style="position: fixed;top: 5%;right: 5%;width: 250px;text-align: center; background: rgba(255,255,255,1);border: solid 1px #000;border-radius: 10px;color: #333;z-index:99999;box-shadow: 10px 10px 30px rgba(0,0,0,.2);"><br>小陆插件:自动刷课<br><br>当前播放至 <span style="font-weight: 800;">'+ videoCurrentTime +' </span>秒<br><br>视频总长度:<span style="font-weight: 800;">'+ videoTime +'</span>秒<br><br></div>'
        
        if (videoCurrentTime + 2 > videoTime) {
            clearInterval(timer)
            // 监听点击按钮下一个视频地址
            var videosBtn = document.querySelector('a[aria-describedby="msf0-next-desc"]')
            var url = videosBtn.href
            window.location.href = url
            setTimeout(function(){
                videosInit()
            },1000)
        }
    }, 10)
}

第四步,安装插件,打开谷歌浏览器,更多工具 - 扩展程序 - 开发者模式(打开) - 加载已解压的扩展程序,然后选择刚刚创建的class文件夹,点击确定,就发现已经安装成功,右上角也出现插件图标;打开指定的课程地址(http://219.159.82.30:9004),在视频页面的时候,从控制台可以看到计时的数据,即为成功运行。