本文首發(fā)于 http://liuxianan.com，原文地址：http://blog.liuxianan.com/chrome-plugin-develop.html
什么是chrome插件
嚴(yán)格來(lái)講，我們正在說(shuō)的東西應(yīng)該叫Chrome擴(kuò)展(Chrome Extension)，真正意義上的Chrome插件是更底層的瀏覽器功能擴(kuò)展，可能需要對(duì)瀏覽器源碼有一定掌握才有能力去開(kāi)發(fā)。鑒于Chrome插件的叫法已經(jīng)習(xí)慣，本文也全部采用這種叫法，但讀者需深知本文所描述的Chrome插件實(shí)際上指的是Chrome擴(kuò)展。
Chrome插件是一個(gè)用Web技術(shù)開(kāi)發(fā)、用來(lái)增強(qiáng)瀏覽器功能的軟件，它其實(shí)就是一個(gè)由HTML、CSS、JS、圖片等資源組成的一個(gè).crx后綴的壓縮包.
為什么是Chrome插件而不是Firefox插件
- Chrome占有率更高，更多人用；
- 開(kāi)發(fā)更簡(jiǎn)單；
- 應(yīng)用場(chǎng)景更廣泛，F(xiàn)irefox插件只能運(yùn)行在Firefox上，而Chrome除了Chrome瀏覽器之外，還可以運(yùn)行在所有webkit內(nèi)核的國(guó)產(chǎn)瀏覽器，比如360極速瀏覽器、360安全瀏覽器、搜狗瀏覽器、QQ瀏覽器等等；
- 除此之外，F(xiàn)irefox瀏覽器也對(duì)Chrome插件的運(yùn)行提供了一定的支持；
核心介紹
manifest.json
這是一個(gè)Chrome插件最重要也是必不可少的文件，用來(lái)配置所有和插件相關(guān)的配置，必須放在根目錄。其中，manifest_version、name、version3個(gè)是必不可少的，description和icons是推薦
{
// 清單文件的版本，這個(gè)必須寫(xiě)，而且必須是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://*/*"],
// "<all_urls>" 表示匹配所有地址
"matches": ["<all_urls>"],
// 多個(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"]
}
],
}
content-scripts
所謂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定制，等等。
background
后臺(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。
popup
popup是點(diǎn)擊browser_action或者page_action圖標(biāo)時(shí)打開(kāi)的一個(gè)小窗口網(wǎng)頁(yè)，焦點(diǎn)離開(kāi)網(wǎng)頁(yè)就立即關(guān)閉，一般用來(lái)做一些臨時(shí)性的交互。
popup可以包含任意你想要的HTML內(nèi)容，并且會(huì)自適應(yīng)大小?？梢酝╠efault_popup字段來(lái)指popup頁(yè)面，也可以調(diào)用setPopup()方法。
