キーの入力だけで目的のタブに素早く切り替えられる Google Chrome 拡張つくりました

開いているタブの数が増えてくると切り替えたいタブを認識するのが面倒になります。タブを切り替えるショートカットはデフォルトで用意されていますが、目的のタブにピンポイントにジャンプすることができなかったので、ピンポイントなタブの切り替えをキーの入力だけでできる拡張機能を作りました。目的の位置にキーで移動する手法は vim-easymotion で体験して感動したのでそれを真似ました。

ソースコード

• https://github.com/suzuki86/QuickTabSwitch

Chrome ウェブストア

• https://chrome.google.com/webstore/detail/quicktabswitch/pnelkdgjfmmkcogamkjkcajgdkomjgco?hl=ja

操作方法

インストール後、右上にアイコンが表示されるようになります。Ctrl+Shift+xでタブ一覧が表示されるので、対応するキーを押すと該当のタブにジャンプします。

作ったうえで得られた知識

ブラウザの右上にアイコンをさせて、それをクリックしたらポップアップを表示させる

• manifest.json に下記を書くと、images/16.png がアイコンとして表示され、それをクリックすると browser_action.html の内容が表示される。

  ...
  "browser_action": {
    "default_icon": "images/16.png",
    "default_popup": "browser_action.html"
  },
  ...

ショートカットキーで拡張機能を実行できるようにする

• manifest.json に下記のように書く。この場合は Ctrl と Shift と X のキーを同時に押されたときに、拡張機能のポップアップが表示される。

  ...
  "commands": {
    "_execute_browser_action": {
      "suggested_key": {
        "default": "Ctrl+Shift+X",
        "windows": "Ctrl+Shift+X",
        "mac": "Ctrl+Shift+X",
        "linux": "Ctrl+Shift+X"
      },
      "description": "Trigger",
      "global": true
    }
  }
  ...

開いているタブの一覧を取得する

• chrome.tabs.query メソッドの第 2 引数にコールバック関数を渡すと、そのコールバック関数にタブの情報が格納されたオブジェクトが渡される。例えば tabs[i].title で i 番目のタブのタイトルを取得できるし、tabs[i].favIconUrl で i 番目のタブのファビコンの URL を取得できる。

chrome.tabs.query({}, function(tabs){
    ...
});

アクティブなタブを切り替える

• 下記のようにすると、タブID (tabId) で指定したタブがアクティブになる。(そのタブに切り替える。)

chrome.tabs.update(tabId, {selected: true});