Chrome Extension 進階 - 使用快速鍵重新載入 Extension

在開發 Extension 時，有個麻煩的地方，每次修改後都要開啟擴充功能的管理頁面去重新載入。為了簡化重新載入的步驟，所以使用快速鍵來重新載入 Extension。

這篇就以一個簡單的例子來示範如何使用快速鍵重新載入 Extension。
專案範例 shortcut-for-reloading-extensions

使用快速鍵

step 1. 設定
若要使用快速鍵，需在 manifest.json 裡加入快速鍵的定義，如下所示。

manifest.json

{
  "name" : "shortcut for reloading extensions",
  ...
  "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"
    }
  },
  ...
}

step 2. 監聽快速鍵
在背景執行緒 (background.js) 加入監聽事件，如下所示。
註 1： commandsListener.js 也是背景執行緒之一。(背景執行緒可拆成多個檔案)
註 2： 若監聽事件沒有觸發，請至擴充功能管理頁面(chrome://extensions/)下方，打開「鍵盤快速鍵」檢查是否有設定值。

commandsListener.js

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

重新載入 Extension

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

commandsListener.js

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

總結：

看完這篇，你應該知道如何使用快速鍵重新載入 Extension 來加快你的開發速度。
如果你在練習上或其他有關於快速鍵的問題，歡迎在下面留言。

參考來源：

https://developer.chrome.com/extensions/commands.html
https://developer.chrome.com/extensions/runtime.html#method-reload