Chrome扩展:推送在创建新标签之前收集的信息

Chrome Extension: pushing information gathered before a new tab is created?

本文关键字：标签 信息 扩展 新标签 创建 Chrome      更新时间：2023-09-26

所以我有一个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()来提醒任何事情。

通过删除创建行，扩展将提醒我所需的信息。

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

注意：下面的代码是文件和结构的一个很好的例子应该是。它还没有经过测试，应该用来获得解决方案的总体思路。

Manifest.json

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

OR

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

您可以在这里找到有关扩展通信的更多详细信息：消息传递。

相关文章：