chrome擴(kuò)展開發(fā)入門教程

最近在開發(fā)chrome插件，看到一篇非常適合入門的教程，特記錄一下

注：轉(zhuǎn)載

本文首發(fā)于 http://liuxianan.com，原文地址：http://blog.liuxianan.com/chrome-plugin-develop.html，轉(zhuǎn)載請注明署名“l(fā)iuxianan”并在顯眼位置保留原文鏈接，謝謝！
author: liuxianan

以下是文章內(nèi)容

寫在前面

我花了將近一個(gè)多月的時(shí)間斷斷續(xù)續(xù)寫下這篇博文，并精心寫下完整demo，所以轉(zhuǎn)載務(wù)必保留 http://blog.liuxianan.com/chrome-plugin-develop.html 。本文所有涉及到的大部分代碼均在這個(gè)demo里面：https://github.com/liuxianan/chrome-plugin-demo ，大家可以直接下載下來運(yùn)行。

另外，本文圖片較多，請耐心等待加載完畢。

本文目錄：

image

demo部分截圖：

image

前言

什么是Chrome插件

嚴(yán)格來講，我們正在說的東西應(yīng)該叫Chrome擴(kuò)展(Chrome Extension)，真正意義上的Chrome插件是更底層的瀏覽器功能擴(kuò)展，可能需要對瀏覽器源碼有一定掌握才有能力去開發(fā)。鑒于Chrome插件的叫法已經(jīng)習(xí)慣，本文也全部采用這種叫法，但讀者需深知本文所描述的Chrome插件實(shí)際上指的是Chrome擴(kuò)展。

Chrome插件是一個(gè)用Web技術(shù)開發(fā)、用來增強(qiáng)瀏覽器功能的軟件，它其實(shí)就是一個(gè)由HTML、CSS、JS、圖片等資源組成的一個(gè).crx后綴的壓縮包.

個(gè)人猜測crx可能是Chrome Extension如下3個(gè)字母的簡寫：

image

另外，其實(shí)不只是前端技術(shù)，Chrome插件還可以配合C++編寫的dll動態(tài)鏈接庫實(shí)現(xiàn)一些更底層的功能(NPAPI)，比如全屏幕截圖。

360搶票王插件dll截圖

由于安全原因，Chrome瀏覽器42以上版本已經(jīng)陸續(xù)不再支持NPAPI插件，取而代之的是更安全的PPAPI。

學(xué)習(xí)Chrome插件開發(fā)有什么意義

增強(qiáng)瀏覽器功能，輕松實(shí)現(xiàn)屬于自己的“定制版”瀏覽器，等等。

Chrome插件提供了很多實(shí)用API供我們使用，包括但不限于：

書簽控制；
下載控制；
窗口控制；
標(biāo)簽控制；
網(wǎng)絡(luò)請求控制，各類事件監(jiān)聽；
自定義原生菜單；
完善的通信機(jī)制；
等等；

為什么是Chrome插件而不是Firefox插件

Chrome占有率更高，更多人用；
開發(fā)更簡單；
應(yīng)用場景更廣泛，F(xiàn)irefox插件只能運(yùn)行在Firefox上，而Chrome除了Chrome瀏覽器之外，還可以運(yùn)行在所有webkit內(nèi)核的國產(chǎn)瀏覽器，比如360極速瀏覽器、360安全瀏覽器、搜狗瀏覽器、QQ瀏覽器等等；
除此之外，F(xiàn)irefox瀏覽器也對Chrome插件的運(yùn)行提供了一定的支持；

開發(fā)與調(diào)試

Chrome插件沒有嚴(yán)格的項(xiàng)目結(jié)構(gòu)要求，只要保證本目錄有一個(gè)manifest.json即可，也不需要專門的IDE，普通的web開發(fā)工具即可。

從右上角菜單->更多工具->擴(kuò)展程序可以進(jìn)入插件管理頁面，也可以直接在地址欄輸入 chrome://extensions 訪問。

image

勾選開發(fā)者模式即可以文件夾的形式直接加載插件，否則只能安裝.crx格式的文件。Chrome要求插件必須從它的Chrome應(yīng)用商店安裝，其它任何網(wǎng)站下載的都無法直接安裝，所以，其實(shí)我們可以把crx文件解壓，然后通過開發(fā)者模式直接加載。

開發(fā)中，代碼有任何改動都必須重新加載插件，只需要在插件管理頁按下Ctrl+R即可，以防萬一最好還把頁面刷新一下。

核心介紹

manifest.json

這是一個(gè)Chrome插件最重要也是必不可少的文件，用來配置所有和插件相關(guān)的配置，必須放在根目錄。其中，manifest_version、name、version3個(gè)是必不可少的，description和icons是推薦的。

下面給出的是一些常見的配置項(xiàng)，均有中文注釋，完整的配置文檔請戳這里。

