谷歌瀏覽器插件是一種小型的用于定制瀏覽器體驗的程序。通過插件，可以自定義瀏覽器的一些行為來適應(yīng)個人的需要，只要你會HTML，JavaScript，CSS就可以動手開發(fā)瀏覽器插件了。

開發(fā)谷歌瀏覽器插件，就相當(dāng)于在谷歌瀏覽器的基礎(chǔ)之上進行活動，站在巨人的肩膀上，操作很多東西都方便了一些。有了插件，我們可以定制js爬蟲、屏蔽網(wǎng)頁廣告，網(wǎng)頁實時查詞，修改http請求頭，等等，能做的東西很多。

Chrome插件結(jié)構(gòu)

需要聲明的是，這個結(jié)構(gòu)圖是我自己畫的，代表我對Chrome插件的理解，可能并不全面，甚至還不是十分準(zhǔn)確，但找來找去找不到現(xiàn)成的，只好自己動手，如有謬誤，請不吝指出。

如圖，manifest.json作為插件的配置文件，同時可以看作程序的“入口”，因為它指定了顯示什么圖標(biāo)，background script有哪些文件，content script又有哪些文件，pop up的頁面是什么，等等。

什么是popup，什么是background script，相信大家都清楚了，那什么是content script呢？content script就是我們要注入到頁面中的腳本，插件允許我們往網(wǎng)頁中注入腳本，這是一個多么讓人有想象力的功能，其功能之強大無需多解釋，總的來說，就是讓我們?nèi)娓深A(yù)頁面的內(nèi)容！也許你馬上會想到，這可能帶來很大的安全隱患，沒錯，有些惡意插件會竊取你的頁面信息，而有些有漏洞的插件則可能讓你遭受跨站腳本注入（XSS）的攻擊；另一個可能你會想到的問題是：往頁面中注入自己的腳本，難道不會跟頁面原本的腳本發(fā)生沖突嗎？能想到這點說明你真的很厲害，如果我們的注入腳本和頁面原本的腳本處于同一個運行環(huán)境中，確實會發(fā)生沖突，所以，Chrome是另外開辟了一個獨立的運行空間，供我們的Content Script使用的，Content Script能訪問DOM的內(nèi)容，但卻不能訪問頁面原本的腳本（我是說直接訪問不行），反之，頁面原本的腳本也不能直接訪問Content Script。在圖中，淺紅色的背景塊代表Content Script的運行環(huán)境，而淺藍色的背景塊代表頁面運行環(huán)境，另外插件的運行環(huán)境我用淺綠色表示，注意，這是三個不同的運行環(huán)境，調(diào)試的時候你會充分體會到它們的不同。

那么，Content Script會在什么時候運行呢？默認情況下，是在網(wǎng)頁加載完了和頁面腳本執(zhí)行完了，頁面轉(zhuǎn)入空閑的情況下（Document Idle），但這個是可以改變的，詳情可參考https://developer.chrome.com/extensions/content_scripts.html，查看其中的“run_at”。

由于處于不同的運行環(huán)境中，Content Script和Background Script不能直接互相訪問，那它們之間如何通信？通過Message！這個之后的代碼中會有。

基礎(chǔ)概念與入門案例

廢話少說，先看一下插件版的hello world，了解插件的大體結(jié)構(gòu)，麻雀雖小，五臟俱全。

創(chuàng)建manifest.json。任何插件都必須要有這個文件，用來描述插件的元數(shù)據(jù)，插件的配置信息。

{

"name": "Hello Extensions",

"description" : "Hello world Extension",

"version": "1.0",

"manifest_version": 2,

}

定義當(dāng)前插件的名字，描述版本號等信息。

注意： version在打包完插件的時候，根據(jù)version判斷插件是否需要更新。

給插件加一個瀏覽器右上角的圖標(biāo)。

瀏覽器插件圖標(biāo)

{

"name": "Hello Extensions",

"description" : "Hello world Extension",

"version": "1.0",

"manifest_version": 2，

#新增內(nèi)容如下

"browser_action": {

"default_popup": "hello.html",

"default_icon": "hello_extensions.png"

}

}

hello.html

Hello Extensions

hello_extension.png圖標(biāo)

hello_extension圖標(biāo)

新增快捷鍵，通過鍵盤快速打開，修改manifest.json

{

"name": "Hello Extensions",

"description" : "Hello world Extension",

"version": "1.0",

"manifest_version": 2,

"browser_action": {

"default_popup": "hello.html",

"default_icon": "hello_extensions.png"

},

#新增內(nèi)容如下

"commands": {

"_execute_browser_action": {

"suggested_key": {

"default": "Ctrl+Shift+F",

"mac": "MacCtrl+Shift+F"

},

"description": "Opens hello.html"

}

}

}

安裝瀏覽器擴展

4.1 進入擴展程序

image.png

4.2 加載含有manifest.json的文件夾，開發(fā)模式下使用。

加載插件

