iframe in Firefox: Uncaught (in promise) ReferenceError: browser is not defined

[anotherstarburst]

Hi @tshaddix

I love this project. I've been test driving it for an app and came across an issue I can't quite get to the bottom of. Hopefully you have a better feel for how to solve it?

What I expect to happen

I'm injecting an iframe into a page, and the content of said iframe is able to access the redux store.

What actually happens

This works as expected in Chrome, however when I run this in Firefox it throws the following error:

Uncaught (in promise) ReferenceError: browser is not defined

which links to https://github.com/tshaddix/webext-redux/blob/536e12689deea53c92ddffd8bdee15f733f0146b/src/util.js

Steps to reproduce

I've put together a simple web extension so you can reproduce the issue at your leisure: https://github.com/anotherstarburst/webext-redux-issue

Notes

• This does seem specific to iframes in Firefox - Chrome gives no issue, and the content script outside of the iframe has access to the redux store.
• Mozilla has deviated a bit from Chrome wrt iframes (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe - mozbrowser attribute).
• The mozbrowser attribute has a specific bug when used with web extensions - though I'm not sure "Makes the <iframe> act like a top-level browser window" is applicable to this issue.

Curious to know your thoughts on what might be giving rise to this?

[CodeDem]

You can try a custom build of this repository with webextension-polyfill to make it cross browser compatible. You can try with following modification and it should work.

package: https://github.com/mozilla/webextension-polyfill#basic-setup

edit: https://github.com/tshaddix/webext-redux/blob/master/src/util.js

import browser from "webextension-polyfill";
/**
 * Looks for a global browser api, first checking the chrome namespace and then
 * checking the browser namespace. If no appropriate namespace is present, this
 * function will throw an error.
 */
export function getBrowserAPI() {
  return browser;
}

@tshaddix what are you thoughts?

[tshaddix]

@CodeDem This makes a lot of sense to me, especially if the polyfill is being actively maintained. If you'd like to submit a PR I'd be happy to look at it! Thank you for this!

[CodeDem]

@tshaddix yes this worked nicely. I used it in my recent browser plugin development. I'll make a PR for this

[tshaddix]

@CodeDem Great! Thank you!

[der-ofenmeister]

Might be a little late to the party, but I believe iframes are not really very recommended (it's basically embedding a full-fledged HTML document inside the parent HTML, and therefore, not very performant, not to mention being a tad complex, at least for my taste/code-style). Idk a ton about web-dev, but this reasoning seems pretty sound to me. If anyone has anything else on this matter, please do comment here!

@anotherstarburst I'm assuming you don't want CSS and/or other scripting conflicts with the parent HTML, and that's the reason for iframes?

If this is indeed the case, might I suggest you having a look at Shadow DOMs? They're basically isolated little DOM nuggets, quite performant and easier to handle than iframes.

If this does seem like a usable choice, you might also want to have a look at the react-shadow package, which does exactly what it says on the tin. It's pretty dang awesome. If you want any help with setting it up, lemme know! Will be more than willing to help.

@CodeDem wow, awesome stuff! Can't wait to use a nice, polyfilled package in production! 😍
Hanging tight for your PR, in the meantime, I'll play around with this library. In my one day of use, it has really helped me a lot, as I'm already in the process of migrating my code-base (idk about you guys but for me, that's light-speed 🤣). Super awesome work @tshaddix and the awesome team!

[CodeDem]

Oh yes, I’ve started the work on the same. Chrome browser api are callback based and the Mozilla web extension pollyfill browser api is Promise based. So have to do some more changes accordingly. I might need some help with writing test cases. I’ll update you guys on the progress soon.