{
    // 清單文件的版本，這個(gè)必須寫，而且必須是2
    "manifest_version": 2,
    // 插件的名稱
    "name": "demo",
    // 插件的版本
    "version": "1.0.0",
    // 插件描述
    "description": "簡單的Chrome擴(kuò)展demo",
    // 圖標(biāo)，一般偷懶全部用一個(gè)尺寸的也沒問題
    "icons":
    {
        "16": "img/icon.png",
        "48": "img/icon.png",
        "128": "img/icon.png"
    },
    // 會一直常駐的后臺JS或后臺頁面
    "background":
    {
        // 2種指定方式，如果指定JS，那么會自動生成一個(gè)背景頁
        "page": "background.html"
        //"scripts": ["js/background.js"]
    },
    // 瀏覽器右上角圖標(biāo)設(shè)置，browser_action、page_action、app必須三選一
    "browser_action": 
    {
        "default_icon": "img/icon.png",
        // 圖標(biāo)懸停時(shí)的標(biāo)題，可選
        "default_title": "這是一個(gè)示例Chrome插件",
        "default_popup": "popup.html"
    },
    // 當(dāng)某些特定頁面打開才顯示的圖標(biāo)
    /*"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>"],
            // 多個(gè)JS按順序注入
            "js": ["js/jquery-1.8.3.js", "js/content-script.js"],
            // JS的注入可以隨便一點(diǎn)，但是CSS的注意就要千萬小心了，因?yàn)橐徊恍⌒木涂赡苡绊懭謽邮?            "css": ["css/custom.css"],
            // 代碼注入的時(shí)間，可選值： "document_start", "document_end", or "document_idle"，最后一個(gè)表示頁面空閑時(shí)，默認(rèn)document_idle
            "run_at": "document_start"
        },
        // 這里僅僅是為了演示content-script可以配置多個(gè)規(guī)則
        {
            "matches": ["*://*/*.png", "*://*/*.jpg", "*://*/*.gif", "*://*/*.bmp"],
            "js": ["js/show-image-content-size.js"]
        }
    ],
    // 權(quán)限申請
    "permissions":
    [
        "contextMenus", // 右鍵菜單
        "tabs", // 標(biāo)簽
        "notifications", // 通知
        "webRequest", // web請求
        "webRequestBlocking",
        "storage", // 插件本地存儲
        "http://*/*", // 可以通過executeScript或者insertCSS訪問的網(wǎng)站
        "https://*/*" // 可以通過executeScript或者insertCSS訪問的網(wǎng)站
    ],
    // 普通頁面能夠直接訪問的插件資源列表，如果不設(shè)置是無法直接訪問的
    "web_accessible_resources": ["js/inject.js"],
    // 插件主頁，這個(gè)很重要，不要浪費(fèi)了這個(gè)免費(fèi)廣告位
    "homepage_url": "https://www.baidu.com",
    // 覆蓋瀏覽器默認(rèn)頁面
    "chrome_url_overrides":
    {
        // 覆蓋瀏覽器默認(rèn)的新標(biāo)簽頁
        "newtab": "newtab.html"
    },
    // Chrome40以前的插件配置頁寫法
    "options_page": "options.html",
    // Chrome40以后的插件配置頁寫法，如果2個(gè)都寫，新版Chrome只認(rèn)后面這一個(gè)
    "options_ui":
    {
        "page": "options.html",
        // 添加一些默認(rèn)的樣式，推薦使用
        "chrome_style": true
    },
    // 向地址欄注冊一個(gè)關(guān)鍵字以提供搜索建議，只能設(shè)置一個(gè)關(guān)鍵字
    "omnibox": { "keyword" : "go" },
    // 默認(rèn)語言
    "default_locale": "zh_CN",
    // devtools頁面入口，注意只能指向一個(gè)HTML文件，不能是JS文件
    "devtools_page": "devtools.html"
}

content-scripts

所謂content-scripts，其實(shí)就是Chrome插件中向頁面注入腳本的一種形式（雖然名為script，其實(shí)還可以包括css的），借助content-scripts我們可以實(shí)現(xiàn)通過配置的方式輕松向指定頁面注入JS和CSS（如果需要動態(tài)注入，可以參考下文），最常見的比如：廣告屏蔽、頁面CSS定制，等等。

示例配置：

{
    // 需要直接注入頁面的JS
    "content_scripts": 
    [
        {
            //"matches": ["http://*/*", "https://*/*"],
            // "<all_urls>" 表示匹配所有地址
            "matches": ["<all_urls>"],
            // 多個(gè)JS按順序注入
            "js": ["js/jquery-1.8.3.js", "js/content-script.js"],
            // JS的注入可以隨便一點(diǎn)，但是CSS的注意就要千萬小心了，因?yàn)橐徊恍⌒木涂赡苡绊懭謽邮?            "css": ["css/custom.css"],
            // 代碼注入的時(shí)間，可選值： "document_start", "document_end", or "document_idle"，最后一個(gè)表示頁面空閑時(shí)，默認(rèn)document_idle
            "run_at": "document_start"
        }
    ],
}

特別注意，如果沒有主動指定run_at為document_start（默認(rèn)為document_idle），下面這種代碼是不會生效的：

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

content-scripts和原始頁面共享DOM，但是不共享JS，如要訪問頁面JS（例如某個(gè)JS變量），只能通過injected js來實(shí)現(xiàn)。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

其實(shí)看到這里不要悲觀，這些API絕大部分時(shí)候都夠用了，非要調(diào)用其它API的話，你還可以通過通信來實(shí)現(xiàn)讓background來幫你調(diào)用（關(guān)于通信，后文有詳細(xì)介紹）。

好了，Chrome插件給我們提供了這么強(qiáng)大的JS注入功能，剩下的就是發(fā)揮你的想象力去玩弄瀏覽器了。

background

后臺（姑且這么翻譯吧），是一個(gè)常駐的頁面，它的生命周期是插件中所有類型頁面中最長的，它隨著瀏覽器的打開而打開，隨著瀏覽器的關(guān)閉而關(guān)閉，所以通常把需要一直運(yùn)行的、啟動就運(yùn)行的、全局的代碼放在background里面。

background的權(quán)限非常高，幾乎可以調(diào)用所有的Chrome擴(kuò)展API（除了devtools），而且它可以無限制跨域，也就是可以跨域訪問任何網(wǎng)站而無需要求對方設(shè)置CORS。

