javascript - 在webpack中捕获 "this"值

Question

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

长话短说，我需要访问 this.browser 而不是 window.browser。如果我用console.log(this.browser)替换我的webpack生成的文件，我会得到正确的窗口变量，而如果我访问window.browser，我会得到 undefined variable 。建议的修复方法是访问 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 。网页中的全局对象是 window 对象，但在其他环境(例如 Node.js、Web Workers 或 WebExtensions)中，它可以是其他对象。对于 webextensions，它是一个具有 security proxy 的对象。委托(delegate)给不安全的窗口对象作为其原型(prototype)。

因此，由于顶级 this 是全局对象，因此问题归结为获取全局对象，其中有 indirect eval approach.小警告:要在网络扩展中使用 eval，您必须 relax the extension CSP在 list 中。

总结一下 webextensions 中当前的对象关系:

顶级this是全局对象。

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

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