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

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

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

　　

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

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

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

　　{

// 清單文件的版本，這個(gè)必須寫(xiě)，而且必須是2

"manifest_version": 2,

// 插件的名稱(chēng)

"name": "demo",

// 插件的版本

"version": "1.0.0",

// 插件描述

"description": "簡(jiǎn)單的Chrome擴展demo",

// 圖標，一般偷懶全部用一個(gè)尺寸的也沒(méi)問(wèn)題

"icons":

{

"16": "img/icon.png",

"48": "img/icon.png",

"128": "img/icon.png"

},

// 會(huì )一直常駐的后臺JS或后臺頁(yè)面

"background":

{

// 2種指定方式，如果指定JS，那么會(huì )自動(dòng)生成一個(gè)背景頁(yè)

"page": "background.html"

//"scripts": ["js/background.js"]

},

// 瀏覽器右上角圖標設置，browser_action、page_action、app必須三選一

"browser_action":

{

"default_icon": "img/icon.png",

// 圖標懸停時(shí)的標題，可選

"default_title": "這是一個(gè)示例Chrome插件",

"default_popup": "popup.html"

},

// 當某些特定頁(yè)面打開(kāi)才顯示的圖標

/*"page_action":

{

"default_icon": "img/icon.png",

"default_title": "我是pageAction",

"default_popup": "popup.html"

},*/

// 需要直接注入頁(yè)面的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的注意就要千萬(wàn)小心了，因為一不小心就可能影響全局樣式

"css": ["css/custom.css"],

// 代碼注入的時(shí)間，可選值： "document_start", "document_end", or "document_idle"，最后一個(gè)表示頁(yè)面空閑時(shí)，默認document_idle

"run_at": "document_start"

},

// 這里僅僅是為了演示content-script可以配置多個(gè)規則

{

"matches": ["*://*/*.png", "*://*/*.jpg", "*://*/*.gif", "*://*/*.bmp"],

"js": ["js/show-image-content-size.js"]

}

],

// 權限申請

"permissions":

[

"contextMenus", // 右鍵菜單

"tabs", // 標簽

"notifications", // 通知

"webRequest", // web請求

"webRequestBlocking",

"storage", // 插件本地存儲

"http://*/*", // 可以通過(guò)executeScript或者insertCSS訪(fǎng)問(wèn)的網(wǎng)站

"https://*/*" // 可以通過(guò)executeScript或者insertCSS訪(fǎng)問(wèn)的網(wǎng)站

],

// 普通頁(yè)面能夠直接訪(fǎng)問(wèn)的插件資源列表，如果不設置是無(wú)法直接訪(fǎng)問(wèn)的

"web_accessible_resources": ["js/inject.js"],

// 插件主頁(yè)，這個(gè)很重要，不要浪費了這個(gè)免費廣告位

"homepage_url": "https://www.baidu.com",

// 覆蓋瀏覽器默認頁(yè)面

"chrome_url_overrides":

{

// 覆蓋瀏覽器默認的新標簽頁(yè)

"newtab": "newtab.html"

},

// Chrome40以前的插件配置頁(yè)寫(xiě)法

"options_page": "options.html",

// Chrome40以后的插件配置頁(yè)寫(xiě)法，如果2個(gè)都寫(xiě)，新版Chrome只認后面這一個(gè)

"options_ui":

{

"page": "options.html",

// 添加一些默認的樣式，推薦使用

"chrome_style": true

},

// 向地址欄注冊一個(gè)關(guān)鍵字以提供搜索建議，只能設置一個(gè)關(guān)鍵字

"omnibox": { "keyword" : "go" },

// 默認語(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í)現通過(guò)配置的形式輕松向指定頁(yè)面注入JS和CSS（如果須要動(dòng)態(tài)注入，可以參考下文），最常見(jiàn)的例如：廣告屏蔽、頁(yè)面CSS訂制，等等。

　　示例配置：

　　{

// 需要直接注入頁(yè)面的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的注意就要千萬(wàn)小心了，因為一不小心就可能影響全局樣式

"css": ["css/custom.css"],

// 代碼注入的時(shí)間，可選值： "document_start", "document_end", or "document_idle"，最后一個(gè)表示頁(yè)面空閑時(shí)，默認document_idle

"run_at": "document_start"

}

],

}

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

　　document.addEventListener('DOMContentLoaded', function()

{

console.log('我被執行了！');

});

　　content-scripts和原始頁(yè)面共享DOM，但是不共享JS，如要訪(fǎng)問(wèn)頁(yè)面JS（例如某個(gè)JS變量），只能通過(guò)`injected

　　js來(lái)實(shí)現。content-scripts不能訪(fǎng)問(wèn)絕大部分chrome.xxx.api`，除了下邊這4種：

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

　　后臺（姑且如此翻譯吧）爬蟲(chóng)軟件增加網(wǎng)頁(yè)訪(fǎng)問(wèn)，是一個(gè)常駐的頁(yè)面，它的生命周期是插件中所有類(lèi)型頁(yè)面中最長(cháng)的，它隨著(zhù)瀏覽器的打開(kāi)而打開(kāi)，隨著(zhù)瀏覽器的關(guān)掉而關(guān)掉，所以一般把須要仍然運行

　　的、啟動(dòng)就運行的、全局的代碼放到background上面。

　　background的權限十分高，幾乎可以調用所有的Chrome擴充API（除了devtools），而且它可以無(wú)限制跨域，也就是可以跨域訪(fǎng)問(wèn)任何網(wǎng)站而無(wú)需要

　　求對方設置CORS。

　　經(jīng)過(guò)測試，其實(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è)默認的網(wǎng)頁(yè)：

　　{

// 會(huì )一直常駐的后臺JS或后臺頁(yè)面

"background":

{

// 2種指定方式，如果指定JS，那么會(huì )自動(dòng)生成一個(gè)背景頁(yè)

"page": "background.html"

//"scripts": ["js/background.js"]

},

}

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

　　{

"background":

{

"scripts": ["event-page.js"],

"persistent": false

},

}

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

　　我們要開(kāi)發(fā)的插件目前用到了background和content_scripts這兩個(gè)選項，如果之后添加新功能時(shí)再瞧瞧其他的選項爬蟲(chóng)軟件增加網(wǎng)頁(yè)訪(fǎng)問(wèn)，對chrome插件開(kāi)發(fā)感興趣的朋友可以瞧瞧這本書(shū)