2019-03-09T14:03:57Z

Chrome・Firefoxの拡張機能にショートカットを実装

CopyTabTitleUrlにショートカット機能を実装したので、そのまとめ記事です。

ショートカット設定時の留意点

拡張機能にショートカットを設定した場合、以下の問題点がある。

  • 既に使用中のショートカットと被ってしまう
    • ユーザ毎に動作環境がことなり、事前に被るショートカットを予測しきれない
  • 意図せずショートカットを実行して、誤動作する
    • 使いもしないショートカットは邪魔なだけ
    • ただし、ユーザの熟練度が上がるとショートカットは必須機能になる

上記の点から以下の機能が必要と考えられます。

  • ショートカットを自由に設定可能とする
  • ショートカットの未設定を可能とする

拡張機能で実現する

Chrome

Chromeでは、標準で拡張機能のショートカット編集画面が準備されています。ただし、拡張機能の実行中にショートカットを変更する方法は準備されていないようです。

ショートカット編集画面
chrome://extensions/shortcuts

ショートカット編集画面

Firefox

Firefoxでは、commands.update関数とcommands.reset関数を使用して留意点を解決可能です。

commands.update関数によるショートカットなしの設定方法を発見できませんでした。そのため、ショートカットなしとするためには以下の設定をする必要があります。

  1. manifest.jsonsuggested_keyを設定なしとする
  2. backgroundからcommands.update関数でショートカットを初期設定する
    • 未設定の場合、初期化しない
  3. ショートカットなしを再設定する
    • commands.reset関数で初期化する
    • (ショートカットありの場合、commands.update関数で更新する)

サンプルコード

{
  ...

  "commands": {
    "ショートカット識別名": {
      "description": "ショートカット説明"
    }
  },

  ...
}
chrome.commands.onCommand.addListener(function(command) {
  if (command == 'ショートカット識別名') {
    // ショートカット処理
  }
});
const command0 = 直前の登録成功ショートカット文字列;
if (command0 != '') {
  chrome.commands.update({
    name: 'ショートカット識別名',
    shortcut: command0
  });
}
// テキストフィールド更新時の処理
function onUpdateShortcut() {
  const command0 = 直前の登録成功ショートカット文字列;
  const command1 = this.value;  // 新しいショートカット文字列
  try {
    if (command1 != '') {
      chrome.commands.update({name:'ショートカット識別名',shortcut:command1});
    } else {
      chrome.commands.reset('ショートカット識別名');
    }

    // ショートカット文字列の保存
    // ...

    // テキストフィールドの背景色をもとに戻す
    this.style.background = '';
  } catch (e) {
    // 直前の成功状態に戻す
    if (command0 != '') {
      chrome.commands.update({name:'ショートカット識別名',shortcut:command0});
    } else {
      chrome.commands.reset('ショートカット識別名');
    }
    // テキストフィールドの背景を赤とする
    // ユーザへのエラー出力
    this.style.background = '#ffeaee';
  }
}
document.getElementById('テキストフィールドID').addEventListener('input', onUpdateShortcut);
 コメントを書く