Help us understand the problem. What is going on with this article?

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

More than 5 years have passed since last update.

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

quicktabswitch.gif

ソースコード

Chrome ウェブストア

操作方法

インストール後、右上にアイコンが表示されるようになります。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 に下記のように書く。この場合は CtrlShiftX のキーを同時に押されたときに、拡張機能のポップアップが表示される。
  ...
  "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});
suzuki86
ソフトウェアエンジニアです。 最近では、企業のテックブログの新着記事を横断的に見られるサービスを作りました。 https://techpost.wbsrv.net/
https://suzuki86.com
timers
グローバルな家族アプリFammを開発運営しているスタートアップです。
https://timers-inc.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away