編寫chrome插件之前，需要熟悉一下相應的chrome插件開發環境。從編寫hello world開始，參考閱讀官方的教程，是一個不錯的選擇。這里主要是基於chrome的官方教程，稍稍做了一些修改和擴充，總結成了如下的幾個部分。
在chrome中編寫插件和寫網頁應用基本一致，采用的是javascript+css+html的方式。所以對於用過chrome瀏覽器審閱過一些網頁的源碼，寫過網頁或者腳本的人而言，編寫chrome的插件感覺到還是比較熟悉的。
一、chrome插件和用戶的幾種交互方式
比較常見的插件形式是:
1.browser action:即在瀏覽器的右上角有一個新增的顯示插件圖標的按鈕，用戶點擊該按鈕即可以觸發插件的應用邏輯；
2.backgroud javascript:這種情況下插件沒有對應的圖標和按鈕，在chrome啟動時，插件運行在自己的單獨的背景線程中。與用戶的交互方式通常是在某些相關網頁加載完之后，通過javascript對該網頁進行修改，將插件邏輯嵌入到頁面html代碼中。
3.page action:這種插件形式在需要時在瀏覽器地址欄中彈出一個圖標。
更多：見Developer's Guide - Google Chrome
二、通過browser action實現hello world
2.1 程序的文件清單
先來看看hello world插件的文件清單，如下圖所示。其中icon.png用於圖標的顯示,manifest.json是chrome 插件的基本配置文件，popup.html用於下拉菜單的構建，popup.js是和popup.html對應的js文件。
2.2 manifest.json文件
{ "manifest_version":2, "name":"one-click hello_world", "description":"my first chrome extension-browser action", "version":"1.0", "permissions":[ "https://*/*", "http://*/*" ], "browser_action":{ "default_icon":"icon.png", "default_popup":"popup.html" } }
manifest.json是chrome插件的配置文件，其基本內容如上所示。"manifest_version"字段默認設置為2。permissions字段設置了插件的基本權限，即具有訪問所有http鏈接的權限。browser_action字段中default_icon和default_popup分別和之前的icon.png，popup.html文件相對應。
2.3 popup.html
<!doctype html>
<html>
<head>
<title>Hello World</title>
<style>
body {
min-width: 100px;
overflow-x: hidden;
}
img {
margin: 5px;
border: 2px solid black;
vertical-align: middle;
width: 75px;
height: 75px;
}
</style>
<!--
- JavaScript and HTML must be in separate files: see our Content Security
- Policy documentation[1] for details and explanation.
-
- [1]: http://developer.chrome.com/extensions/contentSecurityPolicy.html
-->
</head>
<body>
<p id="p1">Hello World-1</p>
<p id="p2">Hello World-2</p>
<script src="popup.js"></script>
</body>
</html>
popup.html中有兩個分別為p1和p2的標簽，其中p1標簽中原有的內容是Hello World-1,p2標簽中原有的內容是Hello World-2。在popup.js中通過代碼將標簽1的內容修改為了Hello New World。
2.4 popup.js
document.getElementById("p1").innerHTML="Hello New World"
2.5 將插件安裝到chrome瀏覽器中
2.5.1進入extension頁面擴展程序
2.5.2勾選開發者模式
2.5.3將包含源碼的目錄直接拖入extension頁面，完成安裝。點擊重新加載可以更新。
2.5.4運行，並看到了popup.html頁面的正確顯示且被popup.js所修改
三、通過backgroud javascript實現hello world！
目標：打開http://www.baidu.com/時，彈出hello world的提示框
3.1文件清單
3.2manifest.json文件
{ "manifest_version":2, "name":"one-click hello_world", "description":"my first chrome extension-background", "version":"1.0", "permissions":[ "tabs", "https://*/*", "http://*/*" ], "background": { "scripts": ["bg.js"], "persistent": false } }
permission字段中，新增“tabs”屬性，后面需要通過tab來獲得當前頁面的url。background字段中指明了需要在后台運行的bg.js
3.3 bg.js
console.log("background")
chrome.tabs.onUpdated.addListener(function(tabId , info) {
if (info.status == "complete") {
chrome.tabs.query({'active': true, 'lastFocusedWindow': true}, function (tabs) {
var url = tabs[0].url;
console.log(url)
if(url=="http://www.baidu.com/"){
chrome.tabs.executeScript(null,{code:'alert("Hello World!")'});
}
});
}
});
bg.js中注冊了tabs的監聽器，在當前頁面加載完整之后檢查當前頁面鏈接是否是http://www.baidu.com/，並執行相應操作。
3.4 執行后的效果
四、通過page action實現hello world！
4.1 目標
訪問http://www.baidu.com，在地址欄的右側出現page action的圖標，點擊彈出html頁面
4.2文件清單
4.3manifest.json
{ "manifest_version":2, "name":"one-click hello_world", "description":"my first chrome extension-background", "version":"1.0", "permissions":[ "tabs", "http://*/*" ], "background": { "scripts": ["bg.js"], "persistent": false }, "page_action": { "default_name": "Hello world", "default_icon": "marker.png", "default_popup": "popup.html" } }
新增了page_action字段，指定了page action的圖標和下拉html。
4.4 bg.js
console.log("background")
chrome.tabs.onUpdated.addListener(function(tabId , info) {
if (info.status == "complete") {
chrome.tabs.query({'active': true, 'lastFocusedWindow': true}, function (tabs) {
var url = tabs[0].url;
console.log(url)
if(url=="http://www.baidu.com/"){
chrome.pageAction.show(tabs[0].id)
}
});
}
});
page action默認不做顯示，當頁面url=="http://www.baidu.com/",通過api chrome.pageAction.show顯示page action
4.5 訪問http://www.baidu.com,查看運行效果
4.6page action和browser action的對比
page action適用於插件僅針對少數頁面的情況，browser action則主要適用於插件對大部分頁面都有效的情況。就能夠實現的功能而言是基本一致的。二者對比可以進一步參見[4]
六、參考材料
[1]Getting Started: Building a Chrome Extension - Google Chrome
[2]How can I get the URL for a Google Chrome tab? - Stack Overflow