一、什么是瀏覽器插件

瀏覽器插件，基于瀏覽器的原有功能，另外增加新功能的工具，是可定制瀏覽體驗的小型軟件程序，讓用戶可以根據(jù)個人需要或偏好來定制瀏覽器。

如攔截網(wǎng)頁中的廣告、劃詞翻譯、倍速視頻等等。

Chrome、edge等瀏覽器中都有專門的插件下載商店。受某些原因限制，Chrome服務(wù)并不能正常訪問

(相關(guān)資料圖)

這里提供幾個常用的瀏覽器插件下載地址：

Chrome插件,谷歌瀏覽器插件下載,chrome谷歌商店插件crx應(yīng)用推薦與下載-擴展迷

Chrome插件,Chrome商店,谷歌瀏覽器插件下載,谷歌商店 - Chrome插件網(wǎng)

極簡插件_Chrome擴展插件商店_優(yōu)質(zhì)crx應(yīng)用下載

有興趣的小伙伴可以進入網(wǎng)站看看有沒有感興趣的、滿足自己定制化需求的插件。

如何開發(fā)瀏覽器插件

假如小伙伴找了半天，發(fā)現(xiàn)網(wǎng)上并沒有滿足自身需求的插件，那么你是否會考慮自己做一個呢？

其實這并不是什么高大上的事，網(wǎng)上那么多好用的瀏覽器插件都是開發(fā)者基于Chrome開放出的瀏覽器插件api完成的。

Chrome已經(jīng)把可能用到的各種“磚”封裝好開放出來了，那我們只需要按照一定的規(guī)則“搬”就行了啊。

開發(fā)插件之前，我們首先要了解的是插件都有哪些能力，什么能實現(xiàn)，什么不能實現(xiàn)。

如果你想點一點就把15寸的筆記本屏放大到30寸，用完讓屏幕再縮小回去，那這插件肯定是實現(xiàn)不了的。

相關(guān)文檔：

chrome谷歌瀏覽器開發(fā)文檔

360瀏覽器綜述--擴展開發(fā)文檔

瀏覽器擴展 - Mozilla | MDN

以上都是通篇文檔，可能對新手并不友好，讀起來枯燥無味。

下面推薦一個能快速上手的博客，同時感謝該作者的技術(shù)輸出。Chrome插件(擴展)開發(fā)全攻略（干貨）

常見爬蟲方法的對比

后面我們會實現(xiàn)一個爬蟲功能的插件。在開始實戰(zhàn)之前，我們可以先聊一聊常見爬蟲能力的優(yōu)缺點。

api接口該方法速度快，容易上手，會任意編程語言都可以實現(xiàn)，且操作用戶對此無感知。

但同時也有很大的缺點，這種方法很難同時發(fā)起用戶行為收集請求，有些產(chǎn)品會通過這些行為收集接口分析用戶的操作，如果邏輯變化，需要手動更新代碼到客戶處。

如果只有數(shù)據(jù)接口請求，沒有統(tǒng)計接口請求，很容易被判定為爬蟲，從而產(chǎn)生一系列負(fù)面影響。

有些產(chǎn)品還會有加密代碼，需要一些逆向工作，這就更進一步提高這種方法爬取數(shù)據(jù)的難度了。

Selenium該方法是通過運行測試的開源工具實現(xiàn)的，常見編程語言都有對應(yīng)的工具，相較于第一種方法有著更廣范圍的應(yīng)用場景。

該方法通過啟動相關(guān)驅(qū)動支持的真實的瀏覽器，盡可能的模擬用戶操作，相關(guān)行為分析會自動請求，幾乎不需要逆向，一定程度上填補了第一種方法的弊端。

但同時該方法也有弊端，需要給客戶機安裝運行環(huán)境和客戶的Chrome瀏覽器升級等問題。

瀏覽器升級可能導(dǎo)致Selenium驅(qū)動版本和瀏覽器版本不匹配，程序就會運行失敗。邏輯變化需要手動更新到客戶處。

該方式也會被產(chǎn)品方識別出是程序啟動而不是真實用戶啟動的瀏覽器，從而產(chǎn)生負(fù)面影響。

瀏覽器插件該方法是通過瀏覽器的開放能力實現(xiàn)的，是用戶啟動的真實瀏覽器，進一步填充了前兩種方法的弊端，通過各種形式的腳本實現(xiàn)復(fù)雜的操作。

可以發(fā)布到像app發(fā)布到應(yīng)用商店一樣發(fā)布到瀏覽器應(yīng)用商店，且提供線上更新功能。

該方法必須得會JavaScript腳本語言，同時熟知瀏覽器的開放能力，增加了學(xué)習(xí)難度。

該方法仍可以被產(chǎn)品識別出，如使用 MutationObserver 方法檢測出dom變化等。

沒有完美的方法，只有更適合的方法，不同場景使用不同的技術(shù)應(yīng)對不同的困難即可。

實現(xiàn)一個瀏覽器爬蟲插件

介紹完常見爬蟲的區(qū)別后，接下來，我們就開始實現(xiàn)一個瀏覽器爬蟲插件。

