Chrome外掛開發知識要點

本文先介紹外掛的幾個核心知識點，再從專案實戰的角度深刻記憶它。

簡介

谷歌瀏覽器右上角的擴充套件外掛(Chrome Extension)實際上是是更底層的瀏覽器功能擴充套件。Chrome外掛是一個用Web技術開發、用來增強瀏覽器功能的軟體，它其實就是一個由HTML、CSS、JS、圖片等資源組成的一個.crx字尾的壓縮包。

核心介紹

manifest.json

這是一個Chrome外掛最重要也是必不可少的檔案，用來配置所有和外掛相關的配置，必須放在根目錄。其中，manifest_version、name、version3個是必不可少的，description和icons是推薦的。

下面給出的是一些常見的配置項，均有中文註釋，完整的配置文件請戳這裡。

{
    // 清單檔案的版本，這個必須寫，而且必須是2
    "manifest_version": 2,
    // 外掛的名稱
    "name": "demo",
    // 外掛的版本
    "version": "1.0.0",
    // 外掛描述
    "description": "簡單的Chrome擴充套件demo",
    // 圖示，一般偷懶全部用一個尺寸的也沒問題
    "icons":
    {
        "16": "img/icon.png",
        "48": "img/icon.png",
        "128": "img/icon.png"
    },
    // 會一直常駐的後臺JS或後臺頁面
    "background":
    {
        // 2種指定方式，如果指定JS，那麼會自動生成一個背景頁
        "page": "background.html"
        //"scripts": ["js/background.js"]
    },
    // 瀏覽器右上角圖示設定，browser_action、page_action、app必須三選一
    "browser_action": 
    {
        "default_icon": "img/icon.png",
        // 圖示懸停時的標題，可選
        "default_title": "這是一個示例Chrome外掛",
        "default_popup": "popup.html"
    },
    // 當某些特定頁面開啟才顯示的圖示
    /*"page_action":
    {
        "default_icon": "img/icon.png",
        "default_title": "我是pageAction",
        "default_popup": "popup.html"
    },*/
    // 需要直接注入頁面的JS
    "content_scripts": 
    [
        {
            //"matches": ["http://*/*", "https://*/*"],
            // "<all_urls>" 表示匹配所有地址
            "matches": ["<all_urls>"],
            // 多個JS按順序注入
            "js": ["js/jquery-1.8.3.js", "js/content-script.js"],
            // JS的注入可以隨便一點，但是CSS的注意就要千萬小心了，因為一不小心就可能影響全域性樣式
            "css": ["css/custom.css"],
            // 程式碼注入的時間，可選值： "document_start", "document_end", or "document_idle"，最後一個表示頁面空閒時，預設document_idle
            "run_at": "document_start"
        },
        // 這裡僅僅是為了演示content-script可以配置多個規則
        {
            "matches": ["*://*/*.png", "*://*/*.jpg", "*://*/*.gif", "*://*/*.bmp"],
            "js": ["js/show-image-content-size.js"]
        }
    ],
    // 許可權申請
    "permissions":
    [
        "contextMenus", // 右鍵選單
        "tabs", // 標籤
        "notifications", // 通知
        "webRequest", // web請求
        "webRequestBlocking",
        "storage", // 外掛本地儲存
        "http://*/*", // 可以通過executeScript或者insertCSS訪問的網站
        "https://*/*" // 可以通過executeScript或者insertCSS訪問的網站
    ],
    // 普通頁面能夠直接訪問的外掛資源列表，如果不設定是無法直接訪問的
    "web_accessible_resources": ["js/inject.js"],
    // 外掛主頁，這個很重要，不要浪費了這個免費廣告位
    "homepage_url": "https://www.baidu.com",
    // 覆蓋瀏覽器預設頁面
    "chrome_url_overrides":
    {
        // 覆蓋瀏覽器預設的新標籤頁
        "newtab": "newtab.html"
    },
    // Chrome40以前的外掛配置頁寫法
    "options_page": "options.html",
    // Chrome40以後的外掛配置頁寫法，如果2個都寫，新版Chrome只認後面這一個
    "options_ui":
    {
        "page": "options.html",
        // 新增一些預設的樣式，推薦使用
        "chrome_style": true
    },
    // 向位址列註冊一個關鍵字以提供搜尋建議，只能設定一個關鍵字
    "omnibox": { "keyword" : "go" },
    // 預設語言
    "default_locale": "zh_CN",
    // devtools頁面入口，注意只能指向一個HTML檔案，不能是JS檔案
    "devtools_page": "devtools.html"
}

