10 July 2010

如何製作一個chrome extension!

其實chrome extension大概分為兩種!

一種是serverless的

一種是extings Web server的!

這邊主要作serverless的介紹!

1.首先先建立一個資料夾,例如: C:/chrome_app/

2.在資料夾裡面建立一個檔名為manifest的json檔案,如:manifest.json

內容格式如下:

{
"name": "just sample",
"version": "1.0",
"description": "hello, this is ken's sample",
"browser_action": {
"default_icon": "icon.png",
"popup" : "popup.html"
}
}


name                 :你的chrome app 名稱
vserions            :你的版本別
description        :敘述
browser_action  :是這支app的一些基本設定,有很多種,大家可以去看官方的說明文件
default_icon       :是這支app的logo
popup               :是當按下這支app時,所呈現的畫面頁面


3.接著就把你的icon放到C:/chrome_app/底下去

4.在資料夾裡面建立一個檔名為popup.html的檔案

內容格式如下:


<html>

<body >
<img src="http://www.google.com/ig/images/weather/sunny.gif" />
</body>

</html>




這樣一個簡易的APP就完成了!


那要放上去我們的瀏覽器呢?

其實這分成兩種

一種是本地端的使用

一種是放在Google擴充功能上給大家使用

先教第一種!

首先先點選瀏覽器上的扳手按鈕

在點選擴充功能

在點選載入未封裝功能

這樣就完成了啊!!!

第二種是上傳至google去

先至此網站https://chrome.google.com/extensions/developer/dashboard?hl=zh-TW

接著就add new item

並且把剛剛的資料夾壓縮成zip檔案

然後上傳上去即可!

之後會請你做一些chrome的說明!

例如放圖片之類的!

這邊是簡易的使用啦!

日後有機會再作深入的介紹!


我也做了一個正妹報時的Chrome的擴充功能

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

可以安裝玩看看!



















blog comments powered by Disqus