ページに新しい要素を挿入する最初の拡張機能を作成します。
概要
このチュートリアルでは、Chrome 拡張機能と Chrome ウェブストアのドキュメント ページに推定所要時間を追加する拡張機能を作成します。
このガイドでは、次のコンセプトについて説明します。
- 拡張機能のマニフェスト。
- 拡張機能で使用するアイコンのサイズ。
- コンテンツ スクリプトを使用してページにコードを挿入する方法
- 一致パターンの使用方法
- 拡張機能の権限。
始める前に
このガイドは、基本的なウェブ開発経験があることを前提としています。拡張機能の開発ワークフローの概要については、Hello World のチュートリアルを確認することをおすすめします。
拡張機能を作成する
まず、拡張機能のファイルを格納する reading-time
という新しいディレクトリを作成します。必要に応じて、GitHub からソースコード全体をダウンロードすることもできます。
ステップ 1: 拡張機能に関する情報を追加する
必要なファイルはマニフェスト JSON ファイルのみです。拡張機能に関する重要な情報が含まれています。プロジェクトのルートに manifest.json
ファイルを作成し、次のコードを追加します。
{
"manifest_version": 3,
"name": "Reading time",
"version": "1.0",
"description": "Add the reading time to Chrome Extension documentation articles"
}
これらの鍵には、拡張機能の基本的なメタデータが含まれています。拡張機能ページと、公開時に Chrome ウェブストアで拡張機能がどのように表示されるかを管理します。詳細については、マニフェストの概要ページで "name"
、"version"
、"description"
の各キーをご確認ください。
💡? 拡張機能のマニフェストに関するその他の事実
- プロジェクトのルートに配置する必要があります。
- 必要なキーは、
"manifest_version"
、"name"
、"version"
のみです。 - 開発中のコメント(
//
)もサポートされますが、コードを Chrome ウェブストアにアップロードする前にコメントを削除する必要があります。
ステップ 2: アイコンを提供する
では、なぜアイコンが必要なのでしょうか?開発中はアイコンは省略可能ですが、Chrome ウェブストアで拡張機能を配布する場合はアイコンが必要です。また、拡張機能の管理ページなどの他の場所に表示されます。
images
フォルダを作成し、その中にアイコンを配置します。アイコンは GitHub からダウンロードできます。次に、ハイライト表示されたコードをマニフェストに追加して、アイコンを宣言します。
{
"icons": {
"16": "images/icon-16.png",
"32": "images/icon-32.png",
"48": "images/icon-48.png",
"128": "images/icon-128.png"
}
}
PNG ファイルの使用をおすすめしますが、SVG ファイル以外のファイル形式も使用できます。
💡? サイズが異なるアイコンはどこに表示されますか?
アイコンのサイズ | アイコンの使用 |
---|---|
16x16 | 拡張機能のページとコンテキスト メニューにあるファビコン |
32x32 | 多くの場合、Windows パソコンではこのサイズが必要です。 |
48x48 | [拡張機能] ページに表示されます。 |
128×128 | インストール時と Chrome ウェブストアに表示されます。 |
ステップ 3: コンテンツ スクリプトを宣言する
拡張機能は、ページのコンテンツを読み取って変更するスクリプトを実行できます。これはコンテンツ スクリプトと呼ばれます。ユーザーは隔離された環境に住み、ホストページや拡張機能のコンテンツ スクリプトと競合することなく、JavaScript 環境に変更を加えることができます。
次のコードを manifest.json
に追加して、content.js
というコンテンツ スクリプトを登録します。
{
"content_scripts": [
{
"js": ["scripts/content.js"],
"matches": [
"https://developer.chrome.com/docs/extensions/*",
"https://developer.chrome.com/docs/webstore/*"
]
}
]
}
"matches"
フィールドには、1 つ以上の一致パターンを指定できます。これにより、ブラウザはコンテンツのスクリプトを挿入するサイトを特定できます。一致パターンは、<scheme>://<host><path>
という 3 つの部分で構成されます。「*
」を含めることができます。
💡? この拡張機能で権限の警告が表示されますか?
ユーザーが拡張機能をインストールすると、ブラウザはその拡張機能でできることをユーザーに通知します。コンテンツ スクリプトは、一致パターンの条件を満たすサイトで実行する権限をリクエストします。
この例では、ユーザーには次の権限に関する警告が表示されます。
拡張機能の権限について詳しくは、権限を宣言してユーザーに警告するをご覧ください。
ステップ 4: 読書時間を計算して挿入する
コンテンツ スクリプトは、標準のドキュメント オブジェクト モデル(DOM)を使用して、ページのコンテンツを読み取り、変更できます。この拡張機能は、まずページに <article>
要素が含まれているかどうかを確認します。次に、この要素内のすべての単語をカウントし、合計読み上げ時間を表示する段落を作成します。
scripts
というフォルダ内に content.js
というファイルを作成し、次のコードを追加します。
const article = document.querySelector("article");
// `document.querySelector` may return null if the selector doesn't match anything.
if (article) {
const text = article.textContent;
const wordMatchRegExp = /[^\s]+/g; // Regular expression
const words = text.matchAll(wordMatchRegExp);
// matchAll returns an iterator, convert to array to get word count
const wordCount = [...words].length;
const readingTime = Math.round(wordCount / 200);
const badge = document.createElement("p");
// Use the same styling as the publish information in an article's header
badge.classList.add("color-secondary-text", "type--caption");
badge.textContent = `⏱️ ${readingTime} min read`;
// Support for API reference docs
const heading = article.querySelector("h1");
// Support for article docs with date
const date = article.querySelector("time")?.parentNode;
(date ?? heading).insertAdjacentElement("afterend", badge);
}
💡? このコードで使用される興味深い JavaScript
<article>
要素内の単語のみをカウントするために使用される正規表現。- 要素の後に読書時間ノードを挿入するために使用する
insertAdjacentElement()
。 - CSS クラス名を要素クラス属性に追加するために使用される classList プロパティ。
- 未定義または null のオブジェクト プロパティにアクセスするために使用するオプションのチェーン。
- null を coalescing する手法では、
<date>
が null または未定義の場合に<heading>
を返します。
動作をテストする
プロジェクトのファイル構造が次のようになっていることを確認します。
拡張機能をローカルで読み込む
パッケージ化されていない拡張機能をデベロッパー モードで読み込むには、開発の基本の手順に沿ってください。
拡張機能または Chrome ウェブストアのドキュメントを開く
以下のページを開いて、各記事の所要時間を確認できます。
次のようになります。
機能強化の例
本日の学習内容に基づいて、次のいずれかを実装してみてください。
- 他の Chrome デベロッパー ページをサポートするには、manifest.json に別の一致パターンを追加します(例: Chrome DevTools、ワークボックス)。
- お気に入りのブログやドキュメント サイトへの閲覧時間を計算する新しいコンテンツ スクリプトを追加する。
構築を継続する
これでこのチュートリアルは完了です🎉?。このシリーズの他のチュートリアルも完了して、スキルを磨きましょう。
延長 | ラボの内容 |
---|---|
フォーカス モード | 拡張機能のアクションをクリックした後に、現在のページでコードを実行するため。 |
タブ マネージャー | ブラウザのタブを管理するポップアップを作成するため。 |
引き続き探求を
この Chrome 拡張機能の作成がお役に立てば幸いです。これからも Chrome 開発の学習を続けてください。次の学習プログラムをおすすめします。
- デベロッパー ガイドには、高度な拡張機能の作成に関するドキュメントへの追加リンクが多数あります。
- 拡張機能では、オープンウェブで利用できない強力な API にアクセスできます。Chrome API のドキュメントで各 API を確認できます。