谷歌浏覽器插件是一種小型的用于定制浏覽器體驗的程式。通過插件，可以自定義浏覽器的一些行為來适應個人的需要，隻要你會HTML，JavaScript，CSS就可以動手開發浏覽器插件了。
開發谷歌浏覽器插件，就相當于在谷歌浏覽器的基礎之上進行活動，站在巨人的肩膀上，操作很多東西都友善了一些。有了插件，我們可以定制js爬蟲、屏蔽網頁廣告，網頁實時查詞，修改http請求頭，等等，能做的東西很多。
基礎概念與入門案例
廢話少說，先看一下插件版的hello world，了解插件的大體結構，麻雀雖小，五髒俱全。
- 建立manifest.json。任何插件都必須要有這個檔案，用來描述插件的中繼資料，插件的配置資訊。
{
"name": "Hello Extensions",
"description" : "Hello world Extension",
"version": "1.0",
"manifest_version": 2,
}
定義目前插件的名字，描述版本号等資訊。
注意： version在打包完插件的時候，根據
version
判斷插件是否需要更新。
- 給插件加一個浏覽器右上角的圖示。 浏覽器插件圖示
谷歌(Chrome)浏覽器插件開發教程
{
"name": "Hello Extensions",
"description" : "Hello world Extension",
"version": "1.0",
"manifest_version": 2，
#新增内容如下
"browser_action": {
"default_popup": "hello.html",
"default_icon": "hello_extensions.png"
}
}
hello.html
<html>
<body>
<h1>Hello Extensions</h1>
</body>
</html>
hello_extension.png圖示
hello_extension圖示
- 新增快捷鍵，通過鍵盤快速打開，修改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"
},
#新增内容如下
"commands": {
"_execute_browser_action": {
"suggested_key": {
"default": "Ctrl+Shift+F",
"mac": "MacCtrl+Shift+F"
},
"description": "Opens hello.html"
}
}
}
-
安裝浏覽器擴充
4.1 進入擴充程式
image.png 谷歌(Chrome)浏覽器插件開發教程
4.2 加載含有manifest.json的檔案夾，開發模式下使用。
加載插件
4.3 當你覺得開發完成的時候可以打包擴充程式，上面圖檔有。
注意：第一次打包的時候，會生成一個pem個人密鑰檔案，以後再次打包的時候就需要密鑰檔案了。
打包截圖
- 看一下效果 hello world插件效果
谷歌(Chrome)浏覽器插件開發教程
插件進階
上面隻是簡單的介紹了開發插件的hello world，實際中，我們需要的功能遠不止這麼簡單。需要更強大的功能，更多的庫支援才能夠勝任。下面介紹如何做出功能更完善的插件。我們從一個開源的插件腳手架做案例。
- 腳手架的位址
A template for building cross browser extensions for Chrome, Opera & Firefox. https://github.com/EmailThis/extension-boilerplate
- 克隆到本地搭建開發環境
git clone [email protected]:EmailThis/extension-boilerplate.git
cd extension-boilerplate
npm install
-
開發與打包
開發的話：
npm run chrome-watch
npm run opera-watch
npm run firefox-watch
打包：
npm run build
-
搭建好基本的開發環境，先研究此項目中所包含的内容，根據自己的需要往腳手架中填充東西。我先介紹幾個常用的manifest.json配置。
4.1 icons 定義浏覽器擴充頁面的圖示。
icon 對應圖示位置 谷歌(Chrome)浏覽器插件開發教程
"icons": {
"16": "icons/icon-16.png",
"128": "icons/icon-128.png"
},
4.2 permissions 此插件用到的浏覽器的權限。常用的權限如下。在
Chrome 插件API概覽頁面點進去，會看到此api需要的權限。
存儲權限
"permissions": [
"tabs",
"storage",
"http://*/*",
"https://*/*"
],
4.3 contentScripts，運作在浏覽器網頁的上下文頁面，使用标準的DOM模型，contentScripts标簽在控制台可以看到。
content Scripts位置
"content_scripts": [
{
"matches": [
"http://*/*",
"https://*/*"
],
"js": [
"scripts/contentscript.js"
],
"run_at": "document_end",
"all_frames": false
}
],
4.4 background背景頁面，在浏覽器前台看不到的頁面，可以以背景程序的方式進行運作，也可以以事件的方式運作。需要打開擴充程式的開發者模式才能看到。
background 頁面
"background": {
"scripts": [
"scripts/background.js"
]
},
更詳細的manifest.json檔案配置資訊請參考官方
manifest.json檔案格式- 常用到的開發方式說明 插件架構
谷歌(Chrome)浏覽器插件開發教程
5.1 一般我們會在浏覽器的前台頁面，也就是直接打開控制台就可以看到的擴充程式，通過contentScript指定加載的程式。在這裡監聽目前浏覽器目前打開的頁面，然後做一些與使用者互動的東西。
5.2 在前台的互動，以消息的形式傳遞到background指定的腳本。
contentScript執行的程式一般可以跨域，浏覽器的安全限制，而background指定的腳本可以跨域運作，擷取所有浏覽器cookie資訊等等。
互動案例，詳細的操作看一下項目的腳手架中。
chrome.runtime.sendMessage(string extensionId, any message, object options, function responseCallback)
chrome.runtime.onMessage.addListener(function callback)
- 在前背景可以通信之後，很多功能可以依賴第三方的庫，目前我們參考的腳手架，可以直接使用npm安裝第三方庫。可以多花點心思研究插件的具體結構。
總結
浏覽器插件開發，不管是在實用性上，還是趣味性上都是值得學習與了解的。本文試圖闡述chrome插件開發的過程與原理，但篇幅有限，不可能面面俱到，不足之處，敬請諒解。
歡迎一起讨論與留言。