ChromeExtension(拡張機能)の開発でショートカットを実装する
この記事ではChrome Extension(拡張機能)のManifest v3の開発で、ショートカット機能をどう実装するかを知ることができます。
公開日2022.05.14
更新日2022.05.14
はじめに
Chrome Extension(拡張機能)はキーボードショートカットを使った制御を実装できます。
この記事では、その手法を知ることができます。
想定読者
- Chrome Extensionでアプリを開発している人
- Manifest v3で実装中
- ショートカットをつかった拡張機能の開発をしたい人
前提知識
- Chrome Extensionの開発の基本構造を理解している。
- manifest.json
- service_worker
- content_script
- 等
２通りの実装方法
実装方法は２通りあります。
実装方法1.
「ポップアップを起動するだけのショートカットをつくる」... ActionCommandsで実装
「ポップアップを起動するだけのショートカットをつくる」... ActionCommandsで実装
実装方法2.
「キーボード入力に応じて、ServiceWorkerでハンドリングする」... Basic Commandsで実装
「キーボード入力に応じて、ServiceWorkerでハンドリングする」... Basic Commandsで実装
【実装方法1】ポップアップを起動するだけのショートカットをつくる
最もシンプルなパターンです。ポップアップの起動のためのショートカットをつくります。この実装はAction commandsと呼びます。
やり方はとても簡単です。
manifest.jsonに記述
manifest.json に commands を追加し _execute_action を定義します。
仮に Ctrl+Shift+0 というコマンドを登録する場合下記になります。
{
(略)
"commands": {
"_execute_action": {
"suggested_key": {
"windows": "Ctrl+Shift+0",
"mac": "Command+Shift+0",
"chromeos": "Ctrl+Shift+0",
"linux": "Ctrl+Shift+0"
}
}
}
(略)
}
記法の制約があるので、最後に説明します。
manifest.jsonを記述したら、chrome://extensions/のリロードボタンを押して再読み込みをしましょう。再読み込みをしないと反映されませんので注意です。
この方法で実装すると、ショートカット押下でアプリを起動させることができます。
アプリ起動にフックして、何かアクションをしたい場合等はこの実装で十分です。それ以上の機能を実装したい場合は、この手段だと不十分です。次に説明する「実装方法2」で実装していきましょう。
【実装方法2】起動時のショートカットをアサインする。
manifest.jsonに記述
この実装はBasic Commandsと呼びます。
manifest.json に commands を追加し 任意の名前のオブジェクト を定義します。
仮に Ctrl+Shift+1 というコマンドを登録する場合下記になります。
{
(略)
"commands": {
"runSomething": { // ショートカット名
"suggested_key": {
"default": "Ctrl+Shift+1",
"mac": "Command+Shift+1"
},
"description": "Run something"// ショートカットの説明文
}
}
(略)
}
manifest.jsonを記述したら、拡張機能の再読み込みをしましょう。(再読み込みをしないと反省されません)
この実装だけだと Ctrl+Shift+1 を入力しても、何も反応がありません。
Basic Commandsの場合は制御を自前実装する必要があります。
実装は ServiceWorker に記述します。
ServiceWorkerに記述
chrome.commands.onCommand.addListener((command) => {
switch (command) {
case "runSomething": // 設定したショートカット名
// やりたい処理を記述
break;
}
});
と、こんな感じでやりたい処理を記述すればOKです。
実装が完了したら、拡張機能の再読み込みをお忘れなく。
登録されたショートカットは下記で確認できます。
chrome://extensions/shortcuts にアクセスすると利用中の拡張機能のショートカット登録状況を閲覧できます。
ショートカットが他のchrome拡張機能と衝突していた場合、登録されません。その状況を対策したい場合は、下記の処理を実装する必要があります。
ショートカットが衝突した時
これらのショートカットは、インストール時に登録されます。登録されなかった場合、下記の実装でハンドリングできます。厳密にショートカットのハンドリングをしたい場合は実装を検討しましょう。
ほぼ公式ガイドの引用です。
// ServiceWorker.js
chrome.runtime.onInstalled.addListener((reason) => {
if (reason === chrome.runtime.OnInstalledReason.INSTALL) {
checkCommandShortcuts();
}
});
function checkCommandShortcuts() {
chrome.commands.getAll((commands) => {
let missingShortcuts = [];
for (let {name, shortcut} of commands) {
if (shortcut === '') {
missingShortcuts.push(name);
}
}
if (missingShortcuts.length > 0) {
// もしショートカットが登録されなかった場合のハンドリングをここに書く
}
});
}
「もしショートカットが登録されなかった場合のハンドリングをここに書く」の箇所に、ハンドリングの実装を書きます。
ショートカット登録できなかった旨をユーザーに伝えるために、「content_script.jsにメッセージを送信して、トーストを表示する」とか「chrome.stroageにフラグを格納しておいて、popupやinstall直後のページで表示する」などの処理パターンが考えられます。
使用できるキーの制約
ショートカット登録にあたって制約もあります。正確には公式 https://developer.chrome.com/docs/extensions/reference/commands/#key-combinations を読んでいただきたいですが、ざっくりサマると下記です。
- Ctrl(macは⌘) または Alt を必ずショートカットに含める必要があります。
- メディアキーは使えない(fnなど。未確認。)
- Shift キーは使えます。
- OSやChromeで実装されているショートカットキーは上書きできません。
DGGR Bookmarkのご紹介
今回の記事で記述したやり方で、拡張機能を作っています。
ショートカット実装の、サンプルとしてもご覧いただけます。
👇 ショートカット押下で、すぐ起動する、の例(伝わりづらい....)
DGGR(ディガー) Bookmarkといいます。
軽くて早いのが特徴のブックマークツールです。
競合サイトリストや参考サイトリストをまとめる作業を楽にします。
参考サイトの抽出は、ノートパッドにURLをコピーするなどしてまとめているかと思いますが、それを楽にするためのツールです。
フィードバックをいただけますと幸いです！
🙏pc・macでchromeをお使いの方のみご利用可能です🙏
拡張機能開発の相談はこちら
拡張機能の開発も承っております。
Hubspot等のSaaSによく見られる、既存のWebシステムと連携した拡張機能の他、社内の作業工数を楽にするDXのための拡張機能などなど承っております。
よろしければご相談ください。
hanzochang
代表取締役 半澤勇大
慶應義塾大学卒業後、AOI Pro.にてWebプランナーとして勤務。ナショナルクライアントのキャンペーンサイトの企画・演出を担当。その後開発会社に創業メンバーとして参加。Fintech案件や大手企業のDXプロジェクトに関わり、その後個人事業主として独立。2023年にWeb3に特化した開発会社として法人化。
2017年ごろより匿名アカウントでCryptoの調査等を行い、ブロックチェーンメディアやSNSでビットコイン論文等の図解等を発信。
2017年ごろより匿名アカウントでCryptoの調査等を行い、ブロックチェーンメディアやSNSでビットコイン論文等の図解等を発信。
© 2023 hanzochang