タブを管理する

最初のタブ マネージャーを作成します。

概要

このチュートリアルでは、Chrome 拡張機能と Chrome ウェブストアのドキュメント タブを整理するためのタブ マネージャーを作成します。

Tabs Manager 拡張機能のポップアップ
Tabs Manager 拡張機能

このガイドでは、次の操作を行う方法について説明します。

  • Action API を使用して拡張機能のポップアップを作成します。
  • Tabs API を使用して特定のタブをクエリします。
  • ホスト権限を制限することで、ユーザーのプライバシーを保護します。
  • タブのフォーカスを変更します。
  • タブを同じウィンドウに移動してグループ化します。
  • TabGroups API を使用してタブグループの名前を変更します。

始める前に

このガイドは、基本的なウェブ開発の経験があることを前提としています。拡張機能の開発ワークフローの概要については、Hello World をご覧になることをおすすめします。

拡張機能をビルドする

まず、拡張機能のファイルを保持する tabs-manager という新しいディレクトリを作成します。必要に応じて、GitHub で完全なソースコードをダウンロードできます。

ステップ 1: 拡張機能のデータとアイコンを追加する

manifest.json という名前のファイルを作成し、次のコードを追加します。

{
  "manifest_version": 3,
  "name": "Tab Manager for Chrome Dev Docs",
  "version": "1.0",
  "icons": {
    "16": "images/icon-16.png",
    "32": "images/icon-32.png",
    "48": "images/icon-48.png",
    "128": "images/icon-128.png"
  }
}

これらのマニフェスト キーの詳細については、拡張機能のメタデータとアイコンについて詳しく説明している読書時間のチュートリアルをご覧ください。

images フォルダを作成し、そのフォルダにアイコンをダウンロードします。

ステップ 2: ポップアップを作成してスタイルを設定する

Action API は、拡張機能のアクション（ツールバー アイコン）を制御します。ユーザーが拡張機能のアクションをクリックすると、コードが実行されるか、この例のようにポップアップが開きます。まず、manifest.json でポップアップを宣言します。

{
  "action": {
    "default_popup": "popup.html"
  }
}

ポップアップはウェブページと似ていますが、インライン JavaScript を実行できないという点が異なります。新しく popup.html ファイルを作成し、次のコードを追加します。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./popup.css" />
  </head>
  <body>
    <template id="li_template">
      <li>
        <a>
          <h3 class="title">Tab Title</h3>
          <p class="pathname">Tab Pathname</p>
        </a>
      </li>
    </template>

    <h1>Google Dev Docs</h1>
    <button>Group Tabs</button>
    <ul></ul>

    <script src="./popup.js" type="module"></script>
  </body>
</html>

次に、ポップアップのスタイルを設定します。新しく popup.css ファイルを作成し、次のコードを追加します。

body {
  width: 20rem;
}

ul {
  list-style-type: none;
  padding-inline-start: 0;
  margin: 1rem 0;
}

li {
  padding: 0.25rem;
}
li:nth-child(odd) {
  background: #80808030;
}
li:nth-child(even) {
  background: #ffffff;
}

h3,
p {
  margin: 0;
}

ステップ 3: タブを管理する

Tabs API を使用すると、拡張機能でブラウザのタブを作成、クエリ、変更、並べ替えを行うことができます。

権限をリクエストする

Tabs API の多くのメソッドは、権限をリクエストせずに使用できます。ただし、タブの title と URL にアクセスする必要があります。これらの機密性の高いプロパティには権限が必要です。"tabs" 権限をリクエストすることもできますが、この場合、すべてのタブの機密性の高いプロパティにアクセスできるようになります。特定のサイトのタブのみを管理するため、狭いホスト権限をリクエストします。

ホスト権限を絞り込むことで、特定のサイトに昇格した権限を付与し、ユーザーのプライバシーを保護できます。これにより、title プロパティと URL プロパティ、および追加の機能にアクセスできるようになります。ハイライト表示されたコードを manifest.json ファイルに追加します。

{
  "host_permissions": [
    "https://developer.chrome.com/*"
  ]
}

💡 タブの権限とホストの権限の主な違いは何ですか？

"tabs" 権限とホスト権限にはどちらにも欠点があります。

"tabs" 権限により、拡張機能はすべてのタブのセンシティブ データを読み取ることができます。この情報は、ユーザーの閲覧履歴の収集に使用される可能性があります。そのため、この権限をリクエストすると、インストール時に Chrome に次の警告メッセージが表示されます。

タブの権限に関する警告ダイアログ

ホスト権限により、拡張機能は一致するタブの機密性の高いプロパティを読み取ってクエリし、これらのタブにスクリプトを挿入できます。インストール時に次の警告メッセージが表示されます。

ホスト権限の警告ダイアログ

この警告によりユーザーが不安になる可能性があります。オンボーディング エクスペリエンスを向上させるには、オプションの権限を実装することをおすすめします。

