chrome插件開(kāi)發(fā)官方文檔：https://developer.chrome.com/docs/extensions/mv3/
chrome擴(kuò)展程序調(diào)試地址：chrome://extensions/ （注意：需要打開(kāi)開(kāi)發(fā)者模式）
chrome應(yīng)用商店：https://chrome.google.com/webstore/category/extensions

chrome插件其實(shí)就是使用前端語(yǔ)法+調(diào)用chrome瀏覽器的API開(kāi)發(fā)的，所以我們必須得了解chrome瀏覽器的API以及文件結(jié)構(gòu)。

步驟1： 啟用開(kāi)發(fā)者模式

在chrome瀏覽器中，打開(kāi)擴(kuò)展程序頁(yè)面chrome://extensions/，啟用開(kāi)發(fā)者模式，如圖所示：

image.png

步驟2: 創(chuàng)建插件清單文件manifest.json

manifest.json清單文件此JSON文件描述插件的功能和配置，是必須配置的，位于項(xiàng)目根目錄

2.1 基本配置

image.png

{
  "manifest_version": 3, 插件版本，現(xiàn)在都用3了，后面就會(huì)不再支持版本2
  "name": "Hello Extensions", 插件名稱
  "description": "Base Level Extension", 插件描述
  "version": "1.0",  插件開(kāi)發(fā)版本
}

2.2 action : 聲明插件圖標(biāo)和點(diǎn)擊后展示的頁(yè)面

{
...
 "action": { 
    "default_popup": "hello.html",  點(diǎn)擊擴(kuò)展圖標(biāo)時(shí)，彈出的HTML頁(yè)面
    "default_icon": { 用于指定插件在不同位置的默認(rèn)圖標(biāo)
         "16": "images/icon16.png",
         "32": "images/icon32.png",
         "48": "images/icon48.png",
         "128": "images/icon128.png"
     }  
  }，
  "icons": { 當(dāng)用戶在 Chrome Web Store 中瀏覽插件或在安裝插件時(shí)看到插件的圖標(biāo)時(shí)，會(huì)使用 icons 指定的圖標(biāo)
    "128": "icons/icon128.png",
    "48": "icons/icon48.png",
    "16": "icons/icon16.png"
  },
}

image.png

2.3 聲明內(nèi)容腳本content_scripts，這個(gè)也是manifest.json很重要的一點(diǎn)

{
  ...
  "content_scripts": [
    {
      "js": ["scripts/content.js"], 內(nèi)容腳本路徑
      "matches": [
        "https://developer.chrome.com/docs/extensions/*", 需要插入內(nèi)容腳本的網(wǎng)址
      ]
    }
  ]
}

注意：matches里面匹配的網(wǎng)址后面要帶*，除非你只在這個(gè)網(wǎng)站某個(gè)固定網(wǎng)址使用，否則都加*，不然會(huì)出現(xiàn)content.js加載失敗，無(wú)法插入到該網(wǎng)站中，如果要支持所有網(wǎng)站，則設(shè)置"matches": ["<all_urls>"]

2.4 service_worker : 在后臺(tái)監(jiān)聽(tīng)瀏覽器事件（service_worker是特殊的javascript環(huán)境，加載它處理事件并在不需要時(shí)終止）

{
  ...
  service_worker: "scripts/background.js"
}

2.5 host_permissions: 插件可以與特定主機(jī)進(jìn)行通信、訪問(wèn)和修改網(wǎng)頁(yè)內(nèi)容

{
    ...
    "host_permissions": [
      "https://example.com/*",
      "http://www.example.org/",
      "https://api.example.net/"
    ]
}

例如我們需要在service_worker.js文件中獲取某個(gè)網(wǎng)站緩存的數(shù)據(jù)，則首先需要在清單文件中“host_permissions”聲明該網(wǎng)站，然后才能獲取，如下所示

chrome.runtime.onInstalled.addListener(() => {
    chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => { 
        chrome.tabs.get(tabId, async(updatedTab) => {
            const url = new URL(updatedTab.url);
            if (url.hostname === 'example.com') {                    
                // 在控制臺(tái)打印存儲(chǔ)的數(shù)據(jù)       
                const data = await chrome.scripting.executeScript({
                    target: { tabId: tab.id },
                    function: () => {
                        return {                         
                            userInfo: sessionStorage.getItem('userInfo'),
                        };
                    }
                });
                            
                if(data && data.length){                     
                    userInfo = JSON.parse(data[0].result.userInfo);                 
                }
            }  
        });
    });
});

步驟3: 開(kāi)發(fā)插件功能

根據(jù)插件的需求，創(chuàng)建相應(yīng)的 HTML、CSS 和 JavaScript 文件，
使用 JavaScript 編寫插件的邏輯和功能。您可以通過(guò) DOM 操作、事件處理和與chrome API 的交互來(lái)實(shí)現(xiàn)所需的功能。

image.png

步驟4: 加載和調(diào)試

加載插件：首先在chrome瀏覽器地址欄輸入chrome://extensions/開(kāi)發(fā)擴(kuò)展程序頁(yè)面，點(diǎn)擊左上角的“加載已解壓的擴(kuò)展程序”，把自己本地的文件夾直接導(dǎo)入進(jìn)去，如下圖所示。

image.png

