Chrome扩展开发：如何获取及更新当前标签页的window对象？

我正在开发一款Google Chrome扩展，需要获取当前活跃标签页的window对象并对其进行更新，但目前无法成功获取该对象。相关代码如下：

chrome.tabs.query({ active: true, currentWindow: true }, tabs => {
      chrome.scripting.executeScript({
        target: { tabId: tabs[0].id! },
        function: () => {
          console.log(window);
        }
      })
});

Manifest.json

{
  "name": "Dummy Extension",
  "version": "1.0",
  "description": "Build an Extension with Angular",
  "manifest_version": 3,
  "permissions": [
      "tabs",
      "activeTab",
      "scripting"
  ],
  "background": {
      "service_worker": "background.js"
  },
  "action": {
    "default_title": "Chrome extension",
    "default_popup": "index.html"
  },
  "host_permissions": [
    "http://localhost:8004/*",
    "https://localhost:8004/*"
  ]
}

问题原因与解决办法 #

1. 日志位置错误导致误以为未获取到window

你代码里的console.log(window)是在目标标签页的页面上下文执行的，日志不会出现在扩展的控制台（比如popup或service worker的控制台），而是显示在当前活跃标签页自己的控制台（按F12打开）。打开标签页控制台就能看到window的输出。

2. 如何获取并更新window对象，同时将结果传回扩展

如果需要操作window并把相关信息传回扩展上下文，修改代码如下：

chrome.tabs.query({ active: true, currentWindow: true }, tabs => {
  chrome.scripting.executeScript({
    target: { tabId: tabs[0].id! },
    function: () => {
      // 直接在标签页上下文更新window对象
      window.extensionUpdated = true;
      window.customValue = "来自扩展的更新";
      
      // 返回需要的window信息给扩展
      return {
        pageUrl: window.location.href,
        windowSize: { width: window.innerWidth, height: window.innerHeight }
      };
    }
  }, (results) => {
    // 扩展上下文接收返回结果
    if (chrome.runtime.lastError) {
      console.error(chrome.runtime.lastError.message);
      return;
    }
    if (results?.length) {
      console.log("标签页window信息：", results[0].result);
    }
  });
});

3. 权限与执行上下文检查

• 确保当前活跃标签页的域名在host_permissions列表中（你的配置已经包含localhost:8004），如果是其他域名，需要用户点击扩展图标触发activeTab临时权限。
• 如果这段代码是在popup中执行，注意popup关闭后代码会终止，建议在用户点击popup内按钮时触发逻辑；若需要后台执行，可将逻辑移至service worker，但需添加合适的触发条件（比如扩展图标点击事件）。

4. Manifest V3 注意事项

• scripting.executeScript的函数是隔离的，无法直接访问扩展上下文的变量，必须通过返回值或chrome.runtime.sendMessage进行数据交互。
• 若页面使用了隔离世界（isolated world），内容脚本无法直接访问页面自定义的全局变量，但window本身的原生属性和方法可以正常访问。

内容的提问来源于stack exchange，提问作者jobayer