Javascript 如何在后台脚本打开URL后等待内容脚本侦听器加载?

Javascript 如何在后台脚本打开URL后等待内容脚本侦听器加载?,javascript,google-chrome-extension,Javascript,Google Chrome Extension,我的后台脚本应该打开一个URL并等待它完全加载,这样内容脚本的侦听器就准备好了(我说的对吗?)。然后它应该向内容脚本发送消息“newURLvisited” 内容脚本接收消息并从网站获取所有链接,然后单击其中一个(例如索引10)。通常,内容脚本会通过这样做来激活自己,因为my manifest.json匹配所有URL(这对我来说是必要的) 我想通过只在后台脚本发送消息“newURLcreated”时调用内容脚本来解决这个问题。当内容脚本单击链接时,会发送消息“newURLcreated”,但这不是

我的后台脚本应该打开一个URL并等待它完全加载,这样内容脚本的侦听器就准备好了(我说的对吗?)。然后它应该向内容脚本发送消息“newURLvisited”

内容脚本接收消息并从网站获取所有链接,然后单击其中一个(例如索引10)。通常,内容脚本会通过这样做来激活自己,因为my manifest.json匹配所有URL(这对我来说是必要的)

我想通过只在后台脚本发送消息“newURLcreated”时调用内容脚本来解决这个问题。当内容脚本单击链接时,会发送消息“newURLcreated”,但这不是想要的行为

那么,我如何等待内容脚本的侦听器加载,然后向其发送消息而不出现问题呢

我知道我正在检查“加载”和tabs.onUpdate,这可能不是必需的。我在用它们做实验


background.js:

chrome.windows.onCreated.addListener(
  chrome.tabs.update({url:"https://stackoverflow.com/"});
});

window.addEventListener('load', function(event) {  
  chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) {          
    if (changeInfo.status == 'complete') {   
      chrome.tabs.query({active: true, currentWindow: true}, function(tabs){
        chrome.tabs.sendMessage(tabs[0].id, {txt: "newURLvisited"}, function(response) {});
      });
    }
  });
});

content.js:

chrome.runtime.onMessage.addListener(gotMessage);

function gotMessage(message) {
  if (message.txt === "newURLvisited") {
    var allLinks = document.getElementsByTagName("a");
  }
  allLinks[10].click();
}

// do something
// ...............
// return some data to executeScript
// (only simple types like strings/numbers or arrays/objects consisting of simple types)
var results = [...document.links].map(el => el.href);
results;

在OnUpdate回调中,您需要检查更新的选项卡是否实际上是您手动更新的选项卡。但是,我想建议一种更简单的总体方法:

  • 从manifest.json中删除“content_scripts”部分
  • 运行内容脚本

  • content.js:

    chrome.runtime.onMessage.addListener(gotMessage);
    
    function gotMessage(message) {
      if (message.txt === "newURLvisited") {
        var allLinks = document.getElementsByTagName("a");
      }
      allLinks[10].click();
    }
    
    
    // do something
    // ...............
    // return some data to executeScript
    // (only simple types like strings/numbers or arrays/objects consisting of simple types)
    var results = [...document.links].map(el => el.href);
    results;
    
    最后一行将URL数组传输到executeScript的回调