Chrome Extension 開發經驗篇 12 - 如何快速重新載入 Extension？

開發 Extension 時，通常都是寫一點點程式碼，就測試看看有沒有問題，但只要有修改程式就必須到擴充功能管理頁重新載入 Extension，這樣在開發上就不是那麼順暢，為了要更快速的重新載入 Extension，有一個方法就是在開發時期設定快速鍵，只要按下某個組合鍵就會重新載入 Extension。

設定快速鍵

(範例：shortcut-for-reloading-extensions)
Step 1. 在設定檔中定義快速鍵和後台頁面(或事件頁面)。

manifest.json

{
  ...
  "commands" : {
    "reload_extension" : {
      "suggested_key" : {
        "default" : "Ctrl+Shift+Q",
        "windows" : "Ctrl+Shift+Q",
        "mac" : "MacCtrl+Shift+Q",
        "chromeos" : "Ctrl+Shift+Q",
        "linux" : "Ctrl+Shift+Q"
      },
      "description" : "shortcut for reloading extensions"
    }
  },
  "background" : {
    "scripts" : ["commandsListener.js", ...],
  },
  ...
}

溫馨小提醒：Mac 使用者注意！ 這裡是 Ctrl 鍵不是 Command 噢！ 按錯就變成登出了。您也可以設定別的組合，但記得別與其他已有的快速鍵衝突。

Step 2. 在後台頁面(或事件頁面)加入監聽事件

commandsListener.js

chrome.commands.onCommand.addListener(function(command)
{
  console.debug('command is : ' + command);
  ...
});

溫馨小提醒：若監聽事件沒有被觸發，請至擴充功能管理頁面(chrome://extensions/)下方，打開「鍵盤快速鍵」檢查是否有設定值，沒有的話就手動設定。如圖 1 所示。
圖1. 手動設定快速鍵

說明：在手動設定的地方，可以看到有個下拉式選單，預設為『在 Chrome 中』，意思就是只有在 Chrome Browser 下按快速鍵才會觸發。如果要在任何情況下，只要按了快速鍵就觸發的話，就設定為『通用』。

重新載入 Extension

在快速鍵的監聽事件裡加入重新載入 Extension 的程式碼。

commandsListener.js

chrome.commands.onCommand.addListener(function(command)
{
  ...
  if (command == 'reload_extension') {
    chrome.runtime.reload();
  }
});

溫馨小提醒：切記不要太頻繁的重新載入 Extension，Chrome Browser 會把 Extension 停用。如圖 2 所示。
圖2. 過於頻繁載入 Extension 所發生的警告

結語：

使用快速鍵來重新載入 Extension 後是不是更有效率了啊！如果您有問題，歡迎在下方留言。謝謝！