chrome 擴充

這是制作chrome擴充插件的入門指南，不需要任何程式設計基礎，看完這個後，我們就着手做自己的Chrome插件了。好吧，我們現在就開始，其實我也是個新手。

準備工具

做任何事情都要有個工具，制作chrome插件需要的工具很少。

記事本，用來編寫代碼

Chrome浏覽器，這個不能少吧。Windows下，所有版本的Chrome都可以制作插件。Linux下需要下載下傳Beta版本，Mac下載下傳dev版本。

開始制作第一個插件

在計算機中建立一個目錄來存放插件代碼。

在目錄裡面建立檔案manifest.json(注意字尾名是.json)，用記事本打開，寫入如下代碼

{

  "name": "第一個Chrome插件",

  "version": "1.0",

  "description": "我的第一個Chrome插件，還不錯吧",

  "browser_action": {

    "default_icon": "icon.gif"

  }

}

複制代碼

把下面兩張圖檔儲存到檔案夾中，分别取名icon.gif和smile.gif

圖檔一：      圖檔二： 

安裝這個插件:

a.點選右上角扳手，選擇擴充程式，打開擴充中心。

b.點選右上角的“開發人員模式”，使得前面的“+”變成“-”，打開相應的菜單。如果一開始就是“-”，那麼不用點選。

c.點選“載入正在開發的擴充程式按鈕”，導入剛才建立的檔案夾。

如果一切順利，你的Chrome位址欄将會有個新圖示，你的第一個插件誕生了。

給第一個插件增加新功能

你現在雖然做了第一個插件，但實際上他并沒有實作任何功能，我們點選圖示，沒有任何反應。下面我們就給他增加點功能。

編輯manifest.json這個檔案，用下面的代碼替換現有的代碼，其實我們隻是加了一行代碼和一個逗号而已。

{ 

   "name": "第一個Chrome插件", 

   "version": "1.0", 

   "description": "我的第一個Chrome插件，還不錯吧", 

   "browser_action": { 

      "default_icon": "icon.gif", 

      "popup": "popup.html" 

   }

下面我們建立一個文本檔案popup.html，用記事本打開，将下面的代碼寫進去

<p>Hello,Chrome!</p>

<p>我的名字叫ChromeChina!</p>

<p><a href="http://www.chromechina.com" target="_blank">Chrome中文論壇歡迎你</a>

<p><img src="smile.gif" /></p>

回到Chrome的擴充中心，點選插件下的“重新載入 ”。

現在點選插件圖示看看。我們的第一個插件算是制作成功了。

打包插件

我們想把自己制作的插件給其他人用，那麼就需要将插件打包。

回到Chrome的插件擴充中心，點選“打包擴充程式”按鈕。

選擇剛才建立的檔案夾，點選确定生成字尾為crx和cpm檔案各一個。

把crx檔案發送給自己的朋友，告訴他們你也會制作chrome插件吧。