キー割り当てをカスタマイズする拡張機能を自作してみる

ブラウザで Ctrl + W (タブを閉じる) や Ctrl + R (リロード) といったショートカットキーを任意のキー1つで実行、又はスクリプトをキーに割り当てる拡張機能の自作に挑戦。
既にキーバインドを変更する拡張機能は存在しますが、その機能の殆どを使う事は無く、必要な機能だけを最小限の構成で実行する拡張機能の完成を目指します。

用意するファイルは manifest.json、contentscript.js、background.js の3つ。
manifest version 3 で作成して行きます。

manifest.json


{
  "name": "Key Binding Extension",
  "version": "1.0.0",
  "manifest_version": 3,
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts":[{
    "matches": ["<all_urls>"],
    "js": ["contentscript.js"]
  }]
}

manifest version 3 なので background は service_worker を使っています。
content_scripts は "<all_urls>" で全ての URL を指定。

contentscript.js


document.addEventListener('keydown', (e) => {
  switch (event.code) {
    case 'KeyU':
    navigator.clipboard.writeText(location.href);
    break;
    case 'Slash':
    chrome.runtime.sendMessage({type: 'reload'});
    break;
  }
});

case 'KeyU': で「U」キーが押された時に処理を実行。
contentscript 内で実行可能なもの、URLをクリップボードにコピーといった処理はここで実行させて終了します。

拡張機能 API を使ったり、タブ操作を行う処理は contentscript では行えないので、一度 background にメッセージを送り background.js で実行します。

background.js


chrome.runtime.onMessage.addListener((request, sender) => {
  if(request.type === 'reload'){
    chrome.tabs.reload();
    return true;
  }
});

「/」キーが押された時に、contentscript 側からメッセージを受け取りリロードを行っています。
contentscript.js に case '任意のキー': を追加し、background で処理するものは request のパターンを追加していけば、様々なショートカットをキー1つで実行させる事が出来ます。ただ、管理ページ等では無効化されます。

キーコードを調べる

このエリアをフォーカス(クリック)し、キーを入力。

入力結果:

拡張機能として読み込ませる

動作確認した環境は Microsoft Edge 95。
Edge の場合は拡張機能の管理ページを開き、「開発者モード」にチェックを入れ、「展開して読み込み」から上記 manifest.json、contentscript.js、background.js の3つのファイルの入ったフォルダを選択し、エラー無く読み込めたら成功です。