Question

问题
我们假设我去了一个名为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);

});

要注入脚本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);

Answer 1

有几种方法可以实现这一目标。一个是：

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运行之前运行

Chrome扩展程序：在注入脚本之前将数据从弹出窗口传递到另一个脚本文件

1 个答案: