コンテンツ スクリプトを構築するための初心者ガイド

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

この記事は、コンテンツ スクリプトとは何か、そしてそれらがどのように機能するかを紹介することを目的としています。 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": ["<all_urls>"],
        "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");
});

The styling can be changed to suit your preference however a styling template has been included in the code repository.

here is a picture of its implementation.

Here is the link to the source code containing the code styling.

Advanced Techniques and Use Cases

So far we have completed the project. However to advance one's knowledge, here are some of the advanced techniques and best practices you can also implement while building content scripts.

• Cross-interaction with browser background scripts
• Implementation of data state managers to allow for dynamic scripting
• Integrating other external APIs allows for data manipulation and analysis
• Employing caching strategies in order to optimize extension performance
• Integrating Content scripts with service workers

Conclusion

You can also interact with me on my blog and check out my other articles here. Till next time, keep on coding!

以上がコンテンツ スクリプトを構築するための初心者ガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。