一、簡(jiǎn)述

我們所說(shuō)的chrome插件一般都是指chrome擴(kuò)展程序（Chrome Extension）。chrome插件是一個(gè)用Web技術(shù)開(kāi)發(fā)、用來(lái)增強(qiáng)瀏覽器功能的軟件，它其實(shí)就是一個(gè)由HTML、CSS、JS、圖片等資源組成的一個(gè).crx后綴的文件。chrome插件除了Chrome瀏覽器之外，還可以運(yùn)行在所有webkit內(nèi)核的國(guó)產(chǎn)瀏覽器，比如360極速瀏覽器、360安全瀏覽器、搜狗瀏覽器、QQ瀏覽器等等。

二、chrome插件的能力

除了支持傳統(tǒng)的一切 web API、JavaScript API 以外，chrome插件額外支持以下API（chrome.xxx）：

• bullet 瀏覽器窗口（chrome.window）
• tab標(biāo)簽（chrome.tabs）
• 書(shū)簽（chrome.bookmark）
• 歷史（chrome.history）
• 下載（chrome.download）
• 網(wǎng)絡(luò)請(qǐng)求（chrome.webRequest）
• 自定義右鍵菜單（chrome.contextMenus）
• 開(kāi)發(fā)者工具擴(kuò)展（chrome.devtool）
• 插件管理（chrome.extension）

三、chrome插件的組成

主要由以下部分組成：

1. manifest.json （配置文件，目前最新是v3版本）
2. popup (點(diǎn)擊插件圖標(biāo)彈出的頁(yè)面)
3. content script (插入到目標(biāo)頁(yè)面中執(zhí)行的JS)
4. background script (在瀏覽器后臺(tái)Service Workers中運(yùn)行的程序)
5. options (選項(xiàng)頁(yè)面，可有可無(wú))

四、manifest v3的主要特性

1. Service Workers取代background pages，使用Service Workers，可對(duì)資源進(jìn)行緩存，從而實(shí)現(xiàn)離線訪問(wèn)。
2. 網(wǎng)絡(luò)請(qǐng)求調(diào)整，新增了一個(gè)declarativeNetRequestAPI，允許插件修改及阻斷網(wǎng)絡(luò)請(qǐng)求。
3. 遠(yuǎn)程資源訪問(wèn)限制，禁止訪問(wèn)外部的JavaScript及Wasm文件，圖片、音視頻文件不受影響。
4. Promises使用，可以愉快地使用promise了，包括async/await。
5. manifest文件的部分配置和chrome API做了部分調(diào)整。

五、基于manifest v3的chrome插件Demo展示

首頁(yè).png

添加日志.png

修改日志.png

查看日志.png

六、chrome插件開(kāi)發(fā)本地調(diào)試

1. 調(diào)試popup.html頁(yè)面：右鍵點(diǎn)擊瀏覽器右上角插件圖標(biāo)，然后選擇點(diǎn)擊"審查彈出內(nèi)容"。
2. 調(diào)試background.html或background.js：在瀏覽器的擴(kuò)展程序管理頁(yè)面找到自己加載的擴(kuò)展程序，然后點(diǎn)擊"Service Worker"（MV2則是"背景頁(yè)"）。
3. 調(diào)試content_scripts.js：在注入的頁(yè)面按F12，和正常頁(yè)面一樣調(diào)試。
4. 調(diào)試options.html頁(yè)面：右鍵點(diǎn)擊瀏覽器右上角插件圖標(biāo)，然后選擇點(diǎn)擊"選項(xiàng)"，打開(kāi)插件的選項(xiàng)頁(yè)，然后按F12，和正常頁(yè)面一樣調(diào)試。

七、chrome插件開(kāi)發(fā)注意事項(xiàng)總結(jié)

1. manifest.json必須放在插件項(xiàng)目的根目錄，里面包含了插件的各種配置信息，其中也包括了popup、content script、background script等路徑。

2. 不支持使用SVG格式的圖片。

3. 在MV3中，由于Service Workers的機(jī)制，background頁(yè)中不支持使用XMLHttpRequest，建議使用fetch()。

4. 不允許在html文件中寫(xiě)js代碼，只能通過(guò)script標(biāo)簽導(dǎo)入js文件的方式，導(dǎo)入文件也不能使用項(xiàng)目外部的文件，比如不能使用CDN上的文件