經(jīng)過測試，其實(shí)不止是background，所有的直接通過chrome-extension://id/xx.html這種方式打開的網(wǎng)頁都可以無限制跨域。

配置中，background可以通過page指定一張網(wǎng)頁，也可以通過scripts直接指定一個(gè)JS，Chrome會自動為這個(gè)JS生成一個(gè)默認(rèn)的網(wǎng)頁：

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

需要特別說明的是，雖然你可以通過chrome-extension://xxx/background.html直接打開后臺頁，但是你打開的后臺頁和真正一直在后臺運(yùn)行的那個(gè)頁面不是同一個(gè)，換句話說，你可以打開無數(shù)個(gè)background.html，但是真正在后臺常駐的只有一個(gè)，而且這個(gè)你永遠(yuǎn)看不到它的界面，只能調(diào)試它的代碼。

event-pages

這里順帶介紹一下event-pages，它是一個(gè)什么東西呢？鑒于background生命周期太長，長時(shí)間掛載后臺可能會影響性能，所以Google又弄一個(gè)event-pages，在配置文件上，它與background的唯一區(qū)別就是多了一個(gè)persistent參數(shù)：

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

它的生命周期是：在被需要時(shí)加載，在空閑時(shí)被關(guān)閉，什么叫被需要時(shí)呢？比如第一次安裝、插件更新、有content-script向它發(fā)送消息，等等。

除了配置文件的變化，代碼上也有一些細(xì)微變化，個(gè)人這個(gè)簡單了解一下就行了，一般情況下background也不會很消耗性能的。

popup

popup是點(diǎn)擊browser_action或者page_action圖標(biāo)時(shí)打開的一個(gè)小窗口網(wǎng)頁，焦點(diǎn)離開網(wǎng)頁就立即關(guān)閉，一般用來做一些臨時(shí)性的交互。

博客園網(wǎng)摘插件popup效果

popup可以包含任意你想要的HTML內(nèi)容，并且會自適應(yīng)大小。可以通過default_popup字段來指定popup頁面，也可以調(diào)用setPopup()方法。

配置方式：

{
    "browser_action":
    {
        "default_icon": "img/icon.png",
        // 圖標(biāo)懸停時(shí)的標(biāo)題，可選
        "default_title": "這是一個(gè)示例Chrome插件",
        "default_popup": "popup.html"
    }
}

image

需要特別注意的是，由于單擊圖標(biāo)打開popup，焦點(diǎn)離開又立即關(guān)閉，所以popup頁面的生命周期一般很短，需要長時(shí)間運(yùn)行的代碼千萬不要寫在popup里面。

在權(quán)限上，它和background非常類似，它們之間最大的不同是生命周期的不同，popup中可以直接通過chrome.extension.getBackgroundPage()獲取background的window對象。

injected-script

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

這是因?yàn)?code>content-script有一個(gè)很大的“缺陷”，也就是無法訪問頁面中的JS，雖然它可以操作DOM，但是DOM卻不能調(diào)用它，也就是無法在DOM中通過綁定事件的方式調(diào)用content-script中的代碼（包括直接寫onclick和addEventListener2種方式都不行），但是，“在頁面上添加一個(gè)按鈕并調(diào)用插件的擴(kuò)展API”是一個(gè)很常見的需求，那該怎么辦呢？其實(shí)這就是本小節(jié)要講的。

在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()
    {
        // 放在頁面不好看，執(zhí)行完后移除掉
        this.parentNode.removeChild(this);
    };
    document.head.appendChild(temp);
}

你以為這樣就行了？執(zhí)行一下你會看到如下報(bào)錯(cuò)：

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中直接訪問插件中的資源的話必須顯示聲明才行，配置文件中增加如下：

{
    // 普通頁面能夠直接訪問的插件資源列表，如果不設(shè)置是無法直接訪問的
    "web_accessible_resources": ["js/inject.js"],
}

至于inject-script如何調(diào)用content-script中的代碼，后面我會在專門的一個(gè)消息通信章節(jié)詳細(xì)介紹。

homepage_url

開發(fā)者或者插件主頁設(shè)置，一般會在如下2個(gè)地方顯示：

image

Chrome插件的8種展示形式

browserAction(瀏覽器右上角)

通過配置browser_action可以在瀏覽器的右上角增加一個(gè)圖標(biāo)，一個(gè)browser_action可以擁有一個(gè)圖標(biāo)，一個(gè)tooltip，一個(gè)badge和一個(gè)popup。

示例配置如下：

"browser_action":
{
    "default_icon": "img/icon.png",
    "default_title": "這是一個(gè)示例Chrome插件",
    "default_popup": "popup.html"
}

圖標(biāo)

browser_action圖標(biāo)推薦使用寬高都為19像素的圖片，更大的圖標(biāo)會被縮小，格式隨意，一般推薦png，可以通過manifest中default_icon字段配置，也可以調(diào)用setIcon()方法。

tooltip

修改browser_action的manifest中default_title字段，或者調(diào)用setTitle()方法。

image

badge

所謂badge就是在圖標(biāo)上顯示一些文本，可以用來更新一些小的擴(kuò)展?fàn)顟B(tài)提示信息。因?yàn)閎adge空間有限，所以只支持4個(gè)以下的字符（英文4個(gè)，中文2個(gè)）。badge無法通過配置文件來指定，必須通過代碼實(shí)現(xiàn)，設(shè)置badge文字和顏色可以分別使用setBadgeText()和setBadgeBackgroundColor()。

