您當前位置：首頁 > 互聯網 > 用HTML開發Chrome插件入門

用HTML開發Chrome插件入門

來源：程序員人生發布時間：2013-12-23 05:03:15 閱讀次數：3825次

最近女朋友也用上Chrome了，想到給我們的情侶微博也來個Chrome插件，這次初步的插件開發，發現過程還是比較簡單，有HTML和Javascript基礎的朋友，都能開發出屬于自己的Chrome插件。

插件開發流程
1.開發語言和軟件
開發語言就是HTML和Javascript，開發軟件選擇一款自己熟悉的純文本編輯器就可以了，例如系統自帶的記事本，或者支持語法高亮的Notpad++。

2.設計插件
一個完整的插件是由4個部分組成，分別是manifest.json、.js文件、圖標和HTML文件，設計插件就是設計這4類文件。manifest.json的作用是定義插件的屬性，例如名稱、版本、類型等;HTML文件具體實現插件的功能;.js文件是一個跟瀏覽器互動的腳本。

3.載入插件
設計好上面幾個文件后，就可以將插件載入瀏覽器中試用一下。首先將它們整理到同一個文件夾中，然后在Chrome的工具欄中選擇“擴展程序”，進入擴展管理頁，在右側選擇“開發人員模式”，再點擊“載入正在開發的擴展程序”按鈕，定位到這個文件夾，將整個文件夾載入Chrome中。

4.發布插件
插件試用沒有問題后，不妨將它發布出去讓更多人使用。首先將插件所在的文件夾壓縮成一個ZIP文件(別順手壓縮成了RAR文件)。然后再到擴展管理頁，點擊右下角的“獲得更多擴展程序”鏈接，進入Chrome官方插件下載頁面，在這個網頁的左下角，你能看到“發布擴展程序”的鏈接，點擊鏈接，上傳ZIP壓縮文件、添加插件的使用說明和截圖，就可以發布插件了。

組成結構
Chrome插件最基本的三個文件為：

icon.png: 用于在插件工具欄上顯示圖標，文件名可以自定義，19*19；
manifest.json: 控制整個插件行為的配置文件，該文件需要保存成UTF-8格式；
popup.html: 點擊插件圖標后彈出的窗口，是插件的主界面，文件名可以自定義。
如果希望插件結構更完善，還可以包含如下文件/目錄：

imgs目錄：存放插件中使用的圖片；
css目錄：存放CSS文件；
js目錄：存放JS文件；
background.html: 插件的后臺程序，其不會因為popup.html窗口消失而停止運行。
icon_128.png: 在插件描述中作為插件的Logo，128*128。
manifest.json 為整個插件的主控文件，基本功能描述如下：

Copy to Clipboard Liehuo.Net Codes

引用的內容：[www.veryhuo.com]

{
"name": "GroovyQ Ask Question", //名稱
"version": "0.1", //版本號
"description": "提交Groovy/Grails問題！", //描述信息，會顯示在插件屬性里
"browser_action": {
"default_icon": "groovyq.jpg", //指定插件圖標的路徑
"popup": "popup.html" // 指定 popup.html 文件的路徑
},

"permissions": [
"http://www.groovyq.net/" //此權限支持向 <a href="http://www.groovyq.net/" title="http://www.groovyq.net/">http://www.groovyq.net/</a> 發送 Ajax 請求
]
}

popup.html為整個插件的界面，框架如下：

Copy to Clipboard Liehuo.Net Codes

引用的內容：[www.veryhuo.com]

<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="main.css" />

<script type="text/javascript" src="./groovyq.js"></script>
<script type="text/javascript">
......

</script>
<body >
......
</body>

關于Background.html

在popup.html中定義的JavaScript變量會在popup.html頁面關閉時被釋放，如何保存全局變量呢？這時可以使用background.html。background.html頁面中定義的javascript變量會在Chrome瀏覽器生命期中一直存在，因此把全局變量放在這里是最合適的了。

Copy to Clipboard Liehuo.Net Codes

引用的內容：[www.veryhuo.com]

//Background.html中定義變量
var global_url = "";
var global_type = "";
//在popup.html中讀取上述變量或賦值
var backpg = chrome.extension.getBackgroundPage();
backpg.global_url = "http://www.groovyq.net";
backpg.global_type = "blog";

對于數據保存，還可以使用HTML5的localStorage：

Copy to Clipboard Liehuo.Net Codes

引用的內容：[www.veryhuo.com]

//保存
localStorage['url'] = golbal_url;
localStorage['type'] = global_type;
//取值
global_url = localStorage['url'];
global_type = localStorage['type'];

插件調試/發布
插件開發中，可以使用任何瀏覽器打開popup.html進行調試。但若是用到一些Chrome的特性，就需要在Chrome上進行調試。

安裝插件：Chrome中，單擊工具欄的扳手按鈕，選擇工具 -》擴展程序，在出現的頁面中單擊：開發人員模式 -》載入正在開發的擴展程序，選擇插件的根目錄，確定。

在擴展程序列表中會出現插件的相關信息，而在Chrome的工具欄中也能看到插件圖標，單擊圖標，彈出的就是popup.html。
如果修改插件程序，只需單擊插件描述信息下方的“重新載入”，修改就會生效。你還可以在此對插件執行停用/卸載等操作。

插件開發結束后，可以打包插件分發給更多人享用你的插件。可以選擇“打包擴展程序”，填入插件根目錄以及私有密鑰，之后在https://chrome.google.com/extensions 發布你的程序即可

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
程序員人生