content-scripts

所謂content-scripts，其實就是Chrome外掛中向頁面注入指令碼的一種形式（雖然名為script，其實還可以包括css的），藉助content-scripts我們可以實現通過配置的方式輕鬆向指定頁面注入JS和CSS（如果需要動態注入，可以參考下文），最常見的比如：廣告遮蔽、頁面CSS定製，等等。

示例配置：

{
    // 需要直接注入頁面的JS
    "content_scripts": 
    [
        {
            //"matches": ["http://*/*", "https://*/*"],
            // "<all_urls>" 表示匹配所有地址
            "matches": ["<all_urls>"],
            // 多個JS按順序注入
            "js": ["js/jquery-1.8.3.js", "js/content-script.js"],
            // JS的注入可以隨便一點，但是CSS的注意就要千萬小心了，因為一不小心就可能影響全域性樣式
            "css": ["css/custom.css"],
            // 程式碼注入的時間，可選值： "document_start", "document_end", or "document_idle"，最後一個表示頁面空閒時，預設document_idle
            "run_at": "document_start"
        }
    ],
}

特別注意，如果沒有主動指定run_at為document_start（預設為document_idle），下面這種程式碼是不會生效的：

document.addEventListener('DOMContentLoaded', function()
{
    console.log('我被執行了！');
});

content-scripts和原始頁面共享DOM，但是不共享JS，如要訪問頁面JS（例如某個JS變數），只能通過injected js來實現。content-scripts不能訪問絕大部分chrome.xxx.api，除了下面這4種：

chrome.extension(getURL , inIncognitoContext , lastError , onRequest , sendRequest)
chrome.i18n
chrome.runtime(connect , getManifest , getURL , id , onConnect , onMessage , sendMessage)
chrome.storage

其實看到這裡不要悲觀，這些API絕大部分時候都夠用了，非要呼叫其它API的話，你還可以通過通訊來實現讓background來幫你呼叫（關於通訊，後文有詳細介紹）。

background

後臺（姑且這麼翻譯吧），是一個常駐的頁面，它的生命週期是外掛中所有型別頁面中最長的，它隨著瀏覽器的開啟而開啟，隨著瀏覽器的關閉而關閉，所以通常把需要一直執行的、啟動就執行的、全域性的程式碼放在background裡面。

background的許可權非常高，幾乎可以呼叫所有的Chrome擴充套件API（除了devtools），而且它可以無限制跨域，也就是可以跨域訪問任何網站而無需要求對方設定CORS。

經過測試，其實不止是background，所有的直接通過chrome-extension://id/xx.html這種方式開啟的網頁都可以無限制跨域。

配置中，background可以通過page指定一張網頁，也可以通過scripts直接指定一個JS，Chrome會自動為這個JS生成一個預設的網頁：

{
    // 會一直常駐的後臺JS或後臺頁面
    "background":
    {
        // 2種指定方式，如果指定JS，那麼會自動生成一個背景頁
        "page": "background.html"
        //"scripts": ["js/background.js"]
    },
}

需要特別說明的是，雖然你可以通過chrome-extension://xxx/background.html直接開啟後臺頁，但是你開啟的後臺頁和真正一直在後臺執行的那個頁面不是同一個，換句話說，你可以開啟無數個background.html，但是真正在後臺常駐的只有一個，而且這個你永遠看不到它的介面，只能除錯它的程式碼。

event-pages

這裡順帶介紹一下event-pages，它是一個什麼東西呢？鑑於background生命週期太長，長時間掛載後臺可能會影響效能，所以Google又弄一個event-pages，在配置檔案上，它與background的唯一區別就是多了一個persistent引數：

{
    "background":
    {
        "scripts": ["event-page.js"],
        "persistent": false
    },
}

它的生命週期是：在被需要時載入，在空閒時被關閉，什麼叫被需要時呢？比如第一次安裝、外掛更新、有content-script向它傳送訊息，等等。

除了配置檔案的變化，程式碼上也有一些細微變化，個人這個簡單瞭解一下就行了，一般情況下background也不會很消耗效能的。

popup

popup是點選browser_action或者page_action圖示時開啟的一個小視窗網頁，焦點離開網頁就立即關閉，一般用來做一些臨時性的互動。

部落格園網摘外掛popup效果

popup可以包含任意你想要的HTML內容，並且會自適應大小。可以通過default_popup欄位來指定popup頁面，也可以呼叫setPopup()方法。

配置方式：

