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

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

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

概要

このチュートリアルでは、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> を返します。

動作をテストする

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

読み取り時間フォルダの内容: manifest.json、scripts フォルダの content.js、images フォルダ。

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

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

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

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

次のようになります。

ウェルカムページの閲覧時間 — 読み上げ時間拡張機能が表示された拡張機能のウェルカムページ

機能強化の例

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

他の Chrome デベロッパーページをサポートするには、manifest.json に別の一致パターンを追加します（例: Chrome DevTools 、ワークボックス）。
お気に入りのブログやドキュメントサイトへの閲覧時間を計算する新しいコンテンツスクリプトを追加する。

構築を継続する

これでこのチュートリアルは完了です🎉?。このシリーズの他のチュートリアルも完了して、スキルを磨きましょう。

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

引き続き探求を

この Chrome 拡張機能の作成がお役に立てば幸いです。これからも Chrome 開発の学習を続けてください。次の学習プログラムをおすすめします。

デベロッパーガイドには、高度な拡張機能の作成に関するドキュメントへの追加リンクが多数あります。
拡張機能では、オープンウェブで利用できない強力な API にアクセスできます。Chrome API のドキュメントで各 API を確認できます。