0

I'm currently running into the following bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1208775

Long story short, I need to access this.browser instead of window.browser. If I replace my webpack generated file with console.log(this.browser) I get the correct window variable, whereas if I access window.browser I get undefined. The suggested fix is to access this.browser, but I'm unsure of how to do that as a webpack module:

I have a simple browser.js file which I use to export the browser info:

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

Because we're in a function context, both window.browser and this.browser are undefined, as well as window.chrome (As I'm developing this in firefox). How would I go about accessing this.browser (this being in the global scope) through webpack?

RobG
  • 142,382
  • 31
  • 172
  • 209
Blue
  • 22,608
  • 7
  • 62
  • 92
  • 1
    How about `export default chrome || browser` for global variables? (Potentially with `typeof` checks) – Bergi Sep 03 '17 at 21:43
  • @Bergi Create this into an answer, and I'll accept it. – Blue Sep 03 '17 at 21:53
  • Dunno, it's just a workaround. The actual question - how to access the global object using `this` inside a webpacked (and babel-transpiled?) module - still stands. – Bergi Sep 03 '17 at 22:01
  • @Bergi Accessing `browser` without any modifiers (`this` or `window`) appears to return exactly what I need. – Blue Sep 05 '17 at 19:04

1 Answers1

2

this in the top level scope of a script execution context (as opposed to a module context) is nothing other than the 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 delegating to the unsafe window object as its prototype.

So, since top level this is the global object the problem boils down to getting the global object, for which there is the indirect eval approach. Small caveat: To use eval in a of webextensions you'll have to relax the extension CSP in the manifest.

To summarize the current object relations in webextensions:

top level this is the global object.

this.prototype is a security proxy to the untrusted window that gives a pristine view on the standard window properties. Due to how variable lookups work and the self-referential nature of window.window it's also this.window via prototype lookup and unqualified window via delegation to the global object when no local variables exist

unsafeWindow == window.wrappedJSObject is the target of the security proxy, which is the window object and global of the untrusted webpage itself

the8472
  • 40,999
  • 5
  • 70
  • 122
  • Given the OP talks of webpack, he might be using ES6 modules, where the "top level" module scope does not have that `this` value. +1 on indirect `eval` though, that should always work – Bergi Sep 03 '17 at 22:36
  • @Bergi considering the bug he is linking to and the `console.log` example it must be the script top level `this`. If he were referring to the module top level `this` he would be getting an undefined error anyway which would be unrelated to the issue. – the8472 Sep 03 '17 at 22:43