編寫Google Chrome瀏覽器外掛套件

編寫Google Chrome瀏覽器外掛套件

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

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

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

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

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

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

 

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

圖示、Json、HTML、JavaScript

 

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

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

  • 建一個資料匣(名子隨便、放那隨便)
  • 資料匣內建立 manifest.json
  • 資料匣內建立 相關html (有pop和background2種,user有自訂的也行)
  • 資料匣內建立 相關js (非必要,看用途)
  • 資料匣內建立 套件的icon

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

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)

可以參考一下文件

http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro2/

 

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

https://chrome.google.com/extensions/detail/omllgblhpapjkfengoephaajgcbimhog?hl=en

https://chrome.google.com/extensions/detail/fmfngoenpkddjfnaolmaadfmmfoeflkh?hl=en

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

以上~~~~收工嘍