前面的『如何快速建立新的 Extension？』有介紹 Extensionizr 工具，這裡就可以用到囉！
修改專案雛形
以 Extensionizr 建立好後，需要將部分資訊修改一下。(原始碼在 GitHub 上)
Step 1. 修改 manifest.json 設定檔和多國語言描述檔。
{
"name": "__MSG_extName__",
"description": "__MSG_extDescription__",
"default_locale": "en",
...
"browser_action": {
"default_title": "__MSG_extActionTitle__",
...
},
...
}
說明：這邊有很多
__MSG_XXX__ 的文字，會去讀多國語言檔案裡的文字。例如：__MSG_extName__ 會依據當前設定的語言("default_locale": "en")去讀取對應檔案(_locales/en/messages.json)裡的"extName"。如下所示。{
"extName":
{
"message":"RSS Announcer",
"description":"Extension Name"
},
...
}
說明：extName 就像是變數，他的值就是 message，而 description 是說明這個變數的意義。詳細資訊可參考官網文件 chrome.i18n、Formats: Locale-Specific Messages。
Step 2. 移除不必要的程式。
// event page
<!DOCTYPE html>
<html>
<head>
<title>action page title</title>
</head>
<body>
action page content
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>option page title</title>
</head>
<body>
option page content
</body>
</html>
Step 3. 更換 icon 圖示。
筆者是從 iconfinder 找一個免費的圖示，大家也可以自行設計 icon。
溫馨小提醒：icon 的大小有 16x16, 19x19, 38x38, 48x48, 128x128
筆者是從 iconfinder 找一個免費的圖示，大家也可以自行設計 icon。
溫馨小提醒：icon 的大小有 16x16, 19x19, 38x38, 48x48, 128x128
注意：這裡的目的為快速建立專案雛形，不需要改的太仔細，之後還會一點一點地修改，像是 browser_action 的資料夾名稱也許會改為 popup 等。
將專案載入 Chrome Browser
修改完專案雛形後，就先載入到 Chrome Browser 上試試看有沒有什麼問題。如果忘了怎麼載入可以參考 Chrome Extension 開發環境介紹。
結語：
快速建立專案雛形是為了增加自己的信心，不要一次改太多，造成反效果。如果您有問題，歡迎在下方留言。謝謝！
沒有留言:
張貼留言