摘要：從右上角菜單更多工具擴(kuò)展程序可以進(jìn)入插件管理頁(yè)面，也可以直接在地址欄輸入訪問(wèn)。其中，個(gè)是必不可少的，和是推薦的。

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

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

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

網(wǎng)上介紹chrome插件開(kāi)發(fā)的文章已經(jīng)很多了，這里就不贅述了，只列一些項(xiàng)目中需要的

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

下面給出的是一些常見(jiàn)的配置項(xiàng)，均有中文注釋

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

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

示例配置：

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

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

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

content-scripts和原始頁(yè)面共享DOM，但是不共享JS，如要訪問(wèn)頁(yè)面JS（例如某個(gè)JS變量），只能通過(guò)`injected
js來(lái)實(shí)現(xiàn)。content-scripts不能訪問(wèn)絕大部分chrome.xxx.api`，除了下面這4種：

chrome.extension(getURL , inIncognitoContext , lastError , onRequest , sendRequest)

chrome.i18n

chrome.runtime(connect , getManifest , getURL , id , onConnect , onMessage , sendMessage)

chrome.storage

由于content-script可以注入到頁(yè)面，所以我們將要開(kāi)發(fā)的插件的主要功能就在這里

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

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

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

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

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

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

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

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

我們要開(kāi)發(fā)的插件目前用到了background和content_scripts這兩個(gè)選項(xiàng)，如果以后添加新功能時(shí)再看看其他的選項(xiàng)，對(duì)chrome插件開(kāi)發(fā)感興趣的同學(xué)可以看看這本書