ショートカットキー（キーバインド）

ChromeExtensions JavaScript

ショートカットキーから拡張機能を実行したい。

結論

大きく分けて方法は２つ。

  • commands を定義する。

    • 標準のキーバインドが優先される。 バインド可能なキーが限定される。

  • content_script がキーイベントをハンドルする。

    • 自由にバインドできる。 標準のキーバインドを上書きしてしまうので要注意！

方法１: commands を定義する

  • Menifest に commands (suggested_key) を定義する。

  • background に chrome.commands.onCommand を実装する。

Manifest.json

  "background": {
    "scripts": [ "background.js" ]
  },

  "commands": {
    "command1": {
      "suggested_key": {
        "default": "Ctrl+Shift+Y"
      },
      "description": "command1"
    }
  },

background.js

chrome.commands.onCommand.addListener(function(command) {
  if (command === 'command1') {
     console.log('Do your stuff');
  }
});

方法２: content_script が key イベントをハンドルする

Manifest.json

  "content_scripts": [{
    "matches": [ "*://*/*" ],
    "js": [ "content.js" ]
  }],

content_script

window.addEventListener('keydown', function(event) {
  if ((!isMac && !event.ctrlKey) || (isMac && ! event.metaKey)) return;
  if (!event.shiftKey) return;
  var key = event.key
  which (key) {
  case 89: //'Y'
    console.log('Do your stuff');
    break;
  }
}, true);

keyCode

KeyboardEvent.keyCode は非推奨。

代わりに、KeyboardEvent.key を使うこと、と書いてある（説明不足）。

押されたキーは KeyboardEvent.code を使う仕様である。

手元の Chrome 47.0.2526.80 では、

  • keyCode : 現役

  • key と code : 未実装

のため、keyCode によって判定した。

将来的には、次のように直さなければならないのかも知れない：

  which (event.code) {
  case 'KeyY':
    console.log('Do your stuff');
    break;
  }

Gecho 系ではすでに key と code が実装されている。

簡単にストラテジーを切り替えられるライブラリがあるのかも知れない

（が、目的は Chrome 拡張なので調査していない）。