Chrome扩展程序：推送在创建新标签之前收集的信息？

Question

因此，我有一个popup.html，它会加载一个脚本（popup.js）作为浏览器操作的标题。 然后，这使得调用站点来获取必要的信息。

我使用XMLHTTPRequests获得了所有必要的信息，并将其保存到popup.js中的变量中。

现在，我尝试创建一个新选项卡，加载一个网页，然后使用我保存的信息填写表格。

chrome.tabs.create({ 'url': "https://site.html" });

这行在popup.js中

这将我带到所需的站点，但似乎删除了我先前检索的所有信息。 即使我在制作选项卡之前要求提供信息，它也不会警告我我想要的信息。 我该如何创建一个带有特定URL的选项卡，然后使用我先前在popup.js中收集的信息填充popup.js中包含的所有表单？ 我的逻辑有缺陷吗？ 非常感谢您的任何建议。

更新：对此进行编辑以使其更有意义。

这是我的popup.js

function do(){
    var xhr = new XMLHttpRequest();
    xhr.open("Get", Url);
    xhr.send();
    xhr.addEventListener("readystatechange", function () {
        if (this.readyState === 4) {
            var dogName = this.responseText;
            alert(dogName)
}
do();
chrome.tabs.create({ 'url': "site.html" });

在site.html里面有一个表格。 我要做的就是那种形式。

document.getElementById('form').getElementsByTagName('input')[0].value = dogName; 
document.getElementById("btnOK").click()

但是如果这条线它什么也不会做

chrome.tabs.create({ 'url': "https://site.html" });

存在，它只会将我带到该页面，而不会运行do()来提醒任何事情。

通过删除创建行，该扩展程序会提醒我所需的信息。

Answer 1

您将需要使用事件页面而不是弹出窗口。 事件页面是一个长时间运行的脚本，可让您按需检索数据。 打开的选项卡还需要运行内容脚本。 该内容脚本会将消息发送到事件页面，以检索获取的XHR数据，然后将数据应用于表单字段。 可以使用manifest.json文件或直接在作为第二个参数传入的chrome.tabs.create函数上注入 内容脚本 。

注意 ：以下代码是文件和结构应如何的一个近似示例。 它尚未经过测试，应该用来对解决方案有一个总体了解。

Manifest.json

  "content_scripts": [{
    "matches":    ["*://eample.com/formpage.html"],
    "js":         ["content.js"],
    "run_at":     "document_idle"
  }],

要么

popup.js

chrome.tabs.create({ 'url': "https://example.com/formpage.html" }, function(tab1) {
  chrome.tabs.executeScript(tab1.id, {file: 'content.js', run_at});
});

---

content.js

chrome.runtime.sendMessage({data: "dogName"}, function(response) {
  var dogName = response.data;
  document.getElementById('form').getElementsByTagName('input')[0].value = dogName;
});

---

event.js

function getDogName(callback){
  var xhr = new XMLHttpRequest();
  xhr.open("Get", Url);
  xhr.send();
  xhr.addEventListener("readystatechange", function () {
    if (this.readyState === 4) {
        var = dogName = this.responseText;
        callback({data: dogName});
    }
  });
}
chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    if (request.data === "dogName") {
      getDogName(sendResponse);
      return true;
    }
});

您可以在此处找到有关分机通信的更多详细信息： 消息传递 。