事件处理程序中的错误：ReferenceError：未使用清单 v3 定义窗口 chrome 扩展答案

【问题标题】：Error in event handler: ReferenceError: window is not defined chrome extension with manifest v3事件处理程序中的错误：ReferenceError：未使用清单 v3 定义窗口 chrome 扩展
【发布时间】：2021-09-12 13:45:33
【问题描述】：

我正在使用清单版本 3 进行 chrome 扩展，我在后台 js 中遇到了这个错误： 事件处理程序中的错误：ReferenceError: window is not defined chrome extension with manifest v3

"manifest_version":3, "permissions":["contextMenus","storage", "activeTab","tabs","scripting","webRequest"],

var posLeft = ( window.width - winWidth ) / 2 ;

【问题讨论】：

ManifestV3 扩展使用服务工作者，因此它没有 DOM 或 window。为什么后台脚本中需要window.width？
@wOxxOm 我想设置 chrome.windows.create 在浏览器屏幕的中心打开，所以首先我想获取 window.width 然后我减去 chrome.windows 宽度

标签： google-chrome-extension google-chrome-devtools chrome-extension-manifest-v3

【解决方案1】：

ManifestV3 扩展使用服务工作者，因此它没有 DOM 或 window。

使用chrome.windows.getCurrent 获取当前浏览器窗口的大小/位置。
使用 chrome.system.display.getInfo（自 Chrome 94 起）获取显示器的尺寸/指标。

【讨论】：

【解决方案2】：

对于可能在类似上下文中查找该错误消息的其他人来说，当我忽略使 window 对象在运行时可访问而不是在注入函数正在动态准备好时，我得到了同样的错误通过 v3 后台脚本注入特定选项卡。

为了从 v3 后台脚本动态注入，选项卡特定对象（在本例中为 window）需要包含在正在传递的函数中，如以下匿名函数案例：

chrome.scripting.executeScript({
    target: { tabId: currentTab.id },
    func: () => window.history.back()
  });

如果window.history.back 被提供为func 的值，那么后台脚本显然不会知道或无法使用它，并且会出现相同的错误消息。

这确实在文档中有所描述。

【讨论】：

FWIW，此代码在 ManifestV3 service worker 中工作，因为该函数永远不会在 service worker 的上下文中运行，它被序列化为字符串，注入到选项卡中。