{
    "browser_action":
    {
        "default_icon": "img/icon.png",
        // 圖示懸停時的標題，可選
        "default_title": "這是一個示例Chrome外掛",
        "default_popup": "popup.html"
    }
}

需要特別注意的是，由於單擊圖示開啟popup，焦點離開又立即關閉，所以popup頁面的生命週期一般很短，需要長時間執行的程式碼千萬不要寫在popup裡面。

在許可權上，它和background非常類似，它們之間最大的不同是生命週期的不同，popup中可以直接通過chrome.extension.getBackgroundPage()獲取background的window物件。

injected-script

這裡的injected-script是我給它取的，指的是通過DOM操作的方式向頁面注入的一種JS。為什麼要把這種JS單獨拿出來討論呢？又或者說為什麼需要通過這種方式注入JS呢？

這是因為content-script有一個很大的“缺陷”，也就是無法訪問頁面中的JS，雖然它可以操作DOM，但是DOM卻不能呼叫它，也就是無法在DOM中通過繫結事件的方式呼叫content-script中的程式碼（包括直接寫onclick和addEventListener2種方式都不行），但是，“在頁面上新增一個按鈕並呼叫外掛的擴充套件API”是一個很常見的需求，那該怎麼辦呢？其實這就是本小節要講的。

在content-script中通過DOM方式向頁面注入inject-script程式碼示例：

// 向頁面注入JS
function injectCustomJs(jsPath)
{
    jsPath = jsPath || 'js/inject.js';
    var temp = document.createElement('script');
    temp.setAttribute('type', 'text/javascript');
    // 獲得的地址類似：chrome-extension://ihcokhadfjfchaeagdoclpnjdiokfakg/js/inject.js
    temp.src = chrome.extension.getURL(jsPath);
    temp.onload = function()
    {
        // 放在頁面不好看，執行完後移除掉
        this.parentNode.removeChild(this);
    };
    document.head.appendChild(temp);
}

你以為這樣就行了？執行一下你會看到如下報錯：

Denying load of chrome-extension://efbllncjkjiijkppagepehoekjojdclc/js/inject.js. Resources must be listed in the web_accessible_resources manifest key in order to be loaded by pages outside the extension.

意思就是你想要在web中直接訪問外掛中的資源的話必須顯示宣告才行，配置檔案中增加如下：

{
    // 普通頁面能夠直接訪問的外掛資源列表，如果不設定是無法直接訪問的
    "web_accessible_resources": ["js/inject.js"],
}

至於inject-script如何呼叫content-script中的程式碼，後面我會在專門的一個訊息通訊章節詳細介紹。

homepage_url

Chrome外掛的8種展示形式

browserAction(瀏覽器右上角)

通過配置browser_action可以在瀏覽器的右上角增加一個圖示，一個browser_action可以擁有一個圖示，一個tooltip，一個badge和一個popup。

示例配置如下：

"browser_action":
{
    "default_icon": "img/icon.png",
    "default_title": "這是一個示例Chrome外掛",
    "default_popup": "popup.html"
}

pageAction(位址列右側)

所謂pageAction，指的是隻有當某些特定頁面開啟才顯示的圖示，它和browserAction最大的區別是一個始終都顯示，一個只在特定情況才顯示。

需要特別說明的是早些版本的Chrome是將pageAction放在位址列的最右邊，左鍵單擊彈出popup，右鍵單擊則彈出相關預設的選項選單：

而新版的Chrome更改了這一策略，pageAction和普通的browserAction一樣也是放在瀏覽器右上角，只不過沒有點亮時是灰色的，點亮了才是彩色的，灰色時無論左鍵還是右鍵單擊都是彈出選項：

具體是從哪一版本開始改的沒去仔細考究，反正知道v50.0的時候還是前者，v58.0的時候已改為後者。

調整之後的pageAction我們可以簡單地把它看成是可以置灰的browserAction。

chrome.pageAction.show(tabId) 顯示圖示；
chrome.pageAction.hide(tabId) 隱藏圖示；

示例(只有開啟百度才顯示圖示)：

// manifest.json
{
    "page_action":
    {
        "default_icon": "img/icon.png",
        "default_title": "我是pageAction",
        "default_popup": "popup.html"
    },
    "permissions": ["declarativeContent"]
}

// background.js
chrome.runtime.onInstalled.addListener(function(){
    chrome.declarativeContent.onPageChanged.removeRules(undefined, function(){
        chrome.declarativeContent.onPageChanged.addRules([
            {
                conditions: [
                    // 只有開啟百度才顯示pageAction
                    new chrome.declarativeContent.PageStateMatcher({pageUrl: {urlContains: 'baidu.com'}})
                ],
                actions: [new chrome.declarativeContent.ShowPageAction()]
            }
        ]);
    });
});

