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

Chrome Extensions: Pass data from popup to another script file before the script is injected

本文关键字：脚本 窗口 文件 另一个 数据 程序 扩展 注入 Chrome      更新时间：2023-09-26

>问题
假设我访问一个名为 RENT.com 的网站。我们还假设对于这个 chrome 扩展，有一个脚本 A （JS） 注入到 RENT.com。脚本 A 是一个大型脚本文件，它与 RENT .com 的 HTML 元素（如表单字段）进行大量交互。但是，在脚本运行之前，它需要几个元素（例如电子邮件字段）的一些 DOM ID，因为它会修改它们。

目的

我想在弹出窗口中创建几个输入字段（我们称它们为输入电子邮件和输入名称.html以输入 RENT.com 上元素的 ID。显然，我会通过查看源代码来手动查找ID，这是故意的。

弹出窗口中的一个按钮.html我们称之为"GO BUTTON"，然后将读取 InputEmail 和 InputName 的值并将其发送到脚本 A.脚本 A 现在拥有正常运行所需的一切，现在已注入到页面中。

脚本 A 和脚本 RENT.com 的相应交互现已完成。

我已经尝试了一些事情，从Docs和Stack中阅读了大量信息，但我不明白我认为从根本上说这是如何工作的。我想在执行content_script之前通过弹出窗口将数据传递给脚本 A.js最终只是注入脚本 A.似乎是鸡/蛋的问题，我不饿吃早餐或午餐;)。

谢谢大家！

弹出窗口.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>

弹出窗口.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 的内容脚本

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);

有几种方法可以实现此目的。一个是：

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

相关文章：