JavaScript 在 tabs.onUpdated 上执行脚本

Question

在我的代码中，每次更新谷歌标签时我都需要执行相同的脚本。 我写了这段代码；

chrome.tabs.onActivated.addListener((tab) => {
  chrome.tabs.get(tab.tabId, (current_tab_info) => {
    if (
      current_tab_info.url.search("https://") == 0 &&
      current_tab_info.url.search(".instagram.com/p/") > 0
    ) {
      chrome.tabs.executeScript(null, { file: "./foreground.js" });
    } else {
      console.log("You are not in instagram");
    }
  });
});
chrome.tabs.onUpdated.addListener(function (tabID, changeInfo, tab) {
  if (
    tab.url.search("https://") == 0 &&
    tab.url.search(".instagram.com/p/") > 0
  ) {
    chrome.tabs.executeScript(null, { file: "./foreground.js" });
  } else {
    console.log("You are not in instagram");
  }
});

但 executeScript(script) 仅适用于第一个“激活”。 它不适用于之后的任何“激活”或“更新”。 我希望它在每次“更新”instagram 选项卡时执行脚本，

注意：Manifest v2，Chrome 扩展。

这也是 foreground.js；

const control = document.getElementById("Tasarruflu Downloader");
console.log("control: " + control);
if (control === null) {
  const button = document.createElement("button");
  button.setAttribute("id", "Tasarruflu Downloader");
  button.innerText = "My Button 1";
  document
    .querySelector("._aamu" && "._ae3_" && "._ae47" && "._ae48")
    .appendChild(button);
  button.addEventListener("click", () => {
    console.log("Pressed a Button");
  });
}

如何在主脚本的 onActivated 和 onUpdated 事件中执行 foreground.js 文件中的脚本？

Answer 1

您可以使用manifest.json在打开选项卡或 URL 时注入一次脚本。 没有必要一遍又一遍地注入它——如果脚本中的代码没有改变。

但是你需要修改你的脚本和tabs API 处理程序代码。 在这两个地方，您都需要使用runtime 。 你感兴趣的事情是：

• send方法
• onMessage事件监听器

这样做的步骤很简单：

1. 通过runtime API发送消息时，将其更新，刷新等。
2. 通过注册onMessage侦听器在内容脚本中捕获它
3. 在回调中，您可以运行内容脚本示例中显示的代码

为了找到发送的消息，你可以使用这样的东西：

const message = {
name: 'your name for message',
// additional data here
}

然后在侦听器回调中，您可以检查消息是否具有您想要的名称。