效果圖：

右鍵選單

通過開發Chrome外掛可以自定義瀏覽器的右鍵選單，主要是通過chrome.contextMenusAPI實現，右鍵選單可以出現在不同的上下文，比如普通頁面、選中的文字、圖片、連結，等等，如果有同一個外掛裡面定義了多個選單，Chrome會自動組合放到以外掛名字命名的二級選單裡，如下：

最簡單的右鍵選單示例:

// manifest.json
{"permissions": ["contextMenus"]}

// background.js
chrome.contextMenus.create({
    title: "測試右鍵選單",
    onclick: function(){alert('您點選了右鍵選單！');}
});

override(覆蓋特定頁面)

使用override頁可以將Chrome預設的一些特定頁面替換掉，改為使用擴充套件提供的頁面。

擴充套件可以替代如下頁面：

歷史記錄：從工具選單上點選歷史記錄時訪問的頁面，或者從位址列直接輸入 chrome://history
新標籤頁：當建立新標籤的時候訪問的頁面，或者從位址列直接輸入 chrome://newtab
書籤：瀏覽器的書籤，或者直接輸入 chrome://bookmarks

注意：

一個擴充套件只能替代一個頁面；
不能替代隱身視窗的新標籤頁；
網頁必須設定title，否則使用者可能會看到網頁的URL，造成困擾；

程式碼（注意，一個外掛只能替代一個預設頁，以下僅為演示）：

"chrome_url_overrides":
{
    "newtab": "newtab.html",
    "history": "history.html",
    "bookmarks": "bookmarks.html"
}

devtools(開發者工具)

使用過vue的應該見過這種型別的外掛：

是的，Chrome允許外掛在開發者工具(devtools)上動手腳，主要表現在：

自定義一個和多個和Elements、Console、Sources等同級別的皮膚；
自定義側邊欄(sidebar)，目前只能自定義Elements皮膚的側邊欄；

每開啟一個開發者工具視窗，都會建立devtools頁面的例項，F12視窗關閉，頁面也隨著關閉，所以devtools頁面的生命週期和devtools視窗是一致的。devtools頁面可以訪問一組特有的DevTools API以及有限的擴充套件API，這組特有的DevTools API只有devtools頁面才可以訪問，background都無權訪問，這些API包括：

chrome.devtools.panels：皮膚相關；
chrome.devtools.inspectedWindow：獲取被審查視窗的有關資訊；
chrome.devtools.network：獲取有關網路請求的資訊；

大部分擴充套件API都無法直接被DevTools頁面呼叫，但它可以像content-script一樣直接呼叫chrome.extension和chrome.runtimeAPI，同時它也可以像content-script一樣使用Message互動的方式與background頁面進行通訊。

option(選項頁)

所謂options頁，就是外掛的設定頁面，有2個入口，一個是右鍵圖示有一個“選項”選單，還有一個在外掛管理頁面：

在Chrome40以前，options頁面和其它普通頁面沒什麼區別，Chrome40以後則有了一些變化。

我們先看老版的options：

{
    // Chrome40以前的外掛配置頁寫法
    "options_page": "options.html",
}

這個頁面裡面的內容就隨你自己發揮了，配置之後在外掛管理頁就會看到一個選項按鈕入口，點進去就是開啟一個網頁，沒啥好講的。

效果:

再來看新版的optionsV2：

{
    "options_ui":
    {
        "page": "options.html",
        // 新增一些預設的樣式，推薦使用
        "chrome_style": true
    },
}

看起來是不是高大上了？

幾點注意：

為了相容，建議2種都寫，如果都寫了，Chrome40以後會預設讀取新版的方式；
新版options中不能使用alert；
資料儲存建議用chrome.storage，因為會隨使用者自動同步；

omnibox

omnibox是向使用者提供搜尋建議的一種方式。先來看個gif圖以便了解一下這東西到底是個什麼鬼：

註冊某個關鍵字以觸發外掛自己的搜尋建議介面，然後可以任意發揮了。

首先，配置檔案如下：

{
    // 向位址列註冊一個關鍵字以提供搜尋建議，只能設定一個關鍵字
    "omnibox": { "keyword" : "go" },
}

然後background.js中註冊監聽事件：

