編寫Google Chrome瀏覽器外掛套件

2010-12-22 置頂文章

自從google瀏覽器上市後，安迪兒一直是愛用者

(因為簡潔加上google後來又加上了同步書籤

讓安迪兒出外，都有相同一長串的書籤可以用)

前天安迪兒在寫plurk自動噗文章時，突然想到

把這東西弄在chrome上應該很有趣，研究了一下

發現開發套件不難，就試著弄一個玩玩

Chrome套件有他的結構，大約分成4個部份

圖示、Json、HTML、JavaScript

開發前先新增下面這些東西

(安迪兒都是用記事本、小畫家完成的沒特別用啥工具)

安迪兒轉貼一下簡單的範例:

I.Manifest

manifest.json

新開發這隻Chrome外掛的屬性，關鍵字是google定出來的，用json格式定義

		   1:  {

		   2:    "name": "A browser action with a popup that changes the page color.",

		   3:    "version": "1.0",

		   4:    "permissions": [

		   5:      "tabs", "http://*/*", "https://*/*"

		   6:    ],

		   7:    "browser_action": {

		   8:        "default_title": "Set this page's color.",

		   9:        "default_icon": "icon.png",

		  10:        "popup": "popup.html"

		  11:    }

		  12:  }

II.相關的HTML

	popup.html

	   1:  <style>

	   2:  body {

	   3:    overflow: hidden;

	   4:    margin: 0px;

	   5:    padding: 0px;

	   6:    background: white;

	   7:  }

8:

	   9:  div:first-child {

	  10:    margin-top: 0px;

	  11:  }

12:

	  13:  div {

	  14:    cursor: pointer;

	  15:    text-align: center;

	  16:    padding: 1px 3px;

	  17:    font-family: sans-serif;

	  18:    font-size: 0.8em;

	  19:    width: 100px;

	  20:    margin-top: 1px;

	  21:    background: #cccccc;

	  22:  }

	  23:  div:hover {

	  24:    background: #aaaaaa;

	  25:  }

	  26:  #red {

	  27:    border: 1px solid red;

	  28:    color: red;

	  29:  }

	  30:  #blue {

	  31:    border: 1px solid blue;

	  32:    color: blue;

	  33:  }

	  34:  #green {

	  35:    border: 1px solid green;

	  36:    color: green;

	  37:  }

	  38:  #yellow {

	  39:    border: 1px solid yellow;

	  40:    color: yellow;

	  41:  }

	  42:  </style>

	  43:  <script>

	  44:  function click(color) {

	  45:    chrome.tabs.executeScript(null,

	  46:        {code:"document.body.style.backgroundColor='" + color.id + "'"});

	  47:    window.close();

	  48:  }

	  49:  </script>

	  50:  <div onclick="click(this)" id="red">red</div>

	  51:  <div onclick="click(this)" id="blue">blue</div>

	  52:  <div onclick="click(this)" id="green">green</div>

	  53:  <div onclick="click(this)" id="yellow">yellow</div>

III:icon

icon.png

到這邊，套件算是開發完成了。

匯入chrome 套件:

建立完成後，打開chrome選[工具] [擴充功能] [載入未封裝功能]

選一下剛新建出來的資料匣，當然裡的東西都要先建立好

然後外掛套件就會匯入chrome了。

上述例子的功用是讓網頁換背景顏色

(開一張google 的網頁點一下外掛的顏色整張網頁就會換色了)

這是屬於比較簡單的範例，要有一些功能的其實還有分popup用和background用的頁面

也可以再外掛js、呼叫外部的api

其它剩的大約就是再加一些ajax之類的東西(XMLHttpRequest)

可以參考一下文件

最後順便分享一下安迪兒製作的日本美女、帥哥報時器

(很面熟吧~就是plurk機器人用的^^)

以上~~~~收工嘍

安迪兒隨手貼