Chrome插件是一個用Web技術開發、用來增強瀏覽器功能的軟體，它其實就是一個由HTML、CSS、JS、圖片等資源組成的一個.crx後綴的壓縮包。
Chrome插件開發的技術棧是由Web技術（HTML,CSS,JS,圖片等）和 Chrome 底層 API 組成；完成插件開發後編譯成 .crx 壓縮包發布到應用商店；插件的不同模塊之間是相對獨立的，模塊之間的數據交互是異步通信，通信連接包含了短連接和長連接。
六大核心
manifest.json 是 Chrome 插件中必須的配置文件，且必須放到項目的根目錄，文件中包括名字、版本、面板，權限，js 策略等配置，具體內容如下：
{ "manifest_version": 2, "version": "1.0.0", "name": "插件名字", "description": "插件功能描述", "icons": { "19": "assets/icons/icon_19.png", "38": "assets/icons/icon_38.png", "128": "assets/icons/icon_128.png" }, "background": { "scripts": ["./background.js"] }, "browser_action": { "default_popup": "./popup.html" }, "content_scripts": [ { "matches": ["<all_urls>"], "js": ["./assets/js/jquery.min.js", "./contentScripts.js"], "run_at": "document_end", "all_frames": true } ], "content_security_policy": "script-src 'self' 'unsafe-eval' 'self'", "options_ui": { "chrome_style": false, "page": "./options.html" }, "devtools_page": "devtools.html", "homepage_url": "插件中的官網地址URL", "permissions": [ "http://*/*", "https://*/*", "file://*/*", "background", "bookmarks", "clipboardRead", "clipboardWrite", "contentSettings", "cookies", "*://*.google.com/", "debugger" ], "web_accessible_resources": [], "chrome_url_overrides": { "newtab": "newtab.html", "history": "history.html", "bookmarks": "bookmarks.html" }} content-scripts腳本是注入當前web頁面中的 js 腳本；在 manifest.json 中的 content_scripts 節點配置；它有如下特點：
可以操作站點頁面 Dom 結構；
不能訪問站點中的 js 腳本；
只能訪問部分 Chrome 的 API；
例如：
$(window).on('load', () => { $(document.body).css({ background: 'red', })}) background腳本是運行在後臺的 js 腳本；在 manifest.json 中的 background 節點配置；它有如下特點：
常用於創建頁面右鍵菜單、創建 omnibox 向用戶提供搜索建議和抽象公共接口服務等；
// 創建右鍵菜單chrome.contextMenus.create({ title: '京東搜：%s', // %s表示選中的文字 contexts: ['selection'], // 只有當選中文字時才會出現此右鍵菜單 onclick(params) { chrome.tabs.create({ url: `https://search.jd.com/Search?keyword=${encodeURIComponent( params.selectionText )}`, }) },})效果：
browser-action彈框是插件右上角獨立操作面板；在 manifest.json 中的 browser_action 節點配置；其中 default_popup 入口是 html 文件；除了 devtools 外可以訪問大部分 chromeAPI；常用於用戶交互操作，如下圖：
官網的關係圖：
擴展開發者工具，在 manifest.json 中的 devtools_page 節點配置；允許開發自定義 Elements、Console、Sources 等同級別的面板，比如 Vue Devtools 和 React Devtools；它的生命周期同開發者工具一致的；並包含了特有的 API 如下：
Chrome.devtools.panelsChrome.devtools.inspectedWindowChrome.devtools.network例如:
chrome.devtools.panels.elements.createSidebarPane('我的面板', sidebar => { sidebar.setPage('../newpage.html'); sidebar.setHeight('100vh');});<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> 我是新面板 </body></html>
效果：
options設置面板是插件的用戶設置，在 manifest.json 中的 options_ui 節點配置；常用於讓用戶自定義選擇想要的功能。
桌面通知
創建桌面通知，一般在 background 和 browser_action 中創建，代碼如下：
chrome.notifications.create({ type: 'basic', iconUrl: '圖標地址', title: '這是標題', message: '這是提示內容',})效果：
工程化
以 webpack 為例，使用 webpack 插件 webpack-extension-reloader 實現熱加載，其中熱加載服務埠 參數 port，強加載參數 reloadPage，入口參數 entries 對應 webpack 的 entry 參數中的 key，extensionPage 是擴展的入口參數；
示例如下：
var ExtensionReloader = require('webpack-extension-reloader')
new ExtensionReloader({ port: 9090, reloadPage: true, entries: { background: 'background', options: 'options', popup: 'popup', contentScripts: 'contentScripts', extensionPage: [], },})JS權限控制表
JS 種類
可訪問的 API
DOM 訪問情況
JS 訪問情況
是否可跨域
injectedScript和普通 JS 無任何差別，不能訪問 Chrome API可以可以否
contentScript只能訪問 extension、runtime 等部分 API可以不可
否
popup.js除了 devtools 外 不可
不可
是
background.js除了 devtools 外 不可
不可
是
devtools.js
只能訪問 devtools、extension、runtime 等部分 API可以可以否消息通信表
injectedScript
contentScript
popup.js
background.js
injectedScript
-
postMessage
-
-
contentScript
postMessage
-
sendMessage 和 connect
sendMessage 和 connect
popup.js
-
sendMessage 和 connect
-getBackgroundPage
background.js
-sendMessage 和 connect
getViews
-devtools.js
inspectedWindow.eval
-
sendMessage
sendMessage