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可以包含任意你想要的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型別	除錯方式	圖片說明
injected script	直接普通的F12即可	懶得截圖
content-script	開啟Console,如圖切換
popup-js	popup頁面右鍵審查元素
background	外掛管理頁點選背景頁即可
devtools-js	暫未找到有效方法	-

訊息通訊

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

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

互相通訊概覽

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

通訊詳細介紹

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種方法可以實現二者通訊：

1. 可以通過window.postMessage和window.addEventListener來實現二者訊息通訊；
2. 通過自定義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>

效果大概這樣子:

更多好玩的待發現...