拡張ページDOMではなく、ウェブページDOMにアクセスするには？

質問

Chromeの拡張機能を書いているのですが、その中で <div> を現在のウェブページの上に表示しようとしています。

にアクセスすると document.body.insertBefore メソッドにアクセスすると、popup.html 内の <div> を表示します。

ウェブページのDOMにアクセスするためにbackground.htmlとpopup.htmlの間でメッセージングを使用しなければならないのでしょうか？私はpopup.htmlですべてを行い、可能であればjQueryも使用したいのです。

どのように解決するのですか？

browser_action popup や ManifestV2 background script などの拡張ページ/スクリプトは、独自の DOM を持っています。 document , window を、そして chrome-extension:// の URL (使用 devtools を使ってください。 を使用して検査します）。ManifestV3サービスワーカーは、DOM/ドキュメントを持ちません。

を必要とします。 コンテンツスクリプト でウェブページの DOM にアクセスします。 で、タブのコンテンツと対話します。コンテンツスクリプトは、拡張機能の一部としてではなく、そのページの一部としてタブ内で実行されます。

方法 1. 宣言的

manifest.json を作成します。

"content_scripts": [{
  "matches": ["*://*.example.com/*"],
  "js": ["contentScript.js"]
}],

ページが読み込まれたときに一度だけ実行されます。その後に メッセージング が、DOM要素、Map、Set、ArrayBuffer、クラス、関数などを送ることができないことに注意してください - JSON互換の単純なオブジェクトと型しか送れないので、必要なデータを手動で抽出し、単純な配列またはオブジェクトとして渡す必要があります。

方法 2. プログラムによる方法

• ManifestV2です。

  使用方法 chrome.tabs.executeScriptを使用する。 を使用して、必要に応じてコンテンツスクリプトを注入します。

  このメソッドのコールバックは、コンテンツスクリプトの最後の式の結果を受け取るので、JSON互換でなければならないデータを抽出するために使用することができます（上記のメソッド1の注を参照）。

  manifest.jsonで必要なパーミッション。

  • ベストケース "activeTab" ユーザーのアクション(通常、ツールバーの拡張機能アイコンをクリックする)への応答に適しています。拡張機能のインストール時にパーミッションの警告は表示されません。

  • 通常の "*://*.example.com/" と、その他お好きなサイト。

  • 最悪の場合 "<all_urls>" または "*://*/" , "http://*/" , "https://*/" - を使用して Chrome Web Store に送信すると、幅広いホストパーミッションのために、これらすべてがあなたの拡張機能を超低速のレビューキューに入れます。

• マニフェストV3 との相違点。

  使用方法 chrome.scripting.executeScriptを使用する。 .

  必要な permissions をmanifest.jsonに記述してください。

  • "scripting" - 必須
  • "activeTab" - 理想的なシナリオ、上記の ManifestV2 の注記を参照してください。

  理想的なシナリオが不可能な場合は、許可されたサイトを host_permissions に追加します。