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

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

概要

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

</ph> <ph type="x-smartling-placeholder">

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

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

始める前に

このガイドは、基本的なウェブ開発の経験があることを前提としています。詳しくは、 拡張機能の開発ワークフローの概要を紹介する 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 ファイル以外のファイル形式も使用できます。

💡? サイズが異なるアイコンはどこに表示されますか？

ステップ 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> <ph type="x-smartling-placeholder">

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

ステップ 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> を返します。

動作をテストする

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

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

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

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

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

• Chrome ウェブストアで公開する
• コンテンツ スクリプトについて

次のようになります。

</ph> <ph type="x-smartling-placeholder">をご覧ください。

🙁? 潜在的な強化

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

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

構築を継続する

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

引き続き探求を

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

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