タブをクエリする

tabs.query() メソッドを使用して、特定の URL からタブを取得できます。popup.js ファイルを作成し、次のコードを追加します。

const tabs = await chrome.tabs.query({
  url: [
    "https://developer.chrome.com/docs/webstore/*",
    "https://developer.chrome.com/docs/extensions/*",
  ]
});

💡 ポップアップで Chrome API を直接使用できますか？

ポップアップやその他の拡張機能ページは、chrome スキーマから提供されるため、任意の Chrome API を呼び出すことができます。例: chrome-extension://EXTENSION_ID/popup.html

タブにフォーカスする

まず、拡張機能はタブ名（含まれている HTML ページのタイトル）をアルファベット順に並べ替えます。リスト項目がクリックされると、tabs.update() を使用してそのタブにフォーカスし、windows.update() を使用してウィンドウを前面に表示します。popup.js ファイルに次のコードを追加します。

...
const collator = new Intl.Collator();
tabs.sort((a, b) => collator.compare(a.title, b.title));

const template = document.getElementById("li_template");
const elements = new Set();
for (const tab of tabs) {
  const element = template.content.firstElementChild.cloneNode(true);

  const title = tab.title.split("-")[0].trim();
  const pathname = new URL(tab.url).pathname.slice("/docs".length);

  element.querySelector(".title").textContent = title;
  element.querySelector(".pathname").textContent = pathname;
  element.querySelector("a").addEventListener("click", async () => {
    // need to focus window as well as the active tab
    await chrome.tabs.update(tab.id, { active: true });
    await chrome.windows.update(tab.windowId, { focused: true });
  });

  elements.add(element);
}
document.querySelector("ul").append(...elements);
...

💡 このコードで使用されている興味深い JavaScript

  • ユーザーの優先言語でタブ配列を並べ替えるために使用される Collator。
  • document.createElement() を使用して各アイテムを作成する代わりに、複製可能な HTML 要素を定義するために使用されるテンプレート タグ。
  • URL の作成と解析に使用される URL コンストラクタ。
  • 要素の Set を append() 呼び出しの引数に変換するために使用されるスプレッド構文。

タブをグループ化する

TabGroups API を使用すると、拡張機能でグループに名前を付け、背景色を選択できます。ハイライト表示されたコードを追加して、マニフェストに "tabGroups" 権限を追加します。

{
  "permissions": [
    "tabGroups"
  ]
}

popup.js で、次のコードを追加して、tabs.group() を使用してすべてのタブをグループ化し、現在のウィンドウに移動するボタンを作成します。

const button = document.querySelector("button");
button.addEventListener("click", async () => {
  const tabIds = tabs.map(({ id }) => id);
  if (tabIds.length) {
    const group = await chrome.tabs.group({ tabIds });
    await chrome.tabGroups.update(group, { title: "DOCS" });
  }
});

動作をテストする

プロジェクトのファイル構造が次のディレクトリ ツリーと一致していることを確認します。

タブ マネージャー フォルダの内容: manifest.json、popup.js、popup.css、popup.html、images フォルダ。

拡張機能をローカルで読み込む

デベロッパー モードでパッケージ化されていない拡張機能を読み込むには、Hello World の手順に沿って操作します。

ドキュメント ページをいくつか開く

次のドキュメントを別のウィンドウで開きます。

ポップアップをクリックします。次のようになります。

Tabs Manager 拡張機能のポップアップ
Tabs Manager 拡張機能のポップアップ

[タブをグループ化] ボタンをクリックします。次のようになります。

タブマネージャーのグループ化されたタブ
Tabs Manager 拡張機能を使用してグループ化されたタブ

🎯 潜在的な改善点

本日の学習内容に基づいて、次のいずれかを実装してみてください。

  • ポップアップのスタイルシートをカスタマイズします。
  • タブグループの色とタイトルを変更します。
  • 別のドキュメント サイトのタブを管理します。
  • グループ化されたタブのグループ解除のサポートを追加しました。

構築を続けましょう。

このチュートリアルを完了しました 🎉。このシリーズの他のチュートリアルを完了して、スキルを磨きましょう。

広告表示オプション 学習内容
読書時間 すべてのページに要素を自動的に挿入するには:
フォーカス モード 拡張機能のアクションをクリックした後に現在のページでコードを実行します。

もっと探す

この Chrome 拡張機能の作成を楽しんでいただけたなら幸いです。また、Chrome 開発の学習を継続していただくことを願っています。次の学習プログラムをおすすめします。

  • デベロッパー ガイドには、高度な拡張機能の作成に関連するドキュメントへのリンクが多数含まれています。
  • 拡張機能は、オープンウェブで利用できるものよりも強力な API にアクセスできます。Chrome API のドキュメントでは、各 API について説明しています。