Jerry Lin

2014年11月9日星期日

Chrome Extension 開發實戰篇 26 - 通知訊息

有了事件頁面的定時更新 Feeds 後，接下來要做通知訊息。當有新的文章是 local storage 沒有的，就發一個通知訊息告知使用者。

建立通知訊息

event_page.js

chrome.notifications.create('newFeed', {
  type: 'basic',
  iconUrl: chrome.runtime.getURL('icons/icon128.png'),
  title: 'New Feed!',
  message: ''
}, function (notificationId) {
  console.log(notificationId);
});

說明：在建立通知訊息時一定要設定 type, iconUrl, title, message 四項參數。另外，type 是通知訊息的種類，有 "basic", "image", "list", or "progress" 四種。
溫馨小提醒：要使用通知功能，必須先到 manifest.json 設定檔取得權限。

manifest.json

{
  ...
  "permissions": 
  [
    "notifications",
    ...
  ],
  ...
}

可能會遇到的問題

第一次建立通知訊息時，會正常顯示，但同樣的 notificationId 在建立第二次時，卻不會顯示通知訊息。跟據官網的描述，是會先 clear 再 create，但沒說明會不會再顯示通知訊息。

If it matches an existing notification, this method first clears that notification before proceeding with the create operation.

那筆者的解決方式是自己先 clear 再 create，就可以正常顯示通知訊息，如下所示。

event_page.js

chrome.notifications.clear('newFeed', function (wasCleared) {
  chrome.notifications.create('newFeed', {
    type: 'basic',
    iconUrl: chrome.runtime.getURL('icons/icon128.png'),
    title: 'New Feed!',
    message: ''
  }, function (notificationId) {
    console.log(notificationId);
  });
});

說明：這裡 clear 後，沒有檢查 wasCleared 布林值，因為第一次的情況會是還沒 create 就 clear，所以 wasCleared 為 false。

結語：

有了通知訊息，使用體驗上是不是更良好啊！如果您有問題，歡迎在下方留言。謝謝！

Chrome Extension 開發實戰篇 25 - 儲存 RSS

在彈出頁面讀取 RSS 的功能做好後，接下來要做兩件事：

在選項頁面實作 feeds 管理，可新增、刪除、修改 feeds，並把 feeds 儲存到 sync storage，而在讀取 RSS 時就依據 sync storage 裡的 feeds url 去撈資料。
把『讀取 RSS』這件事搬到事件頁面，每隔一段時間就執行一次，並把取得的 RSS 儲存到 local storage，而彈出頁面就只需要從 local storage 讀取資料就行了。

說明：這兩件事沒有一定要哪個先做，而筆者是選擇先做選項頁面的 feeds 管理，因為如果先做事件頁面，等選項頁面做完後還是要回來修改事件頁面。

需要注意的地方

事件頁面中的 setInterval 要改成使用 alarms API，用法如下。

event_page.js

// 加入監聽事件
chrome.alarms.onAlarm.addListener(function (alarm) {
  if (alarm.name === 'getFeed') {
    getFeed();
  }
});
// 建立 alarms
chrome.alarms.create('getFeed', {
  when: Date.now(),
  periodInMinutes: 15
});

function getFeed() {
  // to do something
}

溫馨小提醒：periodInMinutes 最小值為 1 (分鐘)。

結語：

善用 storage 可以加快彈出頁面的開啟速度喔！如果您有問題，歡迎在下方留言。謝謝！

Chrome Extension 開發實戰篇 24 - 讀取 RSS

建立好專案雛形後，第一個步驟就是先完成基本的功能『讀取 RSS』，這個功能應該不難，Google 一下就有很多範例了。那為了能快速做出一些成果，筆者直接在彈出頁面讀取 RSS，這麼做有個好處，彈出頁面就像是一般網頁，實作上比較不會出什麼問題。舉例來說，如果一開始就選擇在後台頁面或事件頁面讀取 RSS，再使用訊息傳遞到彈出頁面，流程上會複雜一點，也比較容易出現有關 chrome extension 的錯誤。(當然，如果已經很熟練的話就不會有這個問題啦！)