// omnibox 演示
chrome.omnibox.onInputChanged.addListener((text, suggest) => {
    console.log('inputChanged: ' + text);
    if(!text) return;
    if(text == '美女') {
        suggest([
            {content: '中國' + text, description: '你要找“中國美女”嗎？'},
            {content: '日本' + text, description: '你要找“日本美女”嗎？'},
            {content: '泰國' + text, description: '你要找“泰國美女或人妖”嗎？'},
            {content: '韓國' + text, description: '你要找“韓國美女”嗎？'}
        ]);
    }
    else if(text == '微博') {
        suggest([
            {content: '新浪' + text, description: '新浪' + text},
            {content: '騰訊' + text, description: '騰訊' + text},
            {content: '搜狐' + text, description: '搜尋' + text},
        ]);
    }
    else {
        suggest([
            {content: '百度搜尋 ' + text, description: '百度搜尋 ' + text},
            {content: '谷歌搜尋 ' + text, description: '谷歌搜尋 ' + text},
        ]);
    }
});

// 當使用者接收關鍵字建議時觸發
chrome.omnibox.onInputEntered.addListener((text) => {
    console.log('inputEntered: ' + text);
    if(!text) return;
    var href = '';
    if(text.endsWith('美女')) href = 'http://image.baidu.com/search/index?tn=baiduimage&ie=utf-8&word=' + text;
    else if(text.startsWith('百度搜尋')) href = 'https://www.baidu.com/s?ie=UTF-8&wd=' + text.replace('百度搜尋 ', '');
    else if(text.startsWith('谷歌搜尋')) href = 'https://www.google.com.tw/search?q=' + text.replace('谷歌搜尋 ', '');
    else href = 'https://www.baidu.com/s?ie=UTF-8&wd=' + text;
    openUrlCurrentTab(href);
});
// 獲取當前選項卡ID
function getCurrentTabId(callback)
{
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs)
    {
        if(callback) callback(tabs.length ? tabs[0].id: null);
    });
}

// 當前標籤開啟某個連結
function openUrlCurrentTab(url)
{
    getCurrentTabId(tabId => {
        chrome.tabs.update(tabId, {url: url});
    })
}

桌面通知

Chrome提供了一個chrome.notificationsAPI以便外掛推送桌面通知，暫未找到chrome.notifications和HTML5自帶的Notification的顯著區別及優勢。

在後臺JS中，無論是使用chrome.notifications還是Notification都不需要申請許可權（HTML5方式需要申請許可權），直接使用即可。

最簡單的通知：

程式碼：

chrome.notifications.create(null, {
    type: 'basic',
    iconUrl: 'img/icon.png',
    title: '這是標題',
    message: '您剛才點選了自定義右鍵選單！'
});

5種型別的JS對比

Chrome外掛的JS主要可以分為這5類：injected script、content-script、popup js、background js和devtools js

許可權對比

JS種類	可訪問的API	DOM訪問情況	JS訪問情況	直接跨域
injected script	和普通JS無任何差別，不能訪問任何擴充套件API	可以訪問	可以訪問	不可以
content script	只能訪問 extension、runtime等部分API	可以訪問	不可以	不可以
popup js	可訪問絕大部分API，除了devtools系列	不可直接訪問	不可以	可以
background js	可訪問絕大部分API，除了devtools系列	不可直接訪問	不可以	可以
devtools js	只能訪問 devtools、extension、runtime等部分API	可以	可以	不可以

除錯方式對比

JS型別	除錯方式	圖片說明
injected script	直接普通的F12即可	懶得截圖
content-script	開啟Console,如圖切換
popup-js	popup頁面右鍵審查元素
background	外掛管理頁點選背景頁即可
devtools-js	暫未找到有效方法	-

訊息通訊

通訊主頁：https://developer.chrome.com/...

前面我們介紹了Chrome外掛中存在的5種JS，那麼它們之間如何互相通訊呢？下面先來系統概況一下，然後再分類細說。需要知道的是，popup和background其實幾乎可以視為一種東西，因為它們可訪問的API都一樣、通訊機制一樣、都可以跨域。

互相通訊概覽

注：-表示不存在或者無意義，或者待驗證。

	injected-script	content-script	popup-js	background-js
injected-script	-	window.postMessage	-	-
content-script	window.postMessage	-	chrome.runtime.sendMessage chrome.runtime.connect	chrome.runtime.sendMessage chrome.runtime.connect
popup-js	-	chrome.tabs.sendMessage chrome.tabs.connect	-	chrome.extension. getBackgroundPage()
background-js	-	chrome.tabs.sendMessage chrome.tabs.connect	chrome.extension.getViews	-
devtools-js	chrome.devtools. inspectedWindow.eval	-	chrome.runtime.sendMessage	chrome.runtime.sendMessage

