ブラウザ拡張機能は、サイトに美しさを加え、最適なユーザー エクスペリエンスを提供するために使用されるブラウザのアドオンです。
拡張機能開発におけるコンテンツ スクリプトの概念は、ブラウザ拡張機能の使用例を大幅に拡張するため、開発者にとって同様に習得すべき非常に役立つ知識です。

この記事は、コンテンツ スクリプトとは何か、およびその仕組みを紹介することを目的としています。 Chrome 拡張機能の基本について説明し、拡張機能で簡単なコンテンツ スクリプトを使用するデモ プロジェクトもあります。それでは始めましょう。

コンテンツスクリプトを理解する

まずコンテンツスクリプトとは何でしょうか？ コンテンツ スクリプトは、ブラウザ拡張機能を介して Web ページと対話するときに実行され、Web ページを変更する JavaScript コードです。

これは、Web ページのドキュメント オブジェクト モデルと対話することで簡単に実現できます。 Web ページのドキュメント オブジェクト モデルは、指定された Web ページの生の構造です。 Chrome コンテンツ スクリプトが問題の Web ページを変更する方法は、通常、インジェクションと呼ばれます。

コンテンツ スクリプトについて簡単に説明した後、それを Web ページに実装していきます。しかし、その前に、スクリプトを実行するブラウザ拡張機能をセットアップする必要があります。

Chrome 拡張機能のセットアップ

Chrome 拡張機能ファイルのセットアップは非常に簡単です。拡張機能の構築に関する詳細については、Chrome 拡張機能のドキュメント ページへのリンクを以下に添付します。
理想的な Chrome 拡張機能には、Chrome 拡張機能に関するデフォルトの背景情報を提供する詳細なmanifest.json ファイルが含まれている必要があります。
また、実行する適切な JS ファイルも含まれています。他の追加ファイル (HTML および CSS) は、拡張機能に美しさを与えるのに役立ちます。
これで、コンテンツ スクリプト インジェクションを組み込んだ拡張機能の構築に進みましょう。移動先のアクティブな Web ページにボタンをオーバーレイして表示する Chrome 拡張機能を作成することで、コンテンツ スクリプトの威力を説明します。

マニフェストファイルの書き込み

このセクションでは、マニフェスト ファイルの各部分に焦点を当てて説明します。これは、プロジェクトのマニフェスト ファイルのコードです。

{
    "manifest_version": 3,
    "name": "Add Button",
    "version": "1.0",
    "description": "An extension that alerts a response when clicked",
    "permissions": ["activeTab"],
    "content_scripts": [
{
        "matches": [""],
        "js": ["ContentScript.js"],
        "CSS": ["Button.css"]
}
]
}

マニフェスト バージョン: 通常、マニフェスト バージョンが要求されます。デフォルトでは、バージョン 2 よりも大幅に優れたアップグレードであるため、3 に設定されています。
Name: 拡張機能の名前もマニフェスト ファイルに入力されます。私の場合、プロジェクトの名前は「追加ボタン」です​​。ユーザーの好みに合わせて微調整できます。
Chrome 拡張機能のバージョンも入力します。私たちの場合、これは拡張機能の最初のバージョンであるため、1.0 という名前が付けられています。この拡張機能のその後の改良により、ファイルを変更してそれぞれバージョンを上げることが求められる場合があります。
説明: 拡張機能の機能の説明は、拡張機能の技術者以外のユーザーに Chrome 拡張機能の信頼性を与えることにもなります。

その後に挙げられた点は、コンテンツ スクリプトを構築する上で非常に説得力があります。

権限オブジェクトは、コンテンツ スクリプトの実行ルートを強調表示します。これにより、コンテンツ スクリプトが予期しないタブや Web ページで実行されることも防止されます。これにより、Chrome 拡張機能が必要とする可能性のあるすべての権限をリストすることができます。一部の Chrome 拡張機能では、ブラウザ ストレージ、他の Chrome API、および問題の一部のサイトにアクセスする必要がある場合があります。このプロジェクトの場合、Chrome 拡張機能を使用中のアクティブなブラウザ タブのみに制限します。 Chrome 拡張機能が Chrome ブラウザの他の未使用部分を侵害するリスクを軽減するには、これを適切に設定することが重要です。

次に、マニフェスト ファイルのコンテンツ スクリプト フィールドを構成します。
コンテンツ スクリプト フィールドでは、Web ページに挿入するさまざまなコード ファイルを指定します。
これには、処理対象となる Web ページ URL を指定するmatches サブフィールドが含まれています。 使いやすさを考慮して、アクセスするすべての Web ページでこれが機能できるように、すべての URL を含めただけです。ただし、サブフィールド値に挿入する URL を指定することはできます。例: www.google.com、

"matches": ["https://*.google.com/*"]
run_at": "document_idle

インジェクションコードを含むJSファイルも指定します。私たちの場合には、
JS ファイルの名前は Content script.js です。このプロジェクトのスタイル設定に使用される CSS ファイルも指定しました。

これで、プロジェクトのマニフェスト ファイルのミニチュア実装が完了しました。その後、後続のセクション

コンテンツスクリプトの作成

物事をシンプルにするという精神で、クリックすると警告メッセージが表示されるシンプルなボタンを作成します。このボタンは既存の Web ページにオーバーレイされることが想定されています。
以下のコードです

// Create a button element
const button = document.createElement("button");

// Set the button's text content
button.textContent = "Click me";

// Set the button's ID
button.id = "clickMe";

// Append the button to the document body
document.body.appendChild(button);

// Add a click event listener to the button
button.addEventListener("click", () => {
  // Show an alert when the button is clicked
  alert("Click event listener was added");

  // Log a message to the console
  console.log("Hello world");
});

スタイルは好みに合わせて変更できますが、スタイル テンプレートがコード リポジトリに含まれています。

これがその実装の写真です。

コード スタイルを含むソース コードへのリンクは次のとおりです。

高度な技術と使用例

これまでのところ、プロジェクトは完了しています。ただし、知識を深めていただくために、コンテンツ スクリプトの構築時に実装できる高度なテクニックとベスト プラクティスをいくつか紹介します。

• ブラウザのバックグラウンド スクリプトとの相互作用
• 動的スクリプトを可能にするデータ状態マネージャーの実装
• 他の外部 API を統合すると、データの操作と分析が可能になります
• 拡張機能のパフォーマンスを最適化するためにキャッシュ戦略を採用する
• コンテンツ スクリプトと Service Worker の統合

結論

私のブログで私と交流したり、ここで私の他の記事をチェックしたりすることもできます。次回までコーディングを続けてください!