最初のタブ マネージャーを作成します。
概要
このチュートリアルでは、Chrome 拡張機能と Chrome ウェブストアのドキュメント タブを整理するためのタブ マネージャーを作成します。
<ph type="x-smartling-placeholder">![タブ マネージャー拡張機能のポップアップ](https://developer.chrome.google.cn/static/docs/extensions/get-started/tutorial/popup-tabs-manager/image/tabs-manager-extension-po-725ac725aaa4d.png?authuser=0000&hl=ja)
このガイドでは、次の方法について説明します。
- 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>
次に、ポップアップのスタイルを設定します。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" });
}
});
動作をテストする
プロジェクトのファイル構造が次のディレクトリ ツリーと一致していることを確認します。
拡張機能をローカルに読み込む
パッケージ化されていない拡張機能をデベロッパー モードで読み込むには、Hello World の手順を行います。
ドキュメント ページをいくつか開く
次のドキュメントを別々のウィンドウで開きます。
ポップアップをクリックします。次のようになります。
<ph type="x-smartling-placeholder">![タブ マネージャー拡張機能のポップアップ](https://developer.chrome.google.cn/static/docs/extensions/get-started/tutorial/popup-tabs-manager/image/tabs-manager-extension-po-f958d72e1a9ae.png?authuser=0000&hl=ja)
[タブをグループ化] をクリックする] ボタンを離します。次のようになります。
<ph type="x-smartling-placeholder">![タブマネージャーのグループ化されたタブ](https://developer.chrome.google.cn/static/docs/extensions/get-started/tutorial/popup-tabs-manager/image/tabs-manager-grouped-tabs-65bdf282bdf98.png?authuser=0000&hl=ja)
🙁? 潜在的な強化
本日の学習内容に基づいて、次のいずれかを実装してください。
- ポップアップ スタイルシートをカスタマイズします。
- タブグループの色とタイトルを変更します。
- 別のドキュメント サイトのタブを管理する。
- グループ化したタブのグループ化を解除するためのサポートを追加しました。
構築を続けましょう。
以上でこのチュートリアルは終了です 🎉?。次のコースを修了して、引き続きスキルを磨きましょう。 このシリーズのチュートリアル:
広告表示オプション | 学習内容 |
---|---|
読み上げ時間 | すべてのページに要素を自動的に挿入するため。 |
フォーカス モード | 拡張機能のアクションをクリックした後に、現在のページでコードを実行する。 |
引き続き探求を
この Chrome 拡張機能がお役に立てば幸いです。今後も引き続き Chrome を活用してください。 学びます。次の学習プログラムをおすすめします。
- デベロッパー ガイドには、ドキュメントへの多数のリンクが追加で記載されています。 高度な拡張機能の作成に関連する質問です
- 拡張機能では、オープンウェブで利用できるものを超えた強力な API にアクセスできます。 Chrome API のドキュメントでは、各 API について説明しています。