前景提要

前幾期寫了一篇關於谷歌外掛製作的文章，但是因為沒有正經的小實戰，一直鴿了這麼多期文章，這裡寫一篇比較受關注的騰訊視訊的水印去除的文章，方便各位日後爬取騰訊視訊的時候總帶其水印爬蟲。
學習製作谷歌外掛對於爬蟲喜歡使用 selenium 的人士有很大的幫助，可以解決訪問網頁出現的一系列問題。

很多人學習python，不知道從何學起。
很多人學習python，掌握了基本語法過後，不知道在哪裡尋找案例上手。
很多已經做案例的人，卻不知道如何去學習更加高深的知識。
那麼針對這三類人，我給大家提供一個好的學習平臺，免費領取視訊教程，電子書籍，以及課程的原始碼！
QQ群：961562169

回顧製作外掛

簡單介紹一下 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之後即可分享給自己的小夥伴使用啦。