最近看到公司同事經(jīng)常寫chrome擴(kuò)展，來(lái)提高生成效率，回想想自己以前也寫過(guò)chrome擴(kuò)展，但是由于不經(jīng)常寫，也沒(méi)做積累也都忘記了，現(xiàn)在重新回顧一下。

一、chrome擴(kuò)展基本概念

　　chrome擴(kuò)展應(yīng)用其實(shí)是壓縮在一起的一組文件，包括HTML，CSS，Javascript腳本，圖片文件，還有其它任何需要的文件。 應(yīng)用（擴(kuò)展）本質(zhì)上來(lái)說(shuō)就是web頁(yè)面，它們可以使用所有的瀏覽器提供的API，從XMLHttpRequest到JSON到HTML5全都有。

　　應(yīng)用（擴(kuò)展）可以與Web頁(yè)面交互，或者通過(guò)content script或cross-origin XMLHttpRequests與服務(wù)器交互。應(yīng)用（擴(kuò)展）還可以訪問(wèn)瀏覽器提供的內(nèi)部功能，例如標(biāo)簽或書簽等。

　　應(yīng)用（擴(kuò)展）的界面：

　　很多應(yīng)用（不包括WebApp）會(huì)以browser action或page action的形式在瀏覽器界面上展現(xiàn)出來(lái)。每個(gè)應(yīng)用（擴(kuò)展）最多可以有一個(gè)browser action或page action。當(dāng)應(yīng)用（擴(kuò)展）的圖標(biāo)是否顯示出來(lái)是取決于單個(gè)的頁(yè)面時(shí)，應(yīng)當(dāng)選擇page action；當(dāng)其它情況時(shí)可以選擇browser action。

　　比較全的

?

//這個(gè)json是用來(lái)給chrome讀取的，json左右兩邊都要加"" {"app": {"background": {"scripts": ["background.js"]}},"manifest_version": 2,"name": "My Extension","version": "versionString","default_locale": "en","description": "A plain text description","icons": {"16": "images/icon16.png","48": "images/icon48.png","128": "images/icon128.png"},"browser_action": {"default_icon": {"19": "images/icon19.png","38": "images/icon38.png"},"default_title": "Extension Title","default_popup": "popup.html"},"page_action": {"default_icon": {"19": "images/icon19.png","38": "images/icon38.png"},"default_title": "Extension Title","default_popup": "popup.html"},//需要數(shù)據(jù)保存程序中，如果當(dāng)前用戶關(guān)閉popup，就需要Background Pages來(lái)進(jìn)行相應(yīng)的操作"background": {"scripts": ["background.js"]},//需要和網(wǎng)頁(yè)交互，那么他就需要一個(gè)內(nèi)容腳本(Content scripts)，內(nèi)容腳本常由JavaScript編寫，會(huì)在網(wǎng)頁(yè)載入完成后調(diào)用"content_scripts": [{"matches": ["http://www.google.com/*"],"css": ["mystyles.css"],"js": ["jquery.js", "myscript.js"]}],
　　//選項(xiàng)頁(yè)面"options_page": "options.html",//跨域權(quán)限許可，權(quán)限"permissions": ["*://www.google.com/*"],//web可訪問(wèn)資源"web_accessible_resources": ["images/*.png"] }

?

?

?

二、chrome擴(kuò)展開(kāi)發(fā)需要掌握的基礎(chǔ)知識(shí)

　　1、Chrome擴(kuò)展文件

　　　　Chrome擴(kuò)展文件以.crx為后綴名，在Google Chrome擴(kuò)展官方網(wǎng)站下載擴(kuò)展時(shí)，Chrome會(huì)將.crx文件下載到Chrome的Application Data文件夾的User Data\Temp下，一般是C:\Documents and Settings\User\Local Settings\Application Data\Google\Chrome\User Data\Temp，安裝完成或者取消安裝，該文件就會(huì)被刪除。.crx實(shí)際上是一個(gè)壓縮文件，使用解壓文件打開(kāi)這個(gè)文件就可以看到其中的文件目錄：

　　因此可以認(rèn)為，我們實(shí)際上就是寫一個(gè)Web應(yīng)用，然后將按照Chrome的規(guī)定將一個(gè)快捷方式放在Chrome工具欄上。

　　2、Browser Actions（擴(kuò)展圖標(biāo)）

　　把Browser Actions翻譯成擴(kuò)展圖標(biāo)不是很準(zhǔn)確，但它的功能就是把你的應(yīng)用顯示在Chrome工具欄上。我們?cè)谏厦婵吹揭粋€(gè)文件manifest.json，就是使用這個(gè)文件來(lái)把相應(yīng)的圖標(biāo)和其他參數(shù)注冊(cè)到Browser Actions。比如下圖中就是EverNote的擴(kuò)展圖標(biāo)。

　　3.Page Actions（地址欄圖標(biāo)）

　　如果你熟悉一些Chrome插件的話，你一定會(huì)發(fā)現(xiàn)有些擴(kuò)展的圖標(biāo)不是顯示在地址欄的右邊，而是顯示在地址內(nèi)部右方，這就是Page Actions地址欄圖標(biāo)。

　　