通訊詳細介紹

1. popup和background

popup可以直接呼叫background中的JS方法，也可以直接訪問background的DOM：

// background.js
function test()
{
    alert('我是background！');
}

// popup.js
var bg = chrome.extension.getBackgroundPage();
bg.test(); // 訪問bg的函式
alert(bg.document.body.innerHTML); // 訪問bg的DOM

小插曲，今天碰到一個情況，發現popup無法獲取background的任何方法，找了半天才發現是因為background的js報錯了，而你如果不主動檢視background的js的話，是看不到錯誤資訊的，特此提醒。

至於background訪問popup如下（前提是popup已經開啟）：

var views = chrome.extension.getViews({type:'popup'});
if(views.length > 0) {
    console.log(views[0].location.href);
}

2.popup或者bg向content主動傳送訊息

background.js或者popup.js：

function sendMessageToContentScript(message, callback)
{
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs)
    {
        chrome.tabs.sendMessage(tabs[0].id, message, function(response)
        {
            if(callback) callback(response);
        });
    });
}
sendMessageToContentScript({cmd:'test', value:'你好，我是popup！'}, function(response)
{
    console.log('來自content的回覆：'+response);
});

content-script.js接收：

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse)
{
    // console.log(sender.tab ?"from a content script:" + sender.tab.url :"from the extension");
    if(request.cmd == 'test') alert(request.value);
    sendResponse('我收到了你的訊息！');
});

雙方通訊直接傳送的都是JSON物件，不是JSON字串，所以無需解析，很方便（當然也可以直接傳送字串）。

網上有些老程式碼中用的是chrome.extension.onMessage，沒有完全查清二者的區別(貌似是別名)，但是建議統一使用chrome.runtime.onMessage。

3. content-script主動發訊息給後臺

content-script.js：

chrome.runtime.sendMessage({greeting: '你好，我是content-script呀，我主動發訊息給後臺！'}, function(response) {
    console.log('收到來自後臺的回覆：' + response);
});

background.js 或者 popup.js：

// 監聽來自content-script的訊息
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse)
{
    console.log('收到來自content-script的訊息：');
    console.log(request, sender, sendResponse);
    sendResponse('我是後臺，我已收到你的訊息：' + JSON.stringify(request));
});

注意事項：

content_scripts向popup主動發訊息的前提是popup必須開啟！否則需要利用background作中轉；
如果background和popup同時監聽，那麼它們都可以同時收到訊息，但是隻有一個可以sendResponse，一個先傳送了，那麼另外一個再傳送就無效；

4. injected script和content-script

content-script和頁面內的指令碼（injected-script自然也屬於頁面內的指令碼）之間唯一共享的東西就是頁面的DOM元素，有2種方法可以實現二者通訊：

可以通過window.postMessage和window.addEventListener來實現二者訊息通訊；
通過自定義DOM事件來實現；

第一種方法（推薦）：

injected-script中：

window.postMessage({"test": '你好！'}, '*');

content script中：

window.addEventListener("message", function(e)
{
    console.log(e.data);
}, false);

第二種方法：

injected-script中：

var customEvent = document.createEvent('Event');
customEvent.initEvent('myCustomEvent', true, true);
function fireCustomEvent(data) {
    hiddenDiv = document.getElementById('myCustomEventDiv');
    hiddenDiv.innerText = data
    hiddenDiv.dispatchEvent(customEvent);
}
fireCustomEvent('你好，我是普通JS！');

content-script.js中：

var hiddenDiv = document.getElementById('myCustomEventDiv');
if(!hiddenDiv) {
    hiddenDiv = document.createElement('div');
    hiddenDiv.style.display = 'none';
    document.body.appendChild(hiddenDiv);
}
hiddenDiv.addEventListener('myCustomEvent', function() {
    var eventData = document.getElementById('myCustomEventDiv').innerText;
    console.log('收到自定義事件訊息：' + eventData);
});

長連線和短連線

其實上面已經涉及到了，這裡再單獨說明一下。Chrome外掛中有2種通訊方式，一個是短連線（chrome.tabs.sendMessage和chrome.runtime.sendMessage），一個是長連線（chrome.tabs.connect和chrome.runtime.connect）。

短連線的話就是擠牙膏一樣，我傳送一下，你收到了再回復一下，如果對方不回覆，你只能重新發，而長連線類似WebSocket會一直建立連線，雙方可以隨時互發訊息。