4.3 當(dāng)你覺得開發(fā)完成的時候可以打包擴展程序，上面圖片有。

注意：第一次打包的時候，會生成一個pem個人密鑰文件，以后再次打包的時候就需要密鑰文件了。

打包截圖

看一下效果

hello world插件效果

插件進階

上面只是簡單的介紹了開發(fā)插件的hello world，實際中，我們需要的功能遠不止這么簡單。需要更強大的功能，更多的庫支持才能夠勝任。下面介紹如何做出功能更完善的插件。我們從一個開源的插件腳手架做案例。

腳手架的地址

A template for building cross browser extensions for Chrome, Opera & Firefox.

https://github.com/EmailThis/extension-boilerplate

克隆到本地搭建開發(fā)環(huán)境

git clone git@github.com:EmailThis/extension-boilerplate.git

cd extension-boilerplate

npm install

開發(fā)與打包

開發(fā)的話：

npm run chrome-watch

npm run opera-watch

npm run firefox-watch

打包：

npm run build

搭建好基本的開發(fā)環(huán)境，先研究此項目中所包含的內(nèi)容，根據(jù)自己的需要往腳手架中填充東西。我先介紹幾個常用的manifest.json配置。

4.1 icons 定義瀏覽器擴展頁面的圖標(biāo)。

icon 對應(yīng)圖標(biāo)位置

"icons": {

"16": "icons/icon-16.png",

"128": "icons/icon-128.png"

},

4.2 permissions 此插件用到的瀏覽器的權(quán)限。常用的權(quán)限如下。在Chrome 插件API概覽頁面點進去，會看到此api需要的權(quán)限。

存儲權(quán)限

"permissions": [

"tabs",

"storage",

"http://*/*",

"https://*/*"

],

4.3 contentScripts，運行在瀏覽器網(wǎng)頁的上下文頁面，使用標(biāo)準(zhǔn)的DOM模型，contentScripts標(biāo)簽在控制臺可以看到。

content Scripts位置

"content_scripts": [

{

"matches": [

"http://*/*",

"https://*/*"

],

"js": [

"scripts/contentscript.js"

],

"run_at": "document_end",

"all_frames": false

}

],

4.4 background后臺頁面，在瀏覽器前臺看不到的頁面，可以以后臺進程的方式進行運行，也可以以事件的方式運行。需要打開擴展程序的開發(fā)者模式才能看到。

background 頁面

"background": {

"scripts": [

"scripts/background.js"

]

},

更詳細的manifest.json文件配置信息請參考官方manifest.json文件格式

常用到的開發(fā)方式說明

插件架構(gòu)

5.1 一般我們會在瀏覽器的前臺頁面，也就是直接打開控制臺就可以看到的擴展程序，通過contentScript指定加載的程序。在這里監(jiān)聽當(dāng)前瀏覽器當(dāng)前打開的頁面，然后做一些與用戶交互的東西。

5.2 在前臺的交互，以消息的形式傳遞到background指定的腳本。

contentScript執(zhí)行的程序一般可以跨域，瀏覽器的安全限制，而background指定的腳本可以跨域運行，獲取所有瀏覽器cookie信息等等。

交互案例，詳細的操作看一下項目的腳手架中。

chrome.runtime.sendMessage(string extensionId, any message, object options, function responseCallback)

chrome.runtime.onMessage.addListener(function callback)

一篇有關(guān)前后臺通信的文章

在前后臺可以通信之后，很多功能可以依賴第三方的庫，當(dāng)前我們參考的腳手架，可以直接使用npm安裝第三方庫。可以多花點心思研究插件的具體結(jié)構(gòu)。

總結(jié)

瀏覽器插件開發(fā)，不管是在實用性上，還是趣味性上都是值得學(xué)習(xí)與了解的。本文試圖闡述chrome插件開發(fā)的過程與原理，但篇幅有限，不可能面面俱到，不足之處，敬請諒解。

歡迎一起討論與留言。

參考

manifest.json

Chrome 擴展開發(fā)——編寫一個自己的瀏覽器插件

chrome javascript API

Chrome 擴展開發(fā)——編寫一個自己的瀏覽器插件

瀏覽器插件開發(fā)-常用API

插件門戶

開發(fā)入門

Chrome插件（Extensions）開發(fā)攻略

很多示例

這里千萬千萬注意了，我當(dāng)初沒仔細看popup.html里有一小段注釋，這一小段注釋說：出于安全考慮，javascript必須與html分開存放。而我想嘛，一個小測試程序，沒必要分開吧，直接寫一起不就行了嗎？結(jié)果javascript死活執(zhí)行不了，我翻來覆去找不到原因，還以為彈出的小窗口不支持javascript，在網(wǎng)上搜索了半天又沒有結(jié)果，最后才發(fā)現(xiàn)是這個原因，浪費了許多時間，這個事情也一定程度上說明了：細節(jié)決定成敗。

JavaScript JSON

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實后本網(wǎng)站將在24小時內(nèi)刪除侵權(quán)內(nèi)容。