　　可以看出上面中有三個(gè)Page Actions，圖中我標(biāo)出的是Chrome添加書簽，現(xiàn)在你就會(huì)發(fā)現(xiàn)其實(shí)這個(gè)也是Chrome的擴(kuò)展，只不是它是直接內(nèi)置在Chrome的。

　　Page Actions與Browser Actions的區(qū)別就是Page Actions不是隨時(shí)都是顯示的，必須在特定的頁(yè)面中這個(gè)功能才能使用。因此在開(kāi)發(fā)中注意：如果不是全部頁(yè)面中都能使用的功能請(qǐng)使用Page Actions方式

　　4、popup彈出窗口

　　popup屬于Browser Actions，當(dāng)點(diǎn)擊圖標(biāo)時(shí)出現(xiàn)這個(gè)窗口，可以在里面放置任何html元素，它的寬度是自適應(yīng)的。當(dāng)然，這個(gè)彈出窗口不會(huì)被Chrome攔截的:)

　　如下圖中是evernote的popup窗口：

　　

　　

　　5、Background Pages后臺(tái)頁(yè)面

　　這個(gè)窗口不會(huì)顯示，它是擴(kuò)展程序的后臺(tái)服務(wù)，它會(huì)一直保持運(yùn)行。比如在一些需要數(shù)據(jù)保存程序中，如果當(dāng)前用戶關(guān)閉popup，就需要Background Pages來(lái)進(jìn)行相應(yīng)的操作。

　　6、chrome擴(kuò)展所包含的文件

　　每個(gè)應(yīng)用（擴(kuò)展）都應(yīng)該包含下面的文件：

• 一個(gè)manifest文件
• 一個(gè)或多個(gè)html文件（除非這個(gè)應(yīng)用是一個(gè)皮膚）
• 可選的一個(gè)或多個(gè)javascript文件
• 可選的任何需要的其他文件，例如圖片

　　在開(kāi)發(fā)應(yīng)用（擴(kuò)展）時(shí)，需要把這些文件都放到同一個(gè)目錄下。發(fā)布應(yīng)用（擴(kuò)展）時(shí)，這個(gè)目錄全部打包到一個(gè)應(yīng)用（擴(kuò)展）名是.crx的壓縮文件中。如果使用Chrome Developer Dashboard,上傳應(yīng)用（擴(kuò)展），可以自動(dòng)生成.crx文件。

三、chrome擴(kuò)展示例

　　目錄結(jié)構(gòu)：

　　manifest.json文件

