検索

ホームページ  >  に質問  >  本文

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

Chrome 拡張機能を作成し、popup.html ファイル内のボタンをクリックした直後に、現在の Web ページに

をオーバーレイしようとしています。

popup.html から document.body.insertBefore メソッドにアクセスすると、現在の Web ページではなくポップアップ上の

が上書きされます。

Web ページの DOM にアクセスするには、background.html と Popup.html の間でメッセージングを使用する必要がありますか?すべてをpopup.htmlで実行し、可能であればjQueryも使用したいと考えています。

P粉046878197P粉046878197437日前667

全員に返信(2)返信します

  • P粉296080076

    P粉2960800762023-10-19 08:17:05

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

    リスト V3

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

    • 簡単な呼び出し:

      リーリー

      注: Chrome 91 以前では、func:function: である必要があります。

    • パラメータを指定して呼び出して結果を受け取る

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

      例 1:

      リーリー

      例 2:

      リーリー

    リスト V2

    • 簡単な呼び出し:

      リーリー
    • パラメータを指定して呼び出し、結果を受け取ります:

      リーリー

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

    返事
    0
  • P粉600402085

    P粉6004020852023-10-19 00:39:30

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

      Service Worker には DOM/ドキュメント/ウィンドウがまったくないことに注意してください。
    • 拡張機能をチェックする各コンテキスト
    • は、独自の開発ツール を使用します。

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

    方法 1. 宣言的

    マニフェスト.json:

    リーリー

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

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

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

    方法 2. プログラミング

  • キャンセル返事