此處假設(shè)小伙伴已經(jīng)閱讀上述推薦的博客并基本熟悉瀏覽器插件的能力。

需求：爬取10頁boss直聘網(wǎng)站上全國范圍內(nèi)Python崗位的招聘信息。

拆解需求：目標(biāo)網(wǎng)站：

boss直聘網(wǎng)站

篩選條件：

城市：全國關(guān)鍵詞：Python

數(shù)量：

1-10頁內(nèi)的全部數(shù)據(jù)

url地址：https://www.zhipin.com/web/geek/job?query=Python&city=100010000&page=1

難點分析使用什么腳本類型

插件有injected、content、popup、background、devtools 5種類型的腳本，不同類型擁有不同的能力，相互之間的通信方式也不盡相同。

所以首先需要根據(jù)需求結(jié)合具體類型腳本的能力來確定使用什么腳本。

popup肯定是需要的，給文件指定名稱和下達(dá)開始爬取的命令時要用到該類型腳本。

此處已確定popup腳本，其他類型待定。

攔截網(wǎng)絡(luò)請求

經(jīng)分析，從dom結(jié)構(gòu)中獲取數(shù)據(jù)不靠譜。如，跳轉(zhuǎn)鏈接，某些產(chǎn)品的鏈接并不放在dom中，而是通過點擊事件句柄判斷按鈕的index、id等唯一標(biāo)識，從js作用域中找到對應(yīng)的鏈接進行跳轉(zhuǎn)。

那么就需要考慮怎么能攔截到網(wǎng)絡(luò)請求了。插件的核心是不同類型js腳本，不同類型的腳本能力不同，需結(jié)合實際考慮。

在5種腳本類型對比可知，只有injected、devtools、background可以攔截到網(wǎng)絡(luò)請求。但background拿不到響應(yīng)體，故拋棄。

devtools功能很強大，它可以模擬出一個和開發(fā)者工具(F12)-網(wǎng)絡(luò)(network)功能幾乎一樣的面板，但實現(xiàn)起來會相對復(fù)雜。

前端同學(xué)常用的React Developer Tools、vue-tools調(diào)試面板就是使用該技術(shù)開發(fā)的。

經(jīng)過權(quán)衡對比，使用更加簡單的injected來做網(wǎng)絡(luò)攔截。

此處已確定popup和injected兩種腳本。

通信

爬取過程很簡單，通信是一件復(fù)雜的事，詳情通信可參考上述文檔。

現(xiàn)在的流程是 injected攔截網(wǎng)絡(luò)請求 -> popup下達(dá)開始爬取的指令 -> injected開始執(zhí)行腳本收集數(shù)據(jù) -> injected清洗并導(dǎo)出數(shù)據(jù)。

現(xiàn)在確定的popup和injected兩種類型能滿足嗎？很遺憾，不能，通過上述博客中總結(jié)的通信方式可知，這兩種類型的腳本不能直接通信，也就是popup不能告訴injected可以開始收集數(shù)據(jù)了。

怎么實現(xiàn)呢？需要引入一個“中介”——content，作為popup和injected中間通信的橋梁。

現(xiàn)在的過程就變成了，injected攔截網(wǎng)絡(luò)請求 -> popup下達(dá)開始爬取的指令 -> content轉(zhuǎn)發(fā)指令-> injected開始執(zhí)行腳本收集數(shù)據(jù) -> injected清洗并導(dǎo)出數(shù)據(jù)

這里可以留一個小問題，最后一步可以使用content實現(xiàn)嗎，為什么不使用這種方式？

此處已確定popup和injected、content三種腳本。

代碼部分

確定腳本選型后就可以創(chuàng)建工程了，新建一個文件夾，創(chuàng)建如下的目錄結(jié)構(gòu)：

boss-plugin├─html│└─popup│├─popup.html//點擊瀏覽器右上角插件，彈出popup，傳遞用戶指令│└─popup.js├─js│├─content//content腳本通過manifest.json配置文件可以直接添加到頁面中││├─install.js//injected腳本并不能直接通過配置添加到頁面中，需要通過content執(zhí)行js代碼動態(tài)插入到dom中││└─page.js//“中介角色”，轉(zhuǎn)發(fā)指令│└─inject│├─network.js//攔截網(wǎng)絡(luò)請求│├─page.js//具體執(zhí)行收集、清洗、導(dǎo)出數(shù)據(jù)的邏輯│└─pikazExcel.js//導(dǎo)出數(shù)據(jù)為Excel的js類庫└─manifest.json//瀏覽器識別插件配置的文件，必須

manifest.json

{"name":"爬取boss數(shù)據(jù)","version":"1.0","manifest_version":2,"browser_action":{"default_popup":"/html/popup/popup.html"},"content_scripts":[{"matches":["*://www.zhipin.com/*"],"js":["/js/content/page.js","/js/content/install.js"],"run_at":"document_start"}],"web_accessible_resources":["/js/inject/pikazExcel.js","/js/inject/page.js","/js/inject/network.js"]}

html/popup/popup.html

文件名：