Chrome 拡張機能のショートカットを切り替える方法

Google Chromeの拡張機能の［キーボードショートカット］にショートカットキーを表示される手順について備忘録的に投稿しておきます。

［拡張機能］画面［キーボードショートカット］

Chromeの［拡張機能］画面にある［キーボードショートカット］に項目を追加する方法を紹介していきます。

ショートカットの実装

操作を実行するためのショートカットを拡張機能に実装していきます。

具体的には次の手順で行います。

1. 必要なファイルとフォルダーを作成しておきます。（拡張子が無いのはフォルダー）

[ShortCut]
|-[icons]
| |-[icon-48.png]
| |-[icon-128.png]
|-[manifest.json]
|-[background.js]

2.［manifest.json］を編集して次のコードを追加します。

{
  "name": "ショートカットキー",
  "manifest_version": 3,
  "version": "0.1",
  "permissions": ["activeTab", "scripting"],
  "action": {
    "default_icon": "icons/icon-48.png"
  },
	
  "commands": {
    "HelloWorld": {
      "suggested_key": {
        "default": "Alt+Shift+H"
      },
      "description": "ほげほげ"
    }
  },

  "icons": {
    "48": "icons/icon-48.png",
    "128": "icons/icon-128.png"
  },

  "background": {
    "service_worker": "background.js"
  }
}

3. 実際に動作するスクリプトを［background.js］を編集して次のコードを追加します。

ショートカットキーが押された時にコンソールに “Hello World!” を出力する簡単なコードになっています。

'use strict';
{
  chrome.commands.onCommand.addListener(function (command) {
    if(command === "HelloWorld") {
      console.log("Hello World!");
    }
  });
}

4.［拡張機能］画面に［ShortCut］フォルダーをドラッグしてインストールします。