Chrome 拡張機能で複数タブの表示を切り替える

Google Chromeの拡張機能で表示されている複数タブを一定時間で切り替える手順について備忘録的に投稿しておきます。

複数タブの切り替え

今回のChrome 拡張機能では、表示されている複数タブを一定時間で切り替える動作を追加していきます。

タブの一覧を取得して一定時間で切り替え

表示されている複数タブを一定時間で切り返るChrome 拡張機能を作っていきます。

具体的には次の手順で行います。

1. 必要なファイルとフォルダーを作成しておきます。（拡張子が無いのはフォルダー）

[ALLTabs]
|-[icons]
| |-[icon-48.png]
| |-[icon-128.png]
|-[manifest.json]
|-[background.js]

2.［manifest.json］を編集して次のコードを追加します。

Chromeに表示されているタブを操作する権限として、”permissions” に “tabs” を追加します。

{
  "name": "オールタブ",
  "manifest_version": 3,
  "version": "0.1",
  "permissions": ["activeTab", "scripting", "tabs"],
  "action": {
    "default_icon": "icons/icon-48.png"
   },
  "icons": {
    "48": "icons/icon-48.png",
    "128": "icons/icon-128.png"
  },
  "background": {
    "service_worker": "background.js"
  }
}

3. 実際に動作するスクリプトを［background.js］を編集して次のコードを追加します。

今回は、アイコンをクリックした際に表示したタブを１秒間隔で切り替えていきます。

chrome.tabs.update(tab.id, {active: true});
chrome.tabs.update(tab.id, {selected: true});
chrome.tabs.update(tab.id, {highlighted: true});

“active”、”selected”、”highlighted” どれを指定してもタブが切り替えられます。（何が違うのか正直分かっていません）

'use strict';
{

  chrome.action.onClicked.addListener((tab) => {

    chrome.tabs.query({}, function(tabs) {
      tabs.forEach(function (tab) {
        chrome.tabs.update(tab.id, {active: true});
        chrome.tabs.update(tab.id, {selected: true});
        chrome.tabs.update(tab.id, {highlighted: true});
        sleep(1);
      });
    });
    
  });

  function sleep (sec) {
    var start = new Date().getTime();
    while (new Date() < start + sec * 1000) {}
  }

}

4.［拡張機能］画面に［AllTabs］フォルダーをドラッグしてインストールします。

5. Chromeのアドレスバーに表示させたアイコンをクリックすると、１秒間隔でタブが切り替えられます。

まとめ

今回は、Google Chromeの拡張機能で表示されている複数タブを一定時間で切り替える手順について書きました。

Chromeに表示されているタブを取得する権限として、［manifest.json］内に “permissions” に “tabs” を追加後に “chrome.tabs.update” でタブを切り替えることが可能です。

Google Chromeの拡張機能で複数タブを切り替える操作がしたい人の参考になれば幸いです。

スポンサーリンク

最後までご覧いただきありがとうございます。