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 act like a top-level browser window" is applicable to this issue.</li> </ul> <p>Curious to know your thoughts on what might be giving rise to this?</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/CodeDem"><img src="https://avatars.githubusercontent.com/u/8732860?v=4" />CodeDem</a> commented <strong> 3 years ago</strong> </div> <div class="markdown-body"> <p>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.</p> <p>package: <a href="https://github.com/mozilla/webextension-polyfill#basic-setup">https://github.com/mozilla/webextension-polyfill#basic-setup</a></p> <p>edit: <a href="https://github.com/tshaddix/webext-redux/blob/master/src/util.js">https://github.com/tshaddix/webext-redux/blob/master/src/util.js</a></p> <pre><code>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; }</code></pre> <p>@tshaddix what are you thoughts? </p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/tshaddix"><img src="https://avatars.githubusercontent.com/u/2173532?v=4" />tshaddix</a> commented <strong> 3 years ago</strong> </div> <div class="markdown-body"> <p>@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!</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/CodeDem"><img src="https://avatars.githubusercontent.com/u/8732860?v=4" />CodeDem</a> commented <strong> 3 years ago</strong> </div> <div class="markdown-body"> <p>@tshaddix yes this worked nicely. I used it in my recent browser plugin development. I'll make a PR for this</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/tshaddix"><img src="https://avatars.githubusercontent.com/u/2173532?v=4" />tshaddix</a> commented <strong> 3 years ago</strong> </div> <div class="markdown-body"> <p>@CodeDem Great! Thank you!</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/der-ofenmeister"><img src="https://avatars.githubusercontent.com/u/60178537?v=4" />der-ofenmeister</a> commented <strong> 3 years ago</strong> </div> <div class="markdown-body"> <p>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!</p> <p>@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?</p> <p>If this is indeed the case, might I suggest you having a look at <a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM">Shadow DOMs</a>? They're basically isolated little DOM nuggets, quite performant and easier to handle than iframes. </p> <p>If this does seem like a usable choice, you might also want to have a look at the <a href="https://www.npmjs.com/package/react-shadow">react-shadow</a> 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. </p> <p>@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!</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/CodeDem"><img src="https://avatars.githubusercontent.com/u/8732860?v=4" />CodeDem</a> commented <strong> 3 years ago</strong> </div> <div class="markdown-body"> <p>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.</p> </div> </div> <div class="page-bar-simple"> </div> <div class="footer"> <ul class="body"> <li>© <script> document.write(new Date().getFullYear()) </script> Githubissues.</li> <li>Githubissues is a development platform for aggregating issues.</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/githubissues/assets/js.js"></script> <script src="/githubissues/assets/markdown.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/languages/go.min.js"></script> <script> hljs.highlightAll(); </script> </body> </html>

tshaddix / webext-redux

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

What I expect to happen

What actually happens

Steps to reproduce

Notes