Chrome允許Extension設定多組快捷鍵，當這個快捷鍵被觸發時，可以處理對應的操作。快捷鍵設定使用Command API。
下圖展示了，當我按下一組快速鍵時，右上角瀏覽器按鈕的ICON，進行了切換。
一個擴充工具可以擁有多組快速鍵的設定
但一個快速鍵的設定，最多只能有四個按鍵組成
支持的按鍵包括：
不允許使用涉及到 Ctrl+Alt 的組合鍵，以免與 AltGr 鍵衝突。除了 Alt 或 Ctrl 外還可以使用 Shift 鍵，但不是必須使用。組合鍵（例如 Ctrl）不能與多媒體按鍵一起使用。
出於輔助功能的原因，從 Chrome 33 開始不支持 Tab 鍵。
Mac的Ctrl會自動轉換成Command，如果要正確的指定Ctrl請使用MacCtrl
快捷鍵是有優先等級的，例如視窗管理的快捷鍵優先等級高尋擴充功能的快捷鍵指令，無法被覆蓋。
{
"name": "我的擴充功能",
...
"commands": {
"switch-icon": {
"suggested_key": {
"default": "Ctrl+Shift+Y",
"mac": "MacCtrl+Shift+Y"
},
"description": "切換Action的Icon"
},
"_execute_browser_action": {
"suggested_key": {
"windows": "Ctrl+Shift+Y",
"mac": "Command+Shift+Y",
"chromeos": "Ctrl+Shift+U",
"linux": "Ctrl+Shift+J"
}
},
"_execute_page_action": {
"suggested_key": {
"default": "Ctrl+Shift+E",
"windows": "Alt+Shift+P",
"mac": "Alt+Shift+P"
}
}
},
...
}
global可設定你的快捷觸發，是所有視窗(true)，或是目前使用者fcous的視窗(false)，但除了Chrome OS除外，目前還不允許全局設定。運用onCommand (chrome.commands.onCommand)監聽事件，callback將會接受快捷鍵的名稱作為回傳值，接著你就可以用回傳值判斷相應的動作：
chrome.commands.onCommand.addListener(function(command) {
console.log('Command:', command);
});
除了監聽快捷鍵的觸發，你還可以使用chrome.commands.getAll(function callback)
取得你擴充功能的快捷設定，如果你需要的話。
**要特別特別注意的一點是： _ 作為一個保留前綴，保留給Extension一些內建操作，而開發者定義的快速鍵名稱如果使用_**當前綴的話會導致錯誤。
"_execute_browser_action": {
"suggested_key": {
"windows": "Ctrl+Shift+Y",
"mac": "Command+Shift+Y",
"chromeos": "Ctrl+Shift+U",
"linux": "Ctrl+Shift+J"
}
},
"_execute_page_action": {
"suggested_key": {
"default": "Ctrl+Shift+E",
"windows": "Alt+Shift+P",
"mac": "Alt+Shift+P"
}
}
_execute_browser_action(執行瀏覽器按鈕) 以及 _execute_page_action(執行頁面按鈕)，只會觸發預定的彈出視窗角本，不會產生其他可處理的事件(例如onClicked)，所以如果你有些邏輯必需與彈出視窗一起載入，可考慮在彈出視窗腳本裡，使用 onDomReady事件來處理。
_execute_browser_action(執行瀏覽器按鈕) 以及 _execute_page_action(執行頁面按鈕)，會自動同步觸發你的browserAction.onClicked以及browserAction.onClicked事件。
要注意內容腳本無法直接使用Command的API，但利用Chrome的訊息API，可以讓事件腳本接受到快捷鍵觸發事件時，再把消息傳遞給內容腳本
只要有指定彈出視窗，
browserAction.onClicked以及browserAction.onClicked事件都會被它檔住，所以這裡無法觸法事件跟快捷鍵的設定沒有關係，我覺得官網只是想跟你陳述一個狀況。但說法容易讓人誤會快捷鍵不會觸發點擊事件。所以在這裡分成兩個狀況討論有助大家理解。
輸入chrome://extensions/ configureCommands，便可呼叫出設定快捷鍵的界面(如下圖)。使用者可以隨他的喜好覆蓋掉安裝檔中的設定。一組快捷鍵只能設定一次，重覆宣告同一組快捷鍵，會直接將前一個設定清空。(所以我推理如果兩個擴充功能打架，後者會覆蓋前者)
功能描述：利用快捷鍵改變載入網頁的背景顏色
{
"manifest_version": 2,
"name": "鐵人賽-Commands範例",
"description": "切換臉書背景顏色",
"version": "2.0",
"page_action": {
"default_title": "切換臉書背景顏色",
"default_icon": "icon.png"
},
"permissions": ["tabs","activeTab", "declarativeContent"],
"commands": {
"switch-fb-bg": {
"suggested_key": {
"default": "Ctrl+Shift+Y",
"mac": "MacCtrl+Shift+Y"
},
"description": "切換FB的背景顏色"
}
},
"background" : {
"scripts" : ["event.js"],
"persistent" : false
}
}
var toggleBg = false;
chrome.commands.onCommand.addListener(function(command) {
console.log('Command:', command);
if(command == "switch-fb-bg" && toggleBg){
chrome.tabs.executeScript({
code: 'document.body.style.backgroundColor="red"'
});
toggleBg = !toggleBg;
}
else if (command == "switch-fb-bg" && !toggleBg) {
chrome.tabs.executeScript({
code: 'document.body.style.backgroundColor="black"'
});
toggleBg = !toggleBg;
}
});
完整程式碼在Github
如果兩個擴充功能，擁有一樣的快捷鍵設定會如何？我試著去作了實驗，原本以為後載入的會蓋掉前者，但事實上我們可以看到以下圖為例，Commands範例A比Commands範例B還早載入到擴充功能力，但同樣的快捷鍵設定A被保留了，B被清掉成空白。
chrome.commands.onCommand可監聽快捷鍵的觸發，並以回傳的名稱判斷操作行為。_execute_browser_action(執行瀏覽器按鈕) 以及 _execute_page_action(執行頁面按鈕)會觸發對應的onClick事件。
iThome鐵人賽
看影片追技術