0

问题
假设我访问了一个名为 RENT.com 的网站。我们还假设对于这个 chrome 扩展，有一个脚本 A (JS) 被注入到 RENT.com。脚本 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 的适当交互现已完成。

我已经尝试了一些东西，从 Docs 和 Stack 中阅读了大量信息，但我不明白我认为这从根本上是如何工作的。我想在执行 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);

});

ContentScript 注入脚本 A

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

0

有几种方法可以做到这一点。一种是：

function click(e) {
  var elementIDs = {
    email: document.getElementById("emailID").value,
    company: document.getElementById("nameID").value
  };
  chrome.tabs.executeScript({
    code: 'window.elementIDs='+JSON.stringify(elementIDs)
  }, function() {
    chrome.tabs.executeScript({file: "ScriptA.js"});        
  });        
  window.close();
}

这样，ScriptA将能够访问window.elementIDs. 这将起作用，因为来自同一页面上相同扩展的内容脚本将共享执行环境，并且调用链接chrome.tabs.executeScript确保定义全局变量的脚本在运行之前ScriptA已经运行。

于 2013-09-12T06:34:54.340 回答