このページは Cloud Translation API によって翻訳されました。

タブを管理する

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

概要

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

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

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 を実行できない点が 1 つあります。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>

ヒント: スクリプトに type="module" を追加すると、最上位の await を使用できます。タグ。

次に、ポップアップのスタイルを設定します。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 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 コンストラクタ。
要素のセットを append() 呼び出しの引数に変換するために使用される Spread 構文。

タブをグループ化する

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、ポピッチャーの.html、images のフォルダ。

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

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

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

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

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

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

🙁? 潜在的な強化

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

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

構築を続けましょう。

以上でこのチュートリアルは終了です 🎉?。次のコースを修了して、引き続きスキルを磨きましょう。このシリーズのチュートリアル:

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

引き続き探求を

この Chrome 拡張機能がお役に立てば幸いです。今後も引き続き Chrome を活用してください。学びます。次の学習プログラムをおすすめします。

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

タブを管理する

概要

始める前に

拡張機能を作成する

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

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

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

権限をリクエストする

タブに対してクエリを実行する

タブにフォーカスする

タブをグループ化する

動作をテストする

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

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

🙁? 潜在的な強化

構築を続けましょう。

引き続き探求を

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