如何製作一個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>這樣一個簡易的APP就完成了!
<body >
<img src="http://www.google.com/ig/images/weather/sunny.gif" />
</body>
</html>
那要放上去我們的瀏覽器呢?
其實這分成兩種
一種是本地端的使用
一種是放在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
可以安裝玩看看!