chrome.browserAction.setBadgeText({text: 'new'});
chrome.browserAction.setBadgeBackgroundColor({color: [255, 0, 0, 255]});

效果：

image

pageAction(地址欄右側(cè))

所謂pageAction，指的是只有當(dāng)某些特定頁面打開才顯示的圖標(biāo)，它和browserAction最大的區(qū)別是一個(gè)始終都顯示，一個(gè)只在特定情況才顯示。

需要特別說明的是早些版本的Chrome是將pageAction放在地址欄的最右邊，左鍵單擊彈出popup，右鍵單擊則彈出相關(guān)默認(rèn)的選項(xiàng)菜單：

image

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

image

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

調(diào)整之后的pageAction我們可以簡單地把它看成是可以置灰的browserAction。

chrome.pageAction.show(tabId) 顯示圖標(biāo)；
chrome.pageAction.hide(tabId) 隱藏圖標(biāo)；

示例(只有打開百度才顯示圖標(biāo))：

// 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()]
            }
        ]);
    });
});

效果圖：

image

右鍵菜單

通過開發(fā)Chrome插件可以自定義瀏覽器的右鍵菜單，主要是通過chrome.contextMenusAPI實(shí)現(xiàn)，右鍵菜單可以出現(xiàn)在不同的上下文，比如普通頁面、選中的文字、圖片、鏈接，等等，如果有同一個(gè)插件里面定義了多個(gè)菜單，Chrome會自動組合放到以插件名字命名的二級菜單里，如下：

image

最簡單的右鍵菜單示例

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

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

效果：

image

添加右鍵百度搜索

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

// background.js
chrome.contextMenus.create({
    title: '使用度娘搜索：%s', // %s表示選中的文字
    contexts: ['selection'], // 只有當(dāng)選中文字時(shí)才會出現(xiàn)此右鍵菜單
    onclick: function(params)
    {
        // 注意不能使用location.href，因?yàn)閘ocation是屬于background的window對象
        chrome.tabs.create({url: 'https://www.baidu.com/s?ie=utf-8&wd=' + encodeURI(params.selectionText)});
    }
});

效果如下：

image

語法說明

這里只是簡單列舉一些常用的，完整API參見：https://developer.chrome.com/extensions/contextMenus

chrome.contextMenus.create({
    type: 'normal'， // 類型，可選：["normal", "checkbox", "radio", "separator"]，默認(rèn) normal
    title: '菜單的名字', // 顯示的文字，除非為“separator”類型否則此參數(shù)必需，如果類型為“selection”，可以使用%s顯示選定的文本
    contexts: ['page'], // 上下文環(huán)境，可選：["all", "page", "frame", "selection", "link", "editable", "image", "video", "audio"]，默認(rèn)page
    onclick: function(){}, // 單擊時(shí)觸發(fā)的方法
    parentId: 1, // 右鍵菜單項(xiàng)的父菜單項(xiàng)ID。指定父菜單項(xiàng)將會使此菜單項(xiàng)成為父菜單項(xiàng)的子菜單
    documentUrlPatterns: 'https://*.baidu.com/*' // 只在某些頁面顯示此右鍵菜單
});
// 刪除某一個(gè)菜單項(xiàng)
chrome.contextMenus.remove(menuItemId)；
// 刪除所有自定義右鍵菜單
chrome.contextMenus.removeAll();
// 更新某一個(gè)菜單項(xiàng)
chrome.contextMenus.update(menuItemId, updateProperties);

override(覆蓋特定頁面)

使用override頁可以將Chrome默認(rèn)的一些特定頁面替換掉，改為使用擴(kuò)展提供的頁面。

擴(kuò)展可以替代如下頁面：

歷史記錄：從工具菜單上點(diǎn)擊歷史記錄時(shí)訪問的頁面，或者從地址欄直接輸入 chrome://history
新標(biāo)簽頁：當(dāng)創(chuàng)建新標(biāo)簽的時(shí)候訪問的頁面，或者從地址欄直接輸入 chrome://newtab
書簽：瀏覽器的書簽，或者直接輸入 chrome://bookmarks

注意：

一個(gè)擴(kuò)展只能替代一個(gè)頁面；
不能替代隱身窗口的新標(biāo)簽頁；
網(wǎng)頁必須設(shè)置title，否則用戶可能會看到網(wǎng)頁的URL，造成困擾；

下面的截圖是默認(rèn)的新標(biāo)簽頁和被擴(kuò)展替換掉的新標(biāo)簽頁。

image

代碼（注意，一個(gè)插件只能替代一個(gè)默認(rèn)頁，以下僅為演示）：

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

devtools(開發(fā)者工具)

預(yù)熱

使用過vue的應(yīng)該見過這種類型的插件：

image

是的，Chrome允許插件在開發(fā)者工具(devtools)上動手腳，主要表現(xiàn)在：

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

先來看2張簡單的demo截圖，自定義面板（判斷當(dāng)前頁面是否使用了jQuery）：

image

自定義側(cè)邊欄（獲取當(dāng)前頁面所有圖片）：

image

devtools擴(kuò)展介紹

主頁：https://developer.chrome.com/extensions/devtools

來一張官方圖片：

image

每打開一個(gè)開發(fā)者工具窗口，都會創(chuàng)建devtools頁面的實(shí)例，F(xiàn)12窗口關(guān)閉，頁面也隨著關(guān)閉，所以devtools頁面的生命周期和devtools窗口是一致的。devtools頁面可以訪問一組特有的DevTools API以及有限的擴(kuò)展API，這組特有的DevTools API只有devtools頁面才可以訪問，background都無權(quán)訪問，這些API包括：