短連線上面已經有程式碼示例了，這裡只講一下長連線。

popup.js：

getCurrentTabId((tabId) => {
    var port = chrome.tabs.connect(tabId, {name: 'test-connect'});
    port.postMessage({question: '你是誰啊？'});
    port.onMessage.addListener(function(msg) {
        alert('收到訊息：'+msg.answer);
        if(msg.answer && msg.answer.startsWith('我是'))
        {
            port.postMessage({question: '哦，原來是你啊！'});
        }
    });
});

content-script.js：

// 監聽長連線
chrome.runtime.onConnect.addListener(function(port) {
    console.log(port);
    if(port.name == 'test-connect') {
        port.onMessage.addListener(function(msg) {
            console.log('收到長連線訊息：', msg);
            if(msg.question == '你是誰啊？') port.postMessage({answer: '我是你爸！'});
        });
    }
});

其它補充

動態注入或執行JS

雖然在background和popup中無法直接訪問頁面DOM，但是可以通過chrome.tabs.executeScript來執行指令碼，從而實現訪問web頁面的DOM（注意，這種方式也不能直接訪問頁面JS）。

示例manifest.json配置：

{
    "name": "動態JS注入演示",
    ...
    "permissions": [
        "tabs", "http://*/*", "https://*/*"
    ],
    ...
}

JS：

// 動態執行JS程式碼
chrome.tabs.executeScript(tabId, {code: 'document.body.style.backgroundColor="red"'});
// 動態執行JS檔案
chrome.tabs.executeScript(tabId, {file: 'some-script.js'});

動態注入CSS

示例manifest.json配置：

{
    "name": "動態CSS注入演示",
    ...
    "permissions": [
        "tabs", "http://*/*", "https://*/*"
    ],
    ...
}

JS程式碼：

// 動態執行CSS程式碼，TODO，這裡有待驗證
chrome.tabs.insertCSS(tabId, {code: 'xxx'});
// 動態執行CSS檔案
chrome.tabs.insertCSS(tabId, {file: 'some-style.css'});

獲取當前視窗ID

chrome.windows.getCurrent(function(currentWindow)
{
    console.log('當前視窗ID：' + currentWindow.id);
});

獲取當前標籤頁ID

一般有2種方法：

// 獲取當前選項卡ID
function getCurrentTabId(callback)
{
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs)
    {
        if(callback) callback(tabs.length ? tabs[0].id: null);
    });
}

獲取當前選項卡id的另一種方法，大部分時候都類似，只有少部分時候會不一樣（例如當視窗最小化時）

// 獲取當前選項卡ID
function getCurrentTabId2()
{
    chrome.windows.getCurrent(function(currentWindow)
    {
        chrome.tabs.query({active: true, windowId: currentWindow.id}, function(tabs)
        {
            if(callback) callback(tabs.length ? tabs[0].id: null);
        });
    });
}

本地儲存

本地儲存建議用chrome.storage而不是普通的localStorage，區別有好幾點，個人認為最重要的2點區別是：

chrome.storage是針對外掛全域性的，即使你在background中儲存的資料，在content-script也能獲取到；
chrome.storage.sync可以跟隨當前登入使用者自動同步，這臺電腦修改的設定會自動同步到其它電腦，很方便，如果沒有登入或者未聯網則先儲存到本地，等登入了再同步至網路；

需要宣告storage許可權，有chrome.storage.sync和chrome.storage.local2種方式可供選擇，使用示例如下：

// 讀取資料，第一個引數是指定要讀取的key以及設定預設值
chrome.storage.sync.get({color: 'red', age: 18}, function(items) {
    console.log(items.color, items.age);
});
// 儲存資料
chrome.storage.sync.set({color: 'blue'}, function() {
    console.log('儲存成功！');
});

webRequest

通過webRequest系列API可以對HTTP請求進行任性地修改、定製，這裡通過beforeRequest來簡單演示一下它的冰山一角：

//manifest.json
{
    // 許可權申請
    "permissions":
    [
        "webRequest", // web請求
        "webRequestBlocking", // 阻塞式web請求
        "storage", // 外掛本地儲存
        "http://*/*", // 可以通過executeScript或者insertCSS訪問的網站
        "https://*/*" // 可以通過executeScript或者insertCSS訪問的網站
    ],
}


