拡張機能から Web ページの「ウィンドウ」/DOM/HTML にアクセスする

Question

Chrome 拡張機能を作成し、popup.html ファイル内のボタンをクリックするとすぐに現在の Web ページをオーバーレイしようとしています。 Popup.html から document.body.insertBefore メソッドにアクセスすると、現在の Web ページではなくポップアップが上書きされます。 Web ページの DOM にアクセスするには、background.html と Popup.html の間でメッセージングを使用する必要がありますか?すべてをpopup.htmlで実行し、可能であればjも使用したい

P粉296080076 · Answer

プログラムによるインジェクションを使用して、展開ポップアップスクリプトをこの div に追加する例をいくつか示します。

リスト V3

忘れずに、manifest.json にアクセス許可を追加してください。詳細については、他の回答を参照してください。

簡単な呼び出し:
リーリー
注: Chrome 91 以前では、func: は function: である必要があります。
パラメータを指定して呼び出して結果を受け取る

Chrome 92 は args を実装するため、Chrome 92 が必要です。

例 1:
リーリー
例 2:
リーリー

リスト V2

簡単な呼び出し:
リーリー
パラメータを指定して呼び出し、結果を受け取ります:
リーリー
この例では、inContent 関数を使用してコードを文字列に自動的に変換します。この利点は、IDE が構文の強調表示とリンティングを適用できることです。明らかな欠点は、ブラウザがコードの解析に時間を浪費することですが、通常は 1 ミリ秒未満であるため、無視できる程度です。

P粉600402085 · Answer

問題: 拡張ページ (ポップアップ、オプション、MV2 の背景ページなど) が Web ページから分離されており、独自の DOM、ドキュメント、# を持っています。 ##window および chrome-extension:// URL。

は、独自の開発ツールを使用します。

解決策: コンテンツスクリプトを使用して、Web ページにアクセスするか、そのコンテンツを操作します。

ページコンテキスト (メインワールドとも呼ばれる) でコードを実行する方法を参照してください。

方法 1. 宣言的

マニフェスト.json：

リーリー

ページの読み込み時に 1 回実行されます。その後、

メッセージングを使用します。

警告! DOM 要素、マップ、セット、ArrayBuffers、クラス、関数などを送信することはできません。 JSON 互換の単純なオブジェクトと型のみを送信できるため、必要なデータを手動で抽出し、単純な配列またはオブジェクトとして渡す必要があります。

方法 2. プログラミング

ManifestV3：
拡張スクリプト (ポップアップウィンドウなど) では、必要に応じてコンテンツスクリプト/関数をタブに挿入できます。

このメソッドの結果はコンテンツスクリプトの最後の式であるため、データの抽出に使用できます。データは JSON 互換である必要があります。上記の警告を参照してください。

manifest.json で必要な
権限:
- 「スクリプト」 - 必須;
- "activeTab" - ユーザーのアクション (通常はツールバーの拡張機能アイコンをクリック) に応答するのに適した理想的なシナリオ。拡張機能をインストールするときに権限の警告を表示しません。
理想的な状況が不可能な場合は、manifest.json の
host_permissions に許可されたサイトを追加します。
- "*://*.example.com/" およびその他の任意の Web サイト。
- "" または "*://*/" これらにより、拡張機能は Chrome ウェブストアの非常に遅いレビューキューに入れられます。広範なホスト権限。
ManifestV2 と上記の違い:
- chrome.tabs.executeScript を使用します。
- 権限でWebサイトを指定します。