Chrome 扩展：内容脚本运行后注入的值消失

Question

我正在编写一个 chrome 扩展（Manifest V3），我试图通过设置

window

属性（因为我稍后使用它几次）来让内容脚本知道选项卡 ID 是什么。我在我的

executeScript()

中使用

background.js

按以下方式执行此操作：

function setTabIDInContent(id) { 
  window.tabId = id; }

chrome.tabs.onUpdated.addListener(async (tabId, changeInfo, tab) => {
    if (tab.url?.startsWith("chrome://")) return undefined;

    chrome.scripting.executeScript({
      target: { tabId: tabId },
      args: [tabId],
      world: "MAIN",
      func: setTabIDInContent
    });
    
});

在我的内容脚本中，我有一个按以下方式定义的侦听器：

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {  
        sendResponse({tabId: window.tabId, 
          info: 'other stuff'});
        
});

我正在观察这种奇怪的行为：

• 页面加载后，在控制台窗口中键入

  window.tabId

  将打印正确的值。
• 但是，在内容脚本运行之后 - 具体来说，在我从后台脚本向其发送消息并调用侦听器之后，

  window.tabId

  变为

  undefined

  。在内容脚本的侦听器方法中放置断点，我在执行过程中验证了

  window.tabId

  确实是

  undefined

  。监听器执行完毕后，当我回到控制台窗口并输入

  window.tabId

  时，我看到它已经变成了

  undefined

  ，那里很好。

为什么会发生这种情况以及我可以做什么来保持这个值？

Answer 1

内容脚本在隔离的 JS 世界中运行，包括通过executeScript 注入的函数，因此控制台中值的可用性取决于它使用的 JS 世界。

由于发布的代码无法删除该值，这意味着最初您的控制台上下文已正确设置为扩展程序的内容脚本：

然后，上下文将更改回默认的

Top

值，因为您检查了一个元素或执行了其他操作来恢复上下文。

另一个原因可能是，executeScript 在导航到新 URL 之前在选项卡的旧内容中运行。

更好的解决方案是在 chrome.runtime.onMessage 监听器中使用

sender.tab.id

，而不是存储 tabId。