{// 必須的字段"name": "My Chrome Extension","version": "1.0","manifest_version": 2,// 建議提供的字段"description": "MY SELF CHROME EXTENSION","icons": {"48": "images/1.png" ,"16" : "images/1.png" },// "default_locale": "en", 指定這個(gè)擴(kuò)展保的缺省字符串的子目錄：_lcoales。如果擴(kuò)展有_locales目錄，這個(gè)字段是必須的。如果沒(méi)有_locales目錄，這個(gè)字段是必須不存在的。// 多選一，或者都不提供"browser_action": {"default_icon": "images/1.png" ,"default_title": "My Chrome Extension","default_popup": "index.html"} }

index.html文件：

<!DOCTYPE HTML> <html lang="en"> <head><meta charset="UTF-8"><style type="text/css">*{margin:0;padding:0;}body{color:#333;overflow: hidden;margin: 0px;padding:5px;background: white;font-size:12px;}img{margin:0 4px;}#addItemDiv{color:#ccc;}.hide{display:none;}.show{display:block;}.taskItem{cursor:pointer;}input{width:100%;}label.on{width:12px; display:inline-block; height:12px; background:url(images/bg_task_on.gif) no-repeat 0px 2px;}label.off{width:12px; display:inline-block; height:12px; background:url(images/bg_task_off.gif) no-repeat 0px 2px;}</style> </head> <body><div id="newItem" class="gray">添加新項(xiàng)</div><div id="addDiv" class="hide"><input type="text" id="txtTitle" /></div><div id="taskItemList"><div class="taskItem"><label class="on"></label><span class="taskTitle">新任務(wù)</span></div><div class="taskItem"><label class="off"></label><span class="taskTitle">已完成任務(wù)</span></div></div> </body> </html>

　　我們將文件加拖拽到chrome擴(kuò)展中就會(huì)看到：

　　是不是很簡(jiǎn)單，一個(gè)簡(jiǎn)單的小例子就這樣完成了。

四、打包c(diǎn)hrome擴(kuò)展程序

　　在瀏覽器窗口輸入chrome://extensions/，或者菜單 ->設(shè)置 ->擴(kuò)展程序，會(huì)看到有兩個(gè)菜單“加載正在開(kāi)發(fā)的擴(kuò)展程序”和“打包擴(kuò)展程序”

　　我們點(diǎn)擊打包擴(kuò)展程序：

　　就會(huì)看到生成了兩個(gè)文件：mychrome.pem 和?mychrome.crx，?mychrome.crx解壓就可以看到元素的目錄，那么我們可以把mychrome.crx擴(kuò)展上傳到chrome應(yīng)用商店。

五、chrome擴(kuò)展API簡(jiǎn)介

　　在我們寫chrome擴(kuò)展時(shí)，經(jīng)常要與瀏覽器進(jìn)行數(shù)據(jù)交互，下面簡(jiǎn)單介紹幾個(gè)常用的擴(kuò)展API(實(shí)例:http://blog.csdn.net/ciml/article/details/5638112?http://blog.csdn.net/ciml/article/details/5700719):

　　chrome.tabs.create()：調(diào)用該api將打開(kāi)一個(gè)新的標(biāo)簽頁(yè)。

　　chrome.windows.getCurrent(function?callback)：該函數(shù)是獲取當(dāng)前窗口，其參數(shù)是一個(gè)回調(diào)函數(shù)，在回調(diào)函數(shù)中將傳遞一個(gè)windows對(duì)象，通過(guò)該對(duì)象可以獲取窗口的基本信息，在我們的例子中主要是利用了窗口id。

　　chrome.tabs.getAllInWindow(integer?windowId, function?callback)：該接口是獲取某個(gè)窗口的所有tab頁(yè)，其第一個(gè)參數(shù)是窗口id，第二個(gè)參數(shù)是一個(gè)回調(diào)函數(shù)，在回調(diào)函數(shù)中將傳回一個(gè)tabs數(shù)組對(duì)象，數(shù)組包含了當(dāng)前窗口所打開(kāi)的所有tab標(biāo)簽頁(yè)對(duì)象。通過(guò)數(shù)組條目獲取單個(gè)tab對(duì)象的基本信息，我們用到了tab的id和url屬性。通過(guò)url判斷，我們只將消息發(fā)送給了我們掛接了內(nèi)容腳本的google首頁(yè)。

　　chrome.tabs.sendRequest(integer?tabId, any?request, function?responseCallback)：該函數(shù)從擴(kuò)展頁(yè)發(fā)送消息給內(nèi)容腳本，第一個(gè)參數(shù)是內(nèi)容腳本所在的tab id，第二參數(shù)是消息內(nèi)容，為json格式。第三為可選響應(yīng)回調(diào)函數(shù)參數(shù)。

chrome.extension.onRequest.addListener(function(any request, MessageSender sender, function sendResponse) {...}):

　　該接口用于掛接消息處理函數(shù)，在內(nèi)容腳本和擴(kuò)展頁(yè)中都一樣。收到的消息就是sendRequest發(fā)出的json格式消息。

　　chrome.extension.sendRequest(string?extensionId, any?request, function?responseCallback)：從內(nèi)容腳本發(fā)送消息給擴(kuò)展頁(yè)。第一個(gè)參數(shù)是擴(kuò)展的id，為可選參數(shù)，默認(rèn)表示發(fā)送給當(dāng)前擴(kuò)展。第二個(gè)參數(shù)為json格式消息對(duì)象，第三個(gè)參數(shù)是可選響應(yīng)回調(diào)函數(shù)參數(shù)。

　　消息傳遞:?http://open.chrome.360.cn/html/dev_messaging.html

　　　　　　https://crxdoc-zh.appspot.com/apps/api_index

六、上傳chrome擴(kuò)展到chrome商店

　　進(jìn)入地址https://chrome.google.com/webstore/developer/dashboard，需要5刀，注冊(cè)才能發(fā)布。

?　

資料來(lái)源：

手把手教你開(kāi)發(fā)chrome擴(kuò)展一：開(kāi)發(fā)Chrome Extenstion其實(shí)很簡(jiǎn)單

手把手教你開(kāi)發(fā)Chrome擴(kuò)展二：為html添加行為

手把手教你開(kāi)發(fā)Chrome擴(kuò)展三：關(guān)于本地存儲(chǔ)數(shù)據(jù)

360極速瀏覽器應(yīng)用開(kāi)發(fā)平臺(tái)

Chrome擴(kuò)展程序開(kāi)發(fā)實(shí)例

一個(gè)初步的 Chrome Packaged App 寫法

Chrome插件（Extensions）開(kāi)發(fā)攻略

一個(gè)鮮為人知卻十分實(shí)用的Chrome瀏覽器使用技巧

Chrome擴(kuò)展及應(yīng)用開(kāi)發(fā)（首發(fā)版）

如何從零開(kāi)始寫一個(gè) Chrome 擴(kuò)展？

簡(jiǎn)單的Chrome 擴(kuò)展開(kāi)發(fā)

Chrome插件開(kāi)發(fā)進(jìn)階

chrome提供給開(kāi)發(fā)者的擴(kuò)展工具方便調(diào)節(jié)擴(kuò)展

轉(zhuǎn)載于:https://www.cnblogs.com/pingfan1990/p/4560215.html

總結(jié)

以上是生活随笔為你收集整理的chrome扩展写法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。