5. 不要直接在元素中給onclick屬性一個(gè)函數(shù)調(diào)用，例如<button id="save" onclick="onSave()">testB</button>，即使有定義onSave方法，也會(huì)報(bào)錯(cuò)onSave is not defined，要給元素添加事件要使用JS動(dòng)態(tài)添加，例如$("#save").click(onSave)。

6. 內(nèi)容腳本和網(wǎng)站想要訪問(wèn)的所有資源都必須在web_accessible_resources屬性下聲明。

7. popup可以直接調(diào)用background中的JS方法，也可以直接訪問(wèn)background的DOM。

8. 在對(duì)popup頁(yè)面審查元素的時(shí)候popup會(huì)被強(qiáng)制打開(kāi)無(wú)法關(guān)閉，只有控制臺(tái)關(guān)閉了才可以關(guān)閉popup，原因很簡(jiǎn)單：如果popup關(guān)閉了控制臺(tái)就沒(méi)用了。

9. 插件圖標(biāo)在未命中popup的URL匹配規(guī)則的頁(yè)面時(shí)沒(méi)有變灰，這是chrome自身的一個(gè)bug（可以關(guān)注bug論壇：https://bugs.chromium.org/p/chromium/issues/detail?id=1127067）。

10. chrome.tabs.connect或chrome.tabs.sendMessage不能用于與選項(xiàng)頁(yè)面通信，選項(xiàng)頁(yè)面可以使用chrome.runtime.connect和chrome.runtime.sendMessage與background頁(yè)通信。

11. 很多時(shí)候你發(fā)現(xiàn)你的代碼會(huì)莫名其妙的失效，找來(lái)找去又找不到原因，這時(shí)打開(kāi)background的控制臺(tái)才發(fā)現(xiàn)原來(lái)某個(gè)地方寫(xiě)錯(cuò)了導(dǎo)致代碼沒(méi)生效，正是由于background報(bào)錯(cuò)的隱蔽性(需要主動(dòng)打開(kāi)對(duì)應(yīng)的控制臺(tái)才能看到錯(cuò)誤)，所以特別注意這點(diǎn)。

12. 關(guān)于content script的注意事項(xiàng)

• content script文件中可以獲取web頁(yè)面的DOM并修改，content script和原始頁(yè)面共享DOM，但是不共享JS，JS是相互隔離的，可以通過(guò)window.postMessage和window.addEventListener來(lái)實(shí)現(xiàn)二者消息通訊。
• 不能訪問(wèn)background或popup中JS定義的變量或方法。
• 不能訪問(wèn)web頁(yè)面或其他content script中定義的變量或方法。
• 不能發(fā)送跨域請(qǐng)求。
• content script文件中只能使用下面列出的API:
  chrome.extension(getURL , inIncognitoContext , lastError , onRequest , sendRequest)
  chrome.i18n
  chrome.runtime(connect , getManifest , getURL , id , onConnect , onMessage , sendMessage)
  chrome.storage

八、國(guó)際化配置

在項(xiàng)目根目錄下創(chuàng)建名為 "_locales" 的文件夾，在該文件夾中加入如下文件夾及文件

• _locales/en/messages.json
• _locales/zh_CN/messages.json

在每種語(yǔ)言的messages.json中添加相同的屬性變量，配置如下：

{
    "tooltip": {
       "message": "這里是字段顯示的內(nèi)容"
    }
}

使用時(shí)
在manifest.json或CSS文件中通過(guò) __MSG_tooltip__ 引入，

{
    "action": {
        "default_title": "__MSG_tooltip__"，
    },
    "default_locale": "zh_CN",
}

在JS文件中通過(guò) const tooltip = chrome.i18n.getMessage("tooltip") 引入。

更多個(gè)人文章

1. 基于manifest v3+react開(kāi)發(fā)的Chrome插件demo
2. 兩個(gè)跨域頁(yè)面進(jìn)行跳轉(zhuǎn)傳參的終極方案
3. 深入理解Event Loop的運(yùn)行機(jī)制
4. hashHistory和browserHistory的區(qū)別
5. 面試秘籍之排序算法