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
}

然后在偵聽器回調中，您可以檢查消息是否具有您想要的名稱。