chrome.devtools.panels：面板相關(guān)；
chrome.devtools.inspectedWindow：獲取被審查窗口的有關(guān)信息；
chrome.devtools.network：獲取有關(guān)網(wǎng)絡(luò)請求的信息；

大部分?jǐn)U展API都無法直接被DevTools頁面調(diào)用，但它可以像content-script一樣直接調(diào)用chrome.extension和chrome.runtimeAPI，同時(shí)它也可以像content-script一樣使用Message交互的方式與background頁面進(jìn)行通信。

實(shí)例：創(chuàng)建一個(gè)devtools擴(kuò)展

首先，要針對開發(fā)者工具開發(fā)插件，需要在清單文件聲明如下：

{
    // 只能指向一個(gè)HTML文件，不能是JS文件
    "devtools_page": "devtools.html"
}

這個(gè)devtools.html里面一般什么都沒有，就引入一個(gè)js：

<!DOCTYPE html>
<html>
<head></head>
<body>
    <script type="text/javascript" src="js/devtools.js"></script>
</body>
</html>

可以看出來，其實(shí)真正代碼是devtools.js，html文件是“多余”的，所以這里覺得有點(diǎn)坑，devtools_page干嘛不允許直接指定JS呢？

再來看devtools.js的代碼：

// 創(chuàng)建自定義面板，同一個(gè)插件可以創(chuàng)建多個(gè)自定義面板
// 幾個(gè)參數(shù)依次為：panel標(biāo)題、圖標(biāo)（其實(shí)設(shè)置了也沒地方顯示）、要加載的頁面、加載成功后的回調(diào)
chrome.devtools.panels.create('MyPanel', 'img/icon.png', 'mypanel.html', function(panel)
{
    console.log('自定義面板創(chuàng)建成功！'); // 注意這個(gè)log一般看不到
});

// 創(chuàng)建自定義側(cè)邊欄
chrome.devtools.panels.elements.createSidebarPane("Images", function(sidebar)
{
    // sidebar.setPage('../sidebar.html'); // 指定加載某個(gè)頁面
    sidebar.setExpression('document.querySelectorAll("img")', 'All Images'); // 通過表達(dá)式來指定
    //sidebar.setObject({aaa: 111, bbb: 'Hello World!'}); // 直接設(shè)置顯示某個(gè)對象
});

setPage時(shí)的效果：

image

以下截圖示例的代碼：

image

// 檢測jQuery
document.getElementById('check_jquery').addEventListener('click', function()
{
    // 訪問被檢查的頁面DOM需要使用inspectedWindow
    // 簡單例子：檢測被檢查頁面是否使用了jQuery
    chrome.devtools.inspectedWindow.eval("jQuery.fn.jquery", function(result, isException)
    {
        var html = '';
        if (isException) html = '當(dāng)前頁面沒有使用jQuery。';
        else html = '當(dāng)前頁面使用了jQuery，版本為：'+result;
        alert(html);
    });
});

// 打開某個(gè)資源
document.getElementById('open_resource').addEventListener('click', function()
{
    chrome.devtools.inspectedWindow.eval("window.location.href", function(result, isException)
    {
        chrome.devtools.panels.openResource(result, 20, function()
        {
            console.log('資源打開成功！');
        });
    });
});

// 審查元素
document.getElementById('test_inspect').addEventListener('click', function()
{
    chrome.devtools.inspectedWindow.eval("inspect(document.images[0])", function(result, isException){});
});

// 獲取所有資源
document.getElementById('get_all_resources').addEventListener('click', function()
{
    chrome.devtools.inspectedWindow.getResources(function(resources)
    {
        alert(JSON.stringify(resources));
    });
});

調(diào)試技巧

修改了devtools頁面的代碼時(shí)，需要先在 chrome://extensions 頁面按下Ctrl+R重新加載插件，然后關(guān)閉再打開開發(fā)者工具即可，無需刷新頁面（而且只刷新頁面不刷新開發(fā)者工具的話是不會生效的）。

由于devtools本身就是開發(fā)者工具頁面，所以幾乎沒有方法可以直接調(diào)試它，直接用 chrome-extension://extid/devtools.html"的方式打開頁面肯定報(bào)錯(cuò)，因?yàn)椴恢С窒嚓P(guān)特殊API，只能先自己寫一些方法屏蔽這些錯(cuò)誤，調(diào)試通了再放開。

option(選項(xiàng)頁)

所謂options頁，就是插件的設(shè)置頁面，有2個(gè)入口，一個(gè)是右鍵圖標(biāo)有一個(gè)“選項(xiàng)”菜單，還有一個(gè)在插件管理頁面：

image

在Chrome40以前，options頁面和其它普通頁面沒什么區(qū)別，Chrome40以后則有了一些變化。

我們先看老版的options：

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

這個(gè)頁面里面的內(nèi)容就隨你自己發(fā)揮了，配置之后在插件管理頁就會看到一個(gè)選項(xiàng)按鈕入口，點(diǎn)進(jìn)去就是打開一個(gè)網(wǎng)頁，沒啥好講的。

效果:

image

再來看新版的optionsV2：

{
    "options_ui":
    {
        "page": "options.html",
        // 添加一些默認(rèn)的樣式，推薦使用
        "chrome_style": true
    },
}

options.html的代碼我們沒有任何改動，只是配置文件改了，之后效果如下：

image

看起來是不是高大上了？

幾點(diǎn)注意：

