在 webpack 中捕获 "this" 值

Question

我目前运行遇到以下错误：https://bugzilla.mozilla.org/show_bug.cgi?id=1208775

长话短说，我需要访问 this.browser 而不是 window.browser。如果我用 console.log(this.browser) 替换我的 webpack 生成的文件，我得到正确的 window 变量，而如果我访问 window.browser 我得到未定义的。建议的解决方法是访问 this.browser，但我不确定如何将其作为 webpack 模块来访问：

我有一个简单的 browser.js 文件，用于导出浏览器信息：

export default window.chrome || window.browser || this.browser;

因为我们在函数上下文中，所以 window.browser 和 this.browser 以及 window.chrome 都是未定义的（因为我在 firefox 中开发它）。我将如何通过 webpack 访问 this.browser（这是在全局范围内）？

Answer 1

this 在脚本执行上下文的顶级范围内（与模块上下文相对）只不过是 global object. The global object in webpages is the window object, but in other environments (e.g. node.js, web workers or webextensions) it can be some other object. In the case of webextensions it is an object that has a security proxy 委托给不安全的 window 对象作为其原型.

因此，由于顶级 this 是全局对象，问题归结为获取全局对象，为此有 indirect eval approach. 小警告：要在 webextensions 中使用 eval，您必须在清单中 relax the extension CSP。

总结当前webextensions中的对象关系：

顶层this是全局对象。

this.prototype 是不受信任的 window 的安全代理，它提供标准 window 属性的原始视图。由于变量查找的工作方式和 window.window 的自引用性质，它也是 this.window 通过原型查找和非限定 window 通过在不存在局部变量时委托给全局对象

unsafeWindow == window.wrappedJSObject是安全代理的目标，是window不受信任网页本身的对象和全局

在 webpack 中捕获 "this" 值

Capture "this" value in webpack

javascript

firefox-addon

webpack

firefox-addon-webextensions