2014年11月9日 星期日

Chrome Extension 開發實戰篇 30 - 發佈到應用程式商店

專案打包完畢後，就要發佈到 Chrome 線上應用程式商店。

發佈到應用程式商店

Step 1. 進入 開發人員資訊主頁。
Step 2. 點選『新增商品』，然後上傳打包好的 zip 檔。
Step 3. 上傳成功後，接著填寫一些相關資訊和上傳圖片等。
Step 4. 基本資訊寫完後，點選下方的『預覽變更』。
Step 5. 預覽沒問題就可以點選『發佈變更』。
注意：之後更新的時候，只要上傳新版的 zip 檔再按『發佈變更』即可。不過要注意 extension 版號要比之前的大。
溫馨小提醒：若要發佈至線上應用程式商店需要付 5 美金的一次性費用，最多可發佈 20 個項目。

RSS Announcer 成果展示

從專案規劃到發佈至線上應用程式商店，共花了十幾天的時間，雖然還有一些問題沒有解決，像是編碼問題、中英文夾雜的文章下無法完美朗讀等。之後若有時間，筆者會繼續加強，有興趣的朋友也可以 Fork 回去改。(不過筆者覺得自己還很嫩，程式寫的不夠好，請包容啊！)

結語：

希望開發實戰篇能夠幫助您學習 extension。如果您有問題，歡迎在下方留言。謝謝！
張貼者： 於 沒有留言:
標籤： , , ,

Chrome Extension 開發實戰篇 29 - 專案打包

功能都做得差不多後，接下來要準備打包專案。將開發用的程式碼移除或加上註解，例如開發時會使用快速鍵載入 Extension。
說明：專案打包的用意是要準備上傳到應用程式商店。

專案打包的方式

以下是筆者平常打包的方式，不是一定要這麼做才行，所以參考就好。
Step 1. 另外建立一個資料夾 "ProjectName_Upload"，把專案下所有的檔案複製過去。
Step 2. 把 "ProjectName_Upload" 資料夾下不必要的檔案移除。
Step 3. 將專案壓縮至 zip。這裡需注意一點，壓縮時要在 manifest.json 同層目錄中壓縮，也就是說 zip 壓縮檔內第一層必須含有 manifest.json 設定檔，不然在上傳到應用程式商店時會載入失敗。
補充：如果覺得專案大小還是太大，可以自行將 javascript 和 css 最小化，不過要記得測試最小化後還能正常運作。
溫馨小提醒：manifest.json 設定檔內不可有註解的程式碼，不然在上傳到應用程式商店時會載入失敗。

結語：

如果您有問題，歡迎在下方留言。謝謝！
張貼者： 於 沒有留言:
標籤： , , ,

Chrome Extension 開發實戰篇 28 - 客製化選項設定

有了語音朗讀的功能之後，還可以加入客製化的選項設定，讓使用者自行決定朗讀者、速率、音調、音量。

取得朗讀者列表

呼叫 chrome.tts.getVoices 可取得所有聲音。
chrome.tts.getVoices(function (voices) {
    // to do something
});

客製化語音設定

在呼叫 chrome.tts.speak 時可以設定朗讀者、速率、音調、音量。
chrome.tts.speak(text, {
  voiceName: 'Google 中国的',
  gender: 'female',
  lang: 'zh-CN', 
  rate: 1.0, 
  pitch: 1.0,
  volume: 1.0,
  enqueue: true
}, function() {
  // callback
});
說明：
rate 範圍為 0.1 ~ 10.0，但大部份的語音最高只有 3.0。
pitch 範圍為 0 ~ 2。
volume 範圍為 0 ~ 1。
rate, pitch, volume 三個預設值都為 1.0。
溫馨小提醒：雖然有很多聲音可以選擇，但如果聲音和文字的語言不同，念出來的會不如預期。

結語：

在多語言的文章下，要完美的朗讀就需要斷詞和語言辨識的幫助。如果您有問題，歡迎在下方留言。謝謝！
張貼者： 於 沒有留言:
標籤： , , ,

Chrome Extension 開發實戰篇 27 - tts 語音

有了通知訊息之後，接下來要來實作這個專案最重要的語音部分了。

從通知訊息播放

通知訊息會告知使用者目前最新的 RSS 文章，既然有通知，當然就需要有後續的動作，所以將透過通知訊息上的播放按鈕讓使用者播放 RSS。
Step 1. 建立通知訊息時，加入按鈕。
event_page.js
var options = {
    ...
  type: 'basic',
  iconUrl: 'icons/icon48.png',
  title: '通知標題',
  message: '通知訊息',
    buttons: [
    {
        title: '播放'
    }
  ],
  ...
};
chrome.notifications.create('myNotificationId', options, function () {});
溫馨小提醒：一個通知訊息最多能提供 2 個按鈕。
Step 2. 加入按鈕的監聽事件。
event_page.js
chrome.notifications.onButtonClicked.addListener(function (notificationId, buttonIndex) {
  if (notificationId === 'myNotificationId') {
    if (buttonIndex === 0) {
      // to do something
    }
  }
});
Step 3. 使用 tts 語音播放。
event_page.js
chrome.tts.speak('要播放的文字', {
  lang: 'zh-CN', 
  rate: 1.0, 
  enqueue: true
}, function() {
  // callback
});
說明：enqueue 為 true 時，文字會先暫存，等播放中的文字念完後再接著念。

從彈出頁面播放

通知訊息只會停留幾秒後就自動關閉了，所以在彈出頁面的 RSS 文章列表需提供播放按鈕。
方法一：直接在彈出頁面呼叫 chrome.tts.* 的 api。
popup.js
chrome.tts.speak('要播放的文字', {
  lang: 'zh-CN', 
  rate: 1.0, 
  enqueue: true
}, function() {
  // callback
});
方法二：在彈出頁面呼叫事件頁面的 function。
popup.js
chrome.runtime.getBackgroundPage(function(window) {
  window.SpeakText('要播放的文字');
});
event_page.js
function SpeakText(text) {
  chrome.tts.speak(text, {
    lang: 'zh-CN', 
    rate: 1.0, 
    enqueue: true
  }, function() {
    // callback
  });
}

可能會遇到的問題

語音念到一半就停了：chrome.tts.speak 可念的長度有限，如果超過會自動停止，且在再次呼叫 chrome.tts.speak 時將沒有反應。筆者的解決方法是將文字切割再分段念。

結語：

善用 tts 語音功能可以增加互動性。如果您有問題，歡迎在下方留言。謝謝！
張貼者： 於 沒有留言:
標籤： , , ,
訂閱： 文章 (Atom)