調(diào)試service_worker.js文件

image.png

調(diào)試popup.js文件

鼠標(biāo)點(diǎn)擊插件，點(diǎn)擊右鍵菜單會(huì)出現(xiàn)“審查彈出內(nèi)容”，即可進(jìn)行調(diào)試

image.png

調(diào)試content_script.js文件

打開(kāi)manifest.json中配置content_script對(duì)應(yīng)的網(wǎng)站地址，F(xiàn)12打開(kāi)調(diào)試，如果下方出現(xiàn)了你開(kāi)發(fā)的插件名稱以及文件，則代表你的頁(yè)面成功插入該網(wǎng)站，在console中即可進(jìn)行調(diào)試

image.png

步驟5: 打包和發(fā)布插件

chrome中也支持自己打包文件，打包之后生成后綴為.crx的文件，然后把.crx結(jié)尾的插件導(dǎo)入到瀏覽器，但是未發(fā)布的插件，開(kāi)關(guān)無(wú)法打開(kāi)，一直處于置灰狀態(tài)，導(dǎo)致無(wú)法使用，查看詳情才知道Chrome 只允許使用 Chrome 應(yīng)用商店中發(fā)布的擴(kuò)展程序
相關(guān)說(shuō)明文檔如下：https://support.google.com/chrome_webstore/answer/2811969?visit_id=638279384706503272-341708265&p=ui_remove_non_cws_extensions&hl=zh-Hans&rd=2

注冊(cè)以及發(fā)布流程如下：
chrome應(yīng)用商店點(diǎn)擊注冊(cè)，就會(huì)看到如下圖所示。首先同意左側(cè)的開(kāi)發(fā)者協(xié)議和政策，然后去支付注冊(cè)費(fèi)5美元進(jìn)行注冊(cè)。

image.png

這個(gè)注冊(cè)支付，不能用國(guó)內(nèi)的銀行卡以及信用卡，要用Visa卡，沒(méi)有的話也沒(méi)關(guān)系，可以直接去淘寶買一個(gè)。

chrome應(yīng)用商店注冊(cè)成功之后，先把本地文件壓縮為.zip格式，點(diǎn)擊上傳即可（最多支持發(fā)布20個(gè)插件）。

image.png

上傳成功后，需要你填寫一些關(guān)于插件相關(guān)信息，填寫完整之后右上角的“提交審核”按鈕才會(huì)高亮，然后就能提交審核了。

注意chrome插件的公開(kāi)范圍越廣，審核時(shí)間越長(zhǎng)。

image.png

常用的chrome API

chrome.runtime:
提供與插件運(yùn)行時(shí)環(huán)境交互的功能，包括管理插件的生命周期、發(fā)送消息、注冊(cè)事件監(jiān)聽(tīng)器等。
chrome.extension:
這個(gè) API 已被廢棄，不推薦使用。它提供了一些與插件相關(guān)的功能，例如獲取插件的 URL、向頁(yè)面注入腳本等。相應(yīng)的功能可以使用 chrome.runtime 替代。
chrome.tabs:
允許與瀏覽器標(biāo)簽頁(yè)進(jìn)行交互，包括獲取當(dāng)前標(biāo)簽頁(yè)信息、打開(kāi)新標(biāo)簽頁(yè)、切換標(biāo)簽頁(yè)、執(zhí)行腳本等。
chrome.windows:
允許與瀏覽器窗口進(jìn)行交互，包括獲取當(dāng)前窗口信息、打開(kāi)新窗口、切換窗口、調(diào)整窗口大小等。
chrome.storage
提供持久化存儲(chǔ)功能，用于在插件中保存和檢索數(shù)據(jù)，包括使用 chrome.storage.local
進(jìn)行本地存儲(chǔ)和 chrome.storage.sync 進(jìn)行跨設(shè)備同步。
chrome.runtime.sendMessage
用于在插件組件之間發(fā)送消息，可以實(shí)現(xiàn)不同組件之間的通信和數(shù)據(jù)傳遞。
chrome.runtime.onMessage
注冊(cè)消息監(jiān)聽(tīng)器，用于接收其他組件發(fā)送的消息，并進(jìn)行相應(yīng)的處理。
chrome.browserAction
允許在瀏覽器工具欄中創(chuàng)建圖標(biāo)按鈕，并定義與按鈕相關(guān)的交互行為，例如點(diǎn)擊按鈕時(shí)打開(kāi)彈出窗口或執(zhí)行特定操作。
chrome.contextMenus
允許在瀏覽器右鍵菜單中添加自定義菜單項(xiàng)，并定義菜單項(xiàng)的點(diǎn)擊行為。
chrome.webRequest
允許攔截和修改網(wǎng)絡(luò)請(qǐng)求，包括請(qǐng)求的頭部、URL、響應(yīng)內(nèi)容等，以實(shí)現(xiàn)網(wǎng)絡(luò)請(qǐng)求的修改和過(guò)濾。
chrome.notifications
允許在操作系統(tǒng)通知區(qū)域顯示通知，以向用戶發(fā)送系統(tǒng)級(jí)別的提示和提醒。
chrome.identity:
提供身份驗(yàn)證和用戶信息相關(guān)的功能，例如使用 OAuth2 進(jìn)行用戶身份驗(yàn)證。