為了兼容，建議2種都寫，如果都寫了，Chrome40以后會默認(rèn)讀取新版的方式；
新版options中不能使用alert；
數(shù)據(jù)存儲建議用chrome.storage，因?yàn)闀S用戶自動同步；

omnibox

omnibox是向用戶提供搜索建議的一種方式。先來看個(gè)gif圖以便了解一下這東西到底是個(gè)什么鬼：

image

注冊某個(gè)關(guān)鍵字以觸發(fā)插件自己的搜索建議界面，然后可以任意發(fā)揮了。

首先，配置文件如下：

{
    // 向地址欄注冊一個(gè)關(guān)鍵字以提供搜索建議，只能設(shè)置一個(gè)關(guān)鍵字
    "omnibox": { "keyword" : "go" },
}

然后background.js中注冊監(jiān)聽事件：

// 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},
        ]);
    }
});

// 當(dāng)用戶接收關(guān)鍵字建議時(shí)觸發(fā)
chrome.omnibox.onInputEntered.addListener((text) => {
    console.log('inputEntered: ' + text);
    if(!text) return;
    var href = '';
    if(text.endsWith('美女'))  + text;
    else if(text.startsWith('百度搜索'))  + text.replace('百度搜索 ', '');
    else if(text.startsWith('谷歌搜索'))  + text.replace('谷歌搜索 ', '');
    else  + text;
    openUrlCurrentTab(href);
});
// 獲取當(dāng)前選項(xiàng)卡ID
function getCurrentTabId(callback)
{
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs)
    {
        if(callback) callback(tabs.length ? tabs[0].id: null);
    });
}

// 當(dāng)前標(biāo)簽打開某個(gè)鏈接
function openUrlCurrentTab(url)
{
    getCurrentTabId(tabId => {
        chrome.tabs.update(tabId, {url: url});
    })
}

桌面通知

Chrome提供了一個(gè)chrome.notificationsAPI以便插件推送桌面通知，暫未找到chrome.notifications和HTML5自帶的Notification的顯著區(qū)別及優(yōu)勢。

在后臺JS中，無論是使用chrome.notifications還是Notification都不需要申請權(quán)限（HTML5方式需要申請權(quán)限），直接使用即可。

最簡單的通知：

image

代碼：

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

通知的樣式可以很豐富：

image

這個(gè)沒有深入研究，有需要的可以去看官方文檔。

5種類型的JS對比

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

權(quán)限對比

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

調(diào)試方式對比

| JS類型 | 調(diào)試方式 | 圖片說明 |
| ------------ | ------------ |
| injected script | 直接普通的F12即可 | 懶得截圖 |

| content-script | 打開Console,如圖切換 |

image

|
| popup-js | popup頁面右鍵審查元素 |

image

| background | 插件管理頁點(diǎn)擊背景頁即可 |

image

消息通信

通信主頁：https://developer.chrome.com/extensions/messaging

前面我們介紹了Chrome插件中存在的5種JS，那么它們之間如何互相通信呢？下面先來系統(tǒng)概況一下，然后再分類細(xì)說。需要知道的是，popup和background其實(shí)幾乎可以視為一種東西，因?yàn)樗鼈兛稍L問的API都一樣、通信機(jī)制一樣、都可以跨域。

互相通信概覽

注：-表示不存在或者無意義，或者待驗(yàn)證。

	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

通信詳細(xì)介紹

popup和background

popup可以直接調(diào)用background中的JS方法，也可以直接訪問background的DOM：

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

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

小插曲，今天碰到一個(gè)情況，發(fā)現(xiàn)popup無法獲取background的任何方法，找了半天才發(fā)現(xiàn)是因?yàn)閎ackground的js報(bào)錯(cuò)了，而你如果不主動查看background的js的話，是看不到錯(cuò)誤信息的，特此提醒。

至于background訪問popup如下（前提是popup已經(jīng)打開）：

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

popup或者bg向content主動發(fā)送消息

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的回復(fù)：'+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('我收到了你的消息！');
});

雙方通信直接發(fā)送的都是JSON對象，不是JSON字符串，所以無需解析，很方便（當(dāng)然也可以直接發(fā)送字符串）。

網(wǎng)上有些老代碼中用的是chrome.extension.onMessage，沒有完全查清二者的區(qū)別(貌似是別名)，但是建議統(tǒng)一使用chrome.runtime.onMessage。

content-script主動發(fā)消息給后臺

content-script.js：

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

background.js 或者 popup.js：

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

注意事項(xiàng)：

content_scripts向popup主動發(fā)消息的前提是popup必須打開！否則需要利用background作中轉(zhuǎn)；
如果background和popup同時(shí)監(jiān)聽，那么它們都可以同時(shí)收到消息，但是只有一個(gè)可以sendResponse，一個(gè)先發(fā)送了，那么另外一個(gè)再發(fā)送就無效；

injected script和content-script

content-script和頁面內(nèi)的腳本（injected-script自然也屬于頁面內(nèi)的腳本）之間唯一共享的東西就是頁面的DOM元素，有2種方法可以實(shí)現(xiàn)二者通訊：

可以通過window.postMessage和window.addEventListener來實(shí)現(xiàn)二者消息通訊；
通過自定義DOM事件來實(shí)現(xiàn)；

第一種方法（推薦）：

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);
});

長連接和短連接

其實(shí)上面已經(jīng)涉及到了，這里再單獨(dú)說明一下。Chrome插件中有2種通信方式，一個(gè)是短連接（chrome.tabs.sendMessage和chrome.runtime.sendMessage），一個(gè)是長連接（chrome.tabs.connect和chrome.runtime.connect）。

