2019-01-09T13:15:17Z

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

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

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

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

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

上記の点から以下の機能が必要となります。

  • ショートカットを自由に設定可能とする
  • ショートカットを未設定を設定可能とする
    • 初期設定で未設定必須にする必要はないものと考える

拡張機能で実現する

Chrome

Chromeでは、標準で拡張機能のショートカット編集画面が準備されています。

オプション画面等からユーザを誘導することで、留意点の問題は解決可能です。

※Chromeでは、拡張機能の実行中にショートカットの変更する方法は発見できませんでした。

chrome://extensions/shortcuts

ショートカット編集画面

Firefox

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

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

  1. manifest.jsonsuggested_keyを設定なしとする
  2. backgroundからcommands.update関数でショートカットを初期設定する
    • persistentfalseを設定してはならない
  3. 未設定の場合、commands.reset関数で設定なしに初期化する

サンプルコード

{
  ...

  "commands": {
    "shortcut_action": {
      "description": "shortcut action."
    }
  },

  ...
}
// Firefox限定処理
if (isFirefox()) {
  if (valueSet.shortcut_command != '') {
    chrome.commands.update({
      'name': 'shortcut_action',
      'shortcut': '直前の登録成功ショートカット文字列'
    });
  }
}
chrome.commands.onCommand.addListener(function(command) {
  if (command == 'shortcut_action') {
    // ショートカット処理
  }
});
// テキストフィールド更新時の処理
function onUpdateShortcut() {
  // Firefox限定処理
  if (isFirefox()) {
    try {
      // テキストフィールドの値を取得
      const command = document.getElementById('shortcut_command').value;

      if (command != '') {
        chrome.commands.update({
          'name': 'shortcut_action',
          'shortcut': command
        });
      } else {
        chrome.commands.reset('shortcut_action');
      }

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

      // テキストフィールドの背景色をもとに戻す
      document.getElementById('shortcut_command').style.background = '';
    } catch (e) {
      // 直前の成功状態に戻す
      chrome.commands.update({
        'name': 'shortcut_action',
        'shortcut': '直前の登録成功ショートカット文字列'
      });
      // テキストフィールドの背景を赤とする
      // ユーザへのエラー出力
      document.getElementById('shortcut_command').style.background = '#ffeaee';
    }
  }
}
 コメントを書く