chrome扩展写法
最近看到公司同事經常寫chrome擴展，來提高生成效率，回想想自己以前也寫過chrome擴展，但是由于不經常寫，也沒做積累也都忘記了，現在重新回顧一下。
一、chrome擴展基本概念
chrome擴展應用其實是壓縮在一起的一組文件，包括HTML，CSS，Javascript腳本，圖片文件，還有其它任何需要的文件。 應用（擴展）本質上來說就是web頁面，它們可以使用所有的瀏覽器提供的API，從XMLHttpRequest到JSON到HTML5全都有。
應用（擴展）可以與Web頁面交互，或者通過content script或cross-origin XMLHttpRequests與服務器交互。應用（擴展）還可以訪問瀏覽器提供的內部功能，例如標簽或書簽等。
應用（擴展）的界面：
很多應用（不包括WebApp）會以browser action或page action的形式在瀏覽器界面上展現出來。每個應用（擴展）最多可以有一個browser action或page action。當應用（擴展）的圖標是否顯示出來是取決于單個的頁面時，應當選擇page action；當其它情況時可以選擇browser action。
比較全的
?
//這個json是用來給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"},//需要數據保存程序中，如果當前用戶關閉popup，就需要Background Pages來進行相應的操作"background": {"scripts": ["background.js"]},//需要和網頁交互，那么他就需要一個內容腳本(Content scripts)，內容腳本常由JavaScript編寫，會在網頁載入完成后調用"content_scripts": [{"matches": ["http://www.google.com/*"],"css": ["mystyles.css"],"js": ["jquery.js", "myscript.js"]}],//選項頁面"options_page": "options.html",//跨域權限許可，權限"permissions": ["*://www.google.com/*"],//web可訪問資源"web_accessible_resources": ["images/*.png"] }
?
?
?
二、chrome擴展開發需要掌握的基礎知識
1、Chrome擴展文件
Chrome擴展文件以.crx為后綴名，在Google Chrome擴展官方網站下載擴展時，Chrome會將.crx文件下載到Chrome的Application Data文件夾的User Data\Temp下，一般是C:\Documents and Settings\User\Local Settings\Application Data\Google\Chrome\User Data\Temp，安裝完成或者取消安裝，該文件就會被刪除。.crx實際上是一個壓縮文件，使用解壓文件打開這個文件就可以看到其中的文件目錄：
因此可以認為，我們實際上就是寫一個Web應用，然后將按照Chrome的規定將一個快捷方式放在Chrome工具欄上。
2、Browser Actions（擴展圖標）
把Browser Actions翻譯成擴展圖標不是很準確，但它的功能就是把你的應用顯示在Chrome工具欄上。我們在上面看到一個文件manifest.json，就是使用這個文件來把相應的圖標和其他參數注冊到Browser Actions。比如下圖中就是EverNote的擴展圖標。
3.Page Actions（地址欄圖標）
如果你熟悉一些Chrome插件的話，你一定會發現有些擴展的圖標不是顯示在地址欄的右邊，而是顯示在地址內部右方，這就是Page Actions地址欄圖標。
可以看出上面中有三個Page Actions，圖中我標出的是Chrome添加書簽，現在你就會發現其實這個也是Chrome的擴展，只不是它是直接內置在Chrome的。
Page Actions與Browser Actions的區別就是Page Actions不是隨時都是顯示的，必須在特定的頁面中這個功能才能使用。因此在開發中注意：如果不是全部頁面中都能使用的功能請使用Page Actions方式
4、popup彈出窗口
popup屬于Browser Actions，當點擊圖標時出現這個窗口，可以在里面放置任何html元素，它的寬度是自適應的。當然，這個彈出窗口不會被Chrome攔截的:)
如下圖中是evernote的popup窗口：
5、Background Pages后臺頁面
這個窗口不會顯示，它是擴展程序的后臺服務，它會一直保持運行。比如在一些需要數據保存程序中，如果當前用戶關閉popup，就需要Background Pages來進行相應的操作。
6、chrome擴展所包含的文件
每個應用（擴展）都應該包含下面的文件：
- 一個manifest文件
- 一個或多個html文件（除非這個應用是一個皮膚）
- 可選的一個或多個javascript文件
- 可選的任何需要的其他文件，例如圖片
在開發應用（擴展）時，需要把這些文件都放到同一個目錄下。發布應用（擴展）時，這個目錄全部打包到一個應用（擴展）名是.crx的壓縮文件中。如果使用Chrome Developer Dashboard,上傳應用（擴展），可以自動生成.crx文件。
三、chrome擴展示例
目錄結構：
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", 指定這個擴展保的缺省字符串的子目錄：_lcoales。如果擴展有_locales目錄，這個字段是必須的。如果沒有_locales目錄，這個字段是必須不存在的。// 多選一，或者都不提供"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">添加新項</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">新任務</span></div><div class="taskItem"><label class="off"></label><span class="taskTitle">已完成任務</span></div></div> </body> </html>我們將文件加拖拽到chrome擴展中就會看到：
是不是很簡單，一個簡單的小例子就這樣完成了。
四、打包chrome擴展程序
在瀏覽器窗口輸入chrome://extensions/，或者菜單 ->設置 ->擴展程序，會看到有兩個菜單“加載正在開發的擴展程序”和“打包擴展程序”
我們點擊打包擴展程序：
就會看到生成了兩個文件：mychrome.pem 和?mychrome.crx，?mychrome.crx解壓就可以看到元素的目錄，那么我們可以把mychrome.crx擴展上傳到chrome應用商店。
五、chrome擴展API簡介
在我們寫chrome擴展時，經常要與瀏覽器進行數據交互，下面簡單介紹幾個常用的擴展API(實例:http://blog.csdn.net/ciml/article/details/5638112?http://blog.csdn.net/ciml/article/details/5700719):
chrome.tabs.create()：調用該api將打開一個新的標簽頁。
chrome.windows.getCurrent(function?callback)：該函數是獲取當前窗口，其參數是一個回調函數，在回調函數中將傳遞一個windows對象，通過該對象可以獲取窗口的基本信息，在我們的例子中主要是利用了窗口id。
chrome.tabs.getAllInWindow(integer?windowId, function?callback)：該接口是獲取某個窗口的所有tab頁，其第一個參數是窗口id，第二個參數是一個回調函數，在回調函數中將傳回一個tabs數組對象，數組包含了當前窗口所打開的所有tab標簽頁對象。通過數組條目獲取單個tab對象的基本信息，我們用到了tab的id和url屬性。通過url判斷，我們只將消息發送給了我們掛接了內容腳本的google首頁。
chrome.tabs.sendRequest(integer?tabId, any?request, function?responseCallback)：該函數從擴展頁發送消息給內容腳本，第一個參數是內容腳本所在的tab id，第二參數是消息內容，為json格式。第三為可選響應回調函數參數。
chrome.extension.onRequest.addListener(function(any request, MessageSender sender, function sendResponse) {...}):該接口用于掛接消息處理函數，在內容腳本和擴展頁中都一樣。收到的消息就是sendRequest發出的json格式消息。
chrome.extension.sendRequest(string?extensionId, any?request, function?responseCallback)：從內容腳本發送消息給擴展頁。第一個參數是擴展的id，為可選參數，默認表示發送給當前擴展。第二個參數為json格式消息對象，第三個參數是可選響應回調函數參數。
消息傳遞:?http://open.chrome.360.cn/html/dev_messaging.html
https://crxdoc-zh.appspot.com/apps/api_index
六、上傳chrome擴展到chrome商店
進入地址https://chrome.google.com/webstore/developer/dashboard，需要5刀，注冊才能發布。
?
資料來源：
轉載于:https://www.cnblogs.com/pingfan1990/p/4560215.html
總結
以上是生活随笔為你收集整理的chrome扩展写法的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： RS485通信总线详解
- 下一篇： c语言抢答器程序,单片机六路抢答器C语言