短連接的話就是擠牙膏一樣，我發(fā)送一下，你收到了再回復(fù)一下，如果對方不回復(fù)，你只能重新發(fā)，而長連接類似WebSocket會一直建立連接，雙方可以隨時(shí)互發(fā)消息。

短連接上面已經(jīng)有代碼示例了，這里只講一下長連接。

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：

// 監(jiān)聽長連接
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: '我是你爸！'});
        });
    }
});

其它補(bǔ)充

動態(tài)注入或執(zhí)行JS

雖然在background和popup中無法直接訪問頁面DOM，但是可以通過chrome.tabs.executeScript來執(zhí)行腳本，從而實(shí)現(xiàn)訪問web頁面的DOM（注意，這種方式也不能直接訪問頁面JS）。

示例manifest.json配置：

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

JS：

// 動態(tài)執(zhí)行JS代碼
chrome.tabs.executeScript(tabId, {code: 'document.body.style.backgroundColor="red"'});
// 動態(tài)執(zhí)行JS文件
chrome.tabs.executeScript(tabId, {file: 'some-script.js'});

動態(tài)注入CSS

示例manifest.json配置：

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

JS代碼：

// 動態(tài)執(zhí)行CSS代碼，TODO，這里有待驗(yàn)證
chrome.tabs.insertCSS(tabId, {code: 'xxx'});
// 動態(tài)執(zhí)行CSS文件
chrome.tabs.insertCSS(tabId, {file: 'some-style.css'});

獲取當(dāng)前窗口ID

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

獲取當(dāng)前標(biāo)簽頁ID

一般有2種方法：

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

獲取當(dāng)前選項(xiàng)卡id的另一種方法，大部分時(shí)候都類似，只有少部分時(shí)候會不一樣（例如當(dāng)窗口最小化時(shí)）

// 獲取當(dāng)前選項(xiàng)卡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，區(qū)別有好幾點(diǎn)，個(gè)人認(rèn)為最重要的2點(diǎn)區(qū)別是：

chrome.storage是針對插件全局的，即使你在background中保存的數(shù)據(jù)，在content-script也能獲取到；
chrome.storage.sync可以跟隨當(dāng)前登錄用戶自動同步，這臺電腦修改的設(shè)置會自動同步到其它電腦，很方便，如果沒有登錄或者未聯(lián)網(wǎng)則先保存到本地，等登錄了再同步至網(wǎng)絡(luò)；

需要聲明storage權(quán)限，有chrome.storage.sync和chrome.storage.local2種方式可供選擇，使用示例如下：

// 讀取數(shù)據(jù)，第一個(gè)參數(shù)是指定要讀取的key以及設(shè)置默認(rèn)值
chrome.storage.sync.get({color: 'red', age: 18}, function(items) {
    console.log(items.color, items.age);
});
// 保存數(shù)據(jù)
chrome.storage.sync.set({color: 'blue'}, function() {
    console.log('保存成功！');
});

webRequest

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

//manifest.json
{
    // 權(quán)限申請
    "permissions":
    [
        "webRequest", // web請求
        "webRequestBlocking", // 阻塞式web請求
        "storage", // 插件本地存儲
        "http://*/*", // 可以通過executeScript或者insertCSS訪問的網(wǎng)站
        "https://*/*" // 可以通過executeScript或者insertCSS訪問的網(wǎng)站
    ],
}


// background.js
// 是否顯示圖片
var showImage;
chrome.storage.sync.get({showImage: true}, function(items) {
    showImage = items.showImage;
});
// web請求監(jiān)聽，最后一個(gè)參數(shù)表示阻塞式，需單獨(dú)聲明權(quán)限：webRequestBlocking
chrome.webRequest.onBeforeRequest.addListener(details => {
    // cancel 表示取消本次請求
    if(!showImage && details.type == 'image') return {cancel: true};
    // 簡單的音視頻檢測
    // 大部分網(wǎng)站視頻的type并不是media，且視頻做了防下載處理，所以這里僅僅是為了演示效果，無實(shí)際意義
    if(details.type == 'media') {
        chrome.notifications.create(null, {
            type: 'basic',
            iconUrl: 'img/icon.png',
            title: '檢測到音視頻',
            message: '音視頻地址：' + details.url,
        });
    }
}, {urls: ["<all_urls>"]}, ["blocking"]);

國際化

插件根目錄新建一個(gè)名為_locales的文件夾，再在下面新建一些語言的文件夾，如en、zh_CN、zh_TW，然后再在每個(gè)文件夾放入一個(gè)messages.json，同時(shí)必須在清單文件中設(shè)置default_locale。

_locales\en\messages.json內(nèi)容：

{
    "pluginDesc": {"message": "A simple chrome extension demo"},
    "helloWorld": {"message": "Hello World!"}
}

_locales\zh_CN\messages.json內(nèi)容：

{
    "pluginDesc": {"message": "一個(gè)簡單的Chrome插件demo"},
    "helloWorld": {"message": "你好啊，世界！"}
}

在manifest.json和CSS文件中通過__MSG_messagename__引入，如：

{
    "description": "__MSG_pluginDesc__",
    // 默認(rèn)語言
    "default_locale": "zh_CN",
}

JS中則直接chrome.i18n.getMessage("helloWorld")。

測試時(shí)，通過給chrome建立一個(gè)不同的快捷方式chrome.exe --lang=en來切換語言，如：

image

英文效果：

image

中文效果：

image

API總結(jié)

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

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

經(jīng)驗(yàn)總結(jié)

查看已安裝插件路徑