可能會遇到的問題

跨域資源共享：筆者是使用 Google Feed API 的 Load feed，如果沒有設定 content_security_policy 的話，就會出現下面這個錯誤。

Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self' chrome-extension-resource:".

那解決方式就是在 manifest.json 設定檔加上 content_security_policy 的定義。如下所示。

manifest.json

{
  ...
  "content_security_policy": "default-src 'self'; script-src 'self' https://ajax.googleapis.com 'unsafe-eval'; style-src * 'unsafe-inline';",
  ...
}

使用 Framework

筆者有使用 AngularJS 和 SCSS 來幫助開發，大家也可以根據自己的需求加入其他 Framework，不過要注意以下兩點：

使用 Framework 是為了幫助開發與維護，真的有需要再加入。
使用 Framework 時，記得下載回來包在專案裡。

結語：

開發時以方便和快速為主，等開發完主要功能在慢慢優化。如果您有問題，歡迎在下方留言。謝謝！

Chrome Extension 開發實戰篇 23 - 建立專案雛形

前面的『如何快速建立新的 Extension？』有介紹 Extensionizr 工具，這裡就可以用到囉！

修改專案雛形

以 Extensionizr 建立好後，需要將部分資訊修改一下。(原始碼在 GitHub 上)

Step 1. 修改 manifest.json 設定檔和多國語言描述檔。

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"。如下所示。

_locales/en/messages.json

{
  "extName": 
  {
    "message":"RSS Announcer",
    "description":"Extension Name"
  },
  ...
}

說明：extName 就像是變數，他的值就是 message，而 description 是說明這個變數的意義。詳細資訊可參考官網文件 chrome.i18n、Formats: Locale-Specific Messages。

Step 2. 移除不必要的程式。

src/bg/background.js

// event page

src/browser_action/browser_action.html

<!DOCTYPE html>
<html>
<head>
    <title>action page title</title>
</head>
<body>
action page content
</body>
</html>

src/options/index.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

注意：這裡的目的為快速建立專案雛形，不需要改的太仔細，之後還會一點一點地修改，像是 browser_action 的資料夾名稱也許會改為 popup 等。

將專案載入 Chrome Browser

修改完專案雛形後，就先載入到 Chrome Browser 上試試看有沒有什麼問題。如果忘了怎麼載入可以參考 Chrome Extension 開發環境介紹。

結語：

快速建立專案雛形是為了增加自己的信心，不要一次改太多，造成反效果。如果您有問題，歡迎在下方留言。謝謝！

訂閱：文章 (Atom)

Jerry Lin

2014年11月9日星期日

Chrome Extension 開發實戰篇 26 - 通知訊息

建立通知訊息

可能會遇到的問題

結語：

Chrome Extension 開發實戰篇 25 - 儲存 RSS

需要注意的地方

結語：

Chrome Extension 開發實戰篇 24 - 讀取 RSS

可能會遇到的問題

使用 Framework

結語：

Chrome Extension 開發實戰篇 23 - 建立專案雛形

修改專案雛形

將專案載入 Chrome Browser

結語：

Pages - Menu

Blog Archive

2014年11月9日 星期日

Chrome Extension 開發實戰篇 26 - 通知訊息

建立通知訊息

可能會遇到的問題

結語：

Chrome Extension 開發實戰篇 25 - 儲存 RSS

需要注意的地方

結語：

Chrome Extension 開發實戰篇 24 - 讀取 RSS

可能會遇到的問題

使用 Framework

結語：

Chrome Extension 開發實戰篇 23 - 建立專案雛形

修改專案雛形

將專案載入 Chrome Browser

結語：

2014年11月9日星期日