// background.js
// 是否顯示圖片
var showImage;
chrome.storage.sync.get({showImage: true}, function(items) {
    showImage = items.showImage;
});
// web請求監聽，最後一個參數列示阻塞式，需單獨宣告許可權：webRequestBlocking
chrome.webRequest.onBeforeRequest.addListener(details => {
    // cancel 表示取消本次請求
    if(!showImage && details.type == 'image') return {cancel: true};
    // 簡單的音視訊檢測
    // 大部分網站視訊的type並不是media，且視訊做了防下載處理，所以這裡僅僅是為了演示效果，無實際意義
    if(details.type == 'media') {
        chrome.notifications.create(null, {
            type: 'basic',
            iconUrl: 'img/icon.png',
            title: '檢測到音視訊',
            message: '音視訊地址：' + details.url,
        });
    }
}, {urls: ["<all_urls>"]}, ["blocking"]);

API總結

比較常用用的一些API系列：

chrome.tabs
chrome.runtime
chrome.webRequest
chrome.window
chrome.storage
chrome.contextMenus
chrome.devtools
chrome.extension

專案實戰

使用 vue cli 4 開發 chrome 外掛

建立 vue cli 4 專案

vue create google-extension-demo

勾選 Babel、TypeScript、CSS Pre-processors、Linter / Formatter

這裡，CSS 前處理器隨意，我選了 Sass/SCSS (with dart-sass)。

另外，linter / formatter 中的 TSLint 已經不再維護，建議使用 ESLint + Prettier。
不要使用 class-style component syntax，見vue-cli-plugin-chrome-ext。

新增 chrome-ext 外掛

vue add chrome-ext

記得這裡勾選 ts:

? Name of the Chrome Extension? todolist
? Description for the Chrome Extension? chrome extension
? Version for the Chrome Extension? 0.0.1
? javascript or typescript? 
  js 
❯ ts

出現了一個錯誤:

⠋  Running completion hooks...error: Require statement not part of import statement (@typescript-eslint/no-var-requires) at vue.config.js:1:27:
> 1 | const CopyWebpackPlugin = require("copy-webpack-plugin");
    |                           ^
  2 | const path = require("path");
  3 | 
  4 | // Generate pages object

這是因為 eslint 不允許 commonjs 的語法，考慮到 vue.config.js 是一個比較特殊的檔案，我們應該把它放到 .eslintignore 檔案中，讓 eslint 忽略它。

在 .eslintignore 中寫入:

vue.config.js

vue-cli-plugin-chrome-ext` 建立不是 SPA 應用，chrome 外掛有很多介面，所以是每一個介面分別編譯。

比如，src/popup是一個介面，src/options也是一個介面。

這樣，原先很多檔案都沒用了，我們可以把它們刪掉，分別是 src/main.ts、src/App.vue。

熱過載開發

使用 npm run build-watch 可以使用熱過載的方式進行開發。

執行後會生成一個 dist 資料夾，每次你更改程式碼都會重新編譯和載入一次。

將 dist 匯入到 chrome 外掛中
進入 chrome://extensions/，選擇和載入 dist 資料夾進來。

載入成功之後，記得去右上角管理介面開啟 popup 介面 ( 新版本 chrome )。

現在，程式碼打完之後就能立馬在 chrome 的 popup 檢視裡看到渲染結果。

使用 UI 元件

雖然 vue 是跑起來了，但是如果不能匯入元件，那也沒用。

以 ant design vue 為例，我門來測試一下。

npm i --save ant-design-vue

在 popup 介面匯入

在 src/popup/index.ts 中新增以下內容:

import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
Vue.use(Antd);

Vue.config.productionTip = false;

前面我們說過，src資料夾下面的每一個資料夾代表了一個頁面，每個頁面都有對應的 index.ts(相當於main.js)、index.html、App.vue。

也就是說，我們如果要使用UI庫，不是在一個全域性的 main.js 裡面配置一遍就好了，我們需要在每一個頁面的資料夾下的 index.ts 中都匯入。

這裡我們僅在 popup 介面下匯入了，如果你需要在 options 介面中也使用，則需要去 src/options/index.ts 下面一樣匯入一遍。

編寫一個簡單的 popup 介面

使用 ant design 的 card 元件來測試一下，是否可以使用。

介面的主要程式碼，應該寫在 App/App.vue 目錄中。

<template>
  <div class="main_app">
    <a-card title="ghost wang">
      coding
    </a-card>
  </div>
</template>

<script lang="ts">
export default {
  name: "app"
};
</script>

<style>
.main_app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  height: 500px;
  width: 300px;
  padding: 10px;
}
</style>

效果大概這樣子:

Chrome外掛開發教程