自制腾讯视频去除水印Chrome插件

前景提要

前几期写了一篇关于谷歌插件制作的文章，但是因为没有正经的小实战，一直鸽了这么多期文章，这里写一篇比较受关注的腾讯视频的水印去除的文章，方便各位日后爬取腾讯视频的时候总带其水印爬虫。
学习制作谷歌插件对于爬虫喜欢使用 selenium 的人士有很大的帮助，可以解决访问网页出现的一系列问题。

---

回顾制作插件

简单介绍一下 manifest.json 配置文件里面所需要的参数。

• name 拓展的名字，必须是字符串类型
• version 字符串类型，是当前插件的版本号
• description 拓展的介绍信息
• permissions 是一个String数组，每一个权限都使用String来表示。某些关键权限在安装前会告知用户
  • cookies 启动cookies权限
  • tabs 启动管理Chrome浏览器标签栏权限
  • activeTab 启动与当前页面交互的API权限
  • contextMenus 启动右键菜单权限
  • history 启动历史记录权限
  • storage 启动本地存储数据权限
  • debugger 启动使用debugger工具权限
  • background 启动拓展后端环境
• browser_action 浏览器的右上角显示
  • default_title 鼠标移入，显示简短描述
  • default_popup 鼠标点击，弹出的显示内容
  • default_icon 右上角拓展图标
• background 常驻后台脚本
  • scripts 后台常驻，直到关闭浏览器一直执行的脚本
  • popup 调试页面
  • persistent 持久运行
• content_scripts 向页面注入脚本
  • matches 匹配网址的正则列表
  • run_at 选择注入JS的时机
    • document_start：所有css加载完毕，但DOM尚未创建时
    • document_end：DOM创建完成，但图片及frame等子资源尚未加载时
    • document_idle：document_end之后，window.onload之前
  • js 需要注入的脚本文件列表
  • all_frames 是否运行在页面所有的frame中
• commands 使用命令 API 添加快捷键，并为它们绑定默认的组合键
  • attach-debugger 命令名
  • suggested_key 设置组合键
  • description 命令描述
• manifest_version manifest文件版本号。Chrome18开始必须为2

---

Chrome拓展开发之去腾讯视频广告

去除广告的原理很简单，我们首先定位到元素面板的广告节点，然后用JS方法remove去除。
这里我们使用Chrome插件来实现，定位的函数是document.querySelectorAll，获取到的是DOM对象，因而可以直接使用它下属的remove方法去除。这里的定位CSS选择器我们需要根据具体的网站结构来编写。
这里的注入时机是在DOM渲染之后，也就是document.end。

全部代码如下

manifest.json 文件代码如下：

{
  "manifest_version": 2,
  "name": "腾讯视频去除水印",
  "version": "0.0.1",
  "description": "解决腾讯视频爬虫出现水印的现象,进入谷歌后自动执行去除水印.",
  "author": "Lux",
  "content_scripts": [
   {
     "matches": ["https://v.qq.com/x/cover/*"],
     "run_at": "document_end",
     "js": ["advertising.js"],
     "all_frames": true
   }
   ]
}

advertising.js 代码如下：

var thread = function () {
    var nowTime = 0,
        maxTime = 15;
    var threadArr = [];
    
    this.addThread = function (fn) {
        threadArr.push(fn)
    }
    this.start=function () {
        doingThread();
    }
    var doingThread = function () {
        if (threadArr.length > 0) {
            if (nowTime < maxTime) {
                let now = new Date().getTime();
                var method = threadArr[0];
                method();
                threadArr.splice(0, 1);
                let nowNew = (new Date().getTime() - now);
                nowTime += nowNew;
                doingThread();
            } else {
		        nowTime=0;
                setTimeout(doingThread, 1);
            }
        }else {
            setTimeout(doingThread,100)
        }
    }
}
var fn = function () {
    img = document.querySelectorAll('img.txp_waterMark_pic')
    if (img.length == 1){
	img.forEach(function(a){a.remove()});
	return true;
    }
    else{
	console.log('not img');
	return false
    }
}

var thread = new thread();
thread.start()
try{
    for (let i = 0; i < 1000000; i++) {
    	thread.addThread(function () {
            if (fn()){throw 'jumpout';}
        })
    }
}catch(e){}

谷歌扩展打包

在Chrome扩展程序下将代码打包进入 crx 中。

拿到crx之后即可分享给自己的小伙伴使用啦。

---

最后还是希望你们能给我点一波小小的关注。

奉上自己诚挚的爱心