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

すべてのページでスクリプトを実行する

ページに新しい要素を挿入する最初の拡張機能を作成します。

概要

このチュートリアルでは、想定読み取り時間を Chrome 拡張機能に追加して、 Chrome ウェブストアのドキュメントページ。

このガイドでは、次のコンセプトについて説明します。

拡張機能のマニフェスト。
拡張機能で使用されるアイコンのサイズ。
コンテンツスクリプトを使用してページにコードを挿入する
一致パターンの使用方法
拡張機能の権限。

始める前に

このガイドは、基本的なウェブ開発の経験があることを前提としています。詳しくは、拡張機能の開発ワークフローの概要を紹介する Hello World チュートリアル。

拡張機能を作成する

まず、拡張機能のファイルを保持する reading-time という名前の新しいディレクトリを作成します。もし GitHub から完全なソースコードをダウンロードすることもできます。

ステップ 1: 拡張機能に関する情報を追加する

必要なファイルはマニフェスト JSON ファイルのみです。このファイルには、Terraform の状態に関するあります。プロジェクトのルートに 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	拡張機能のページとコンテキストメニューに表示されたファビコン。
32×32	Windows パソコンでは、多くの場合、このサイズが必要になります。
48×48	[拡張機能] ページに表示されます。
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 つ以上の一致パターンを指定できます。これによりブラウザからコンテンツスクリプトを挿入するサイトを特定します。一致パターンは次の 3 つの部分で構成されます。 <scheme>://<host><path>。「*」を含めることができます。あります。

💡? この拡張機能に権限の警告は表示されますか？

ユーザーが拡張機能をインストールすると、ブラウザは拡張機能の機能をユーザーに知らせます。コンテンツスクリプトは、一致パターンの条件を満たすサイトでの実行権限をリクエストします。

この例では、権限に関する次の警告がユーザーに表示されます。

読み上げ時間拡張機能をインストールする際にユーザーに表示される権限に関する警告 — </ph> 読み上げ時間の権限に関する警告。

拡張機能の権限について詳しくは、権限を宣言してユーザーに警告するをご覧ください。

ステップ 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 値結合は、<date> が null または未定義の場合に <heading> を返します。

動作をテストする

プロジェクトのファイル構造が次のようになっていることを確認します。

読み込み時間フォルダの内容（manifest.json、scripts フォルダ、images フォルダ）。

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

パッケージ化されていない拡張機能をデベロッパーモードで読み込むには、開発基本をご覧ください。

拡張機能または Chrome ウェブストアのドキュメントを開く

各記事の所要時間は、以下のページで確認できます。

次のようになります。

スタートページに表示された読書時間 — </ph> 読み上げ時間の延長を表示した拡張機能のスタートページ

🙁? 潜在的な強化

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

他の Chrome デベロッパーをサポートするため、manifest.json に別の一致パターンを追加します。（Chrome DevTools や Workbox など）にアクセスできます。
新しいコンテンツスクリプトを追加して、お気に入りのブログやドキュメントサイトをご覧ください

で確認できます。

構築を継続する

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

広告表示オプション	学習内容
フォーカスモード	拡張機能のアクションをクリックした後に、現在のページでコードを実行する。
タブマネージャー	ブラウザのタブを管理するポップアップを作成するため。

引き続き探求を

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

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