已安裝的插件源碼路徑：C:\Users\用戶名\AppData\Local\Google\Chrome\User Data\Default\Extensions，每一個(gè)插件被放在以插件ID為名的文件夾里面，想要學(xué)習(xí)某個(gè)插件的某個(gè)功能是如何實(shí)現(xiàn)的，看人家的源碼是最好的方法了：

image

如何查看某個(gè)插件的ID？進(jìn)入 chrome://extensions ，然后勾線開發(fā)者模式即可看到了。

image

特別注意background的報(bào)錯(cuò)

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

如何讓popup頁面不關(guān)閉

在對popup頁面審查元素的時(shí)候popup會被強(qiáng)制打開無法關(guān)閉，只有控制臺關(guān)閉了才可以關(guān)閉popup，原因很簡單：如果popup關(guān)閉了控制臺就沒用了。這種方法在某些情況下很實(shí)用！

不支持內(nèi)聯(lián)JavaScript的執(zhí)行

也就是不支持將js直接寫在html中，比如：

<input id="btn" type="button" value="收藏" onclick="test()"/>

報(bào)錯(cuò)如下：

Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'self' blob: filesystem: chrome-extension-resource:". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution.

解決方法就是用JS綁定事件：

$('#btn').on('click', function(){alert('測試')});

另外，對于A標(biāo)簽，這樣寫href="javascript:;"然后用JS綁定事件雖然控制臺會報(bào)錯(cuò)，但是不受影響，當(dāng)然強(qiáng)迫癥患者受不了的話只能寫成href="#"了。

如果這樣寫：

<a href="javascript:;" id="get_secret">請求secret</a>

報(bào)錯(cuò)如下：

Refused to execute JavaScript URL because it violates the following Content Security Policy directive: "script-src 'self' blob: filesystem: chrome-extension-resource:". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution.

注入CSS的時(shí)候必須小心

由于通過content_scripts注入的CSS優(yōu)先級非常高，幾乎僅次于瀏覽器默認(rèn)樣式，稍不注意可能就會影響一些網(wǎng)站的展示效果，所以盡量不要寫一些影響全局的樣式。

之所以強(qiáng)調(diào)這個(gè)，是因?yàn)檫@個(gè)帶來的問題非常隱蔽，不太容易找到，可能你正在寫某個(gè)網(wǎng)頁，昨天樣式還是好好的，怎么今天就突然不行了？然后你辛辛苦苦找來找去，找了半天才發(fā)現(xiàn)竟然是因?yàn)椴寮锩娴囊粋€(gè)樣式影響的！

image

打包與發(fā)布

打包的話直接在插件管理頁有一個(gè)打包按鈕：

image

然后會生成一個(gè).crx文件，要發(fā)布到Google應(yīng)用商店的話需要先登錄你的Google賬號，然后花5個(gè)$注冊為開發(fā)者，本人太窮，就懶得親自驗(yàn)證了，有發(fā)布需求的自己去整吧。

image

參考

官方資料

推薦查看官方文檔，雖然是英文，但是全且新，國內(nèi)的中文資料都比較舊（注意以下全部需要翻墻）：

Chrome插件官方文檔主頁
Chrome插件官方示例
manifest清單文件
permissions權(quán)限
chrome.xxx.api文檔
模糊匹配規(guī)則語法詳解

第三方資料

部分中文資料，不是特別推薦：

360安全瀏覽器開發(fā)文檔
360極速瀏覽器Chrome擴(kuò)展開發(fā)文檔
Chrome擴(kuò)展開發(fā)極客系列博客

附圖

附圖：Chrome高清png格式logo：

image

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

【轉(zhuǎn)】chrome擴(kuò)展開發(fā)入門

chrome擴(kuò)展開發(fā)入門教程

注：轉(zhuǎn)載

寫在前面

前言

什么是Chrome插件

學(xué)習(xí)Chrome插件開發(fā)有什么意義

為什么是Chrome插件而不是Firefox插件

開發(fā)與調(diào)試

核心介紹

manifest.json

content-scripts

background

event-pages

popup

injected-script

homepage_url

Chrome插件的8種展示形式

browserAction(瀏覽器右上角)

圖標(biāo)

tooltip

badge

pageAction(地址欄右側(cè))

右鍵菜單

最簡單的右鍵菜單示例

添加右鍵百度搜索

語法說明

override(覆蓋特定頁面)

devtools(開發(fā)者工具)

預(yù)熱

devtools擴(kuò)展介紹

實(shí)例：創(chuàng)建一個(gè)devtools擴(kuò)展

調(diào)試技巧

option(選項(xiàng)頁)

omnibox

桌面通知

5種類型的JS對比

權(quán)限對比

調(diào)試方式對比

消息通信

互相通信概覽

通信詳細(xì)介紹

popup和background

popup或者bg向content主動發(fā)送消息

content-script主動發(fā)消息給后臺

injected script和content-script

長連接和短連接

其它補(bǔ)充

動態(tài)注入或執(zhí)行JS

動態(tài)注入CSS

獲取當(dāng)前窗口ID

獲取當(dāng)前標(biāo)簽頁ID

本地存儲

webRequest

國際化

API總結(jié)

經(jīng)驗(yàn)總結(jié)

查看已安裝插件路徑

特別注意background的報(bào)錯(cuò)

如何讓popup頁面不關(guān)閉

不支持內(nèi)聯(lián)JavaScript的執(zhí)行

注入CSS的時(shí)候必須小心

打包與發(fā)布

參考

官方資料

第三方資料

附圖

推薦閱讀更多精彩內(nèi)容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频