一天學會Chrome插件開發

01-26

開門見山：一個chrome插件會包含哪些文件及文件夾

D:.│ manifest.json│├─html│ index.html│├─images│ icon-128.png│ icon-16.png│├─scripts│ background.js│├─styles│ main.css│└─_locales ├─en │ messages.json │ └─zh_CN messages.json

簡單說明一下：

html：存放html頁面
images：存放插件圖標
scripts：存放js文件
styles: 存放樣式
_locales: 存放多語言文件
manifest.json：一些關於插件的元數據，作為chrome入口文件

看目錄結構，像不像一個網站？Bingo! Chrome插件就是一個網站類的應用，它是用html、javascript、css組成的一個webapp; 相比於通常的webapp, Chrome插件還可以調用更多瀏覽器層面的api,包括書籤、歷史記錄、網路請求攔截、截獲用戶輸入等等。（PS：插件不要隨便亂裝哦，很危險滴！）

重點說一說這個文件：manifest.json

如前所述，它包含了一些插件的元數據，作為chrome的入口文件，可以理解為插件的程序清單，那麼它到底做了什麼事情呢？結合示例，我們細細來看：

{ // 清單版本號，建議使用版本 2，版本 1 是舊的，已棄用，不建議使用 "manifest_version": 2, "name": "chome-plugin", // 插件名稱 "version": "1.8.6", // 插件版本 // 這裡寫些廢話，舉個栗子，『應產品要求，殺個程序祭天』 "description": "This is an extension for your chrome", "icons": { "16": "images/custom/16x16.png", "48": "images/custom/48x48.png", "128": "images/custom/128x128.png" }, //browser_action和page_action只能添加一個 "browser_action": { //瀏覽器級別行為，所有頁面均生效 "default_icon": "images/custom/16x16.png",//圖標的圖片 "default_title": "Hello ELSE", //滑鼠移到圖標顯示的文字 "default_popup": "html/popup.html" //單擊圖標後彈窗頁面 }, "page_action":{ //頁面級別的行為，只在特定頁面下生效 "default_icon":{ "24":"images/custom/24x24.png", "38":"images/custom/38x38.png" }, "default_popup": "html/popup.html", "default_title":"Hello ELSE" }, // 可選 "author": "ELSE TEAM", "automation": "...", "background": { "scripts": [ "scripts/background.js", "scripts/devtools-page.js" ] }, "devtools_page": "html/devtools-page.html", // 定義對頁面內容進行操作的腳本 "content_scripts": [ { "js":["js/else-insert.js"], "css": ["css/else-insert.css"], "matches":["<all_urls>"] // 只在這些站點下 content_scripts會運行 } ], // 數組，聲明插件所需要的許可權，這裡就是很危險的存在了，想幹壞事的你是不是很激動！ "permissions": [ "cookies", "http://*/*", "management", "tabs", "contextMenus" ]}

開發示例

代碼來了：https://github.com/StevenX911/share/tree/master/source-read/chrome-plugin/no-socializing

載入並運行插件

在您的瀏覽器中訪問 chrome://extensions（或者單擊多功能框最右邊的按鈕：打開 Chrome 瀏覽器菜單，並選擇工具(L)菜單下的擴展程序(E)，進入相同的頁面）。
確保右上角開發者模式複選框已選中。 Ensure that the Developer mode checkbox in the top right-hand corner is checked.
單擊載入正在開發的擴展程序…，彈出文件選擇對話框。
瀏覽至您的擴展程序文件所在的目錄，並選定。

您也可以將擴展程序文件所在的目錄拖放到瀏覽器中的 chrome://extensions 上載入它。

如果擴展程序有效的話，它將被載入並且立刻處於活動狀態！如果無效的話，頁面頂部將顯示錯誤消息，請糾正錯誤再重試。