0

問題
RENT.com という Web サイトにアクセスしたとします。また、この chrome 拡張機能には、RENT.com に挿入されるスクリプト A (JS) があると仮定します。スクリプト A は、フォーム フィールドなどの RENT.com の HTML 要素と多くのやり取りを行う大きなスクリプト ファイルです。ただし、スクリプトを実行する前に、電子メール フィールドなどのいくつかの要素の DOM ID が必要です。これは、それらを変更するためです。

目的

popup.html にいくつかの入力フィールド (InputEmail と InputName と呼びましょう) を作成して、RENT.com の要素の ID を入力したいと思います。明らかに、ソースを表示して手動で ID を検索しますが、これは意図的なものです。

popup.html のボタンを「GO BUTTON」と呼び、InputEmail と InputName の値を読み取り、それをスクリプト A に送信します。スクリプト A は、適切に機能するために必要なすべてのものを備え、ページに挿入されます。

スクリプト A と RENT.com からの適切なやり取りが完了しました。

私はいくつかのことを試し、ドキュメントとスタックから大量の情報を読みましたが、基本的にこれがどのように機能するかを理解していません。content_script を実行する前に popup.js 経由でスクリプト A にデータを渡したいのですが、これは最終的にはスクリプト A を注入するだけです。鶏と卵の問題のようで、朝食や昼食にはお腹が空いていません ;)。

みんなありがとう！

popup.html 

<!doctype html>
<html>
  <head>
    <title>Getting Started Extension's Popup</title>

  </head>
  <body>
      <ul>
          <li><label>Email ID</label><input type="text" id="emailID"></input></li>
          <li><label>Company ID</label><input type="text" id="nameID"></input></li>
      </ul>
      <input type="button" id="Modify" style="" value="GO BUTTON"></input>
     <script src="popup.js"></script>
  </body>
</html>

Popup.js

function click(e) {         
    //Ideally pass these values to Script A somehow
    var email = document.getElementById("emailID").value;
    var company = document.getElementById("nameID").value; 

   //then execute this or pass the ID's to content_script, inject into Script A, then inject into page
    chrome.tabs.executeScript(null, {file:"contentscript.js"});        
    window.close();
}

document.addEventListener('DOMContentLoaded', function () {
  var d = document.getElementById("Modify");
  d.addEventListener('click',click);

});

スクリプト A を挿入する ContentScript

var s2 = document.createElement('script');
s2.src =chrome.extension.getURL("ScriptA.js");
s2.async = false;

s2.onload = function() {
    s2.parentNode.removeChild(s2);

};
(document.head||document.documentElement).appendChild(s2);
4

1 に答える 1