Cannot create store in content script in Firefox

[ChrisLMerrill]

When I create the store in a content script in Firefox, it breaks the content script. I don't get a stacktrace in the console. Future console.log() statements are not executed. The same Content script works in Chrome.

Removing the first 2 lines in this example allows the message to appear in the console.

import {Store} from 'webext-redux';
const store = new Store();

console.log("extension is running in the page");

Is this a known issue, an intended limitation or a bug?

TIA! Chris

[tshaddix]

Hey @ChrisLMerrill! Definitely not intended. So are you saying that an error doesn't appear at all?

[ChrisLMerrill]

There is no error in the console of the page.

The only messages in the background script console are there in either case, so I'm assuming they are not relevant (a source map error and "Unchecked lastError value: Error: Could not establish connection. Receiving end does not exist.").

[tshaddix]

@ChrisLMerrill Do you have the latest version of this package? I just made sure the example below is working in Firefox and I didn't run into issues

https://github.com/tshaddix/webext-redux-examples/blob/master/clicker-key/content/src/scripts/index.js

[ChrisLMerrill]

My package.json has these: "react": "^16.8.3", "react-dom": "^16.8.3", "react-redux": "^6.0.1", "redux": "^4.0.1", "webext-redux": "^2.0.1" Is 2.0.1 the latest?

My content script ONLY imports Store from webext-redux because I haven't added any React rendering there yet. Could that affect the problem?

The current version of my project demonstrates the problem...at least, for me. Console message appears in Chrome, but not Firefox. https://github.com/ChrisLMerrill/PageObjectsBuilder

[ChrisLMerrill]

So I created the simplest example that I could with the same result. https://github.com/ChrisLMerrill/CrossBrowserWebextensionReactReduxExample

after checkout:

npm install
webextension-toolbox build firefox

then add the extension from dist/firefox/manifest.json. If you do NOT see Content script is running in the page console, then you have reproduced the problem. Thanks for looking into it!

[tshaddix]

Cool - I'll jump in shortly. Thanks for making it easy to look into!

[tshaddix]

Alright, so I was able to reproduce the issue you're seeing. I'm seeing a ton of errors from the Firefox console with messages like Unchecked lastError value: Error: ID already exists: convert.

I'm starting to believe this is caused by the webextension-toolbox tool as I'm not able to reproduce the issue through just a regular gulp build such as in the examples repo.

It's bizarre that there are absolutely no errors in the console to indicate why the execution just seems to be suddenly dying.

[ChrisLMerrill]

Thanks for looking into it...and glad to know it is not just my environment.

The webextension-toolbox really makes it easy to get a cross-browser extension running...and webext-redux makes it really easy to get the react/redux combination working. If they can not work together...hmmm...not sure which direction I'm going to go next.

I will open an issue over on the webextension-toolbox and reference my example and this issue...maybe someone over there will have a solution.

[sc3w]

Hello guys,

I've ran into the same problem as you and I found out that in Firefox for some reason the browser API is not accessible for the store in the content script.

I looked into the getBrowserAPI function and I noticed that it tries to access the API by global.browser. I've added one more option, to check for browser simply, and it worked!

So, the final code for the function would look like this:

function getBrowserAPI() {
  var api = global.chrome || global.browser || browser; // added '|| browser' to the end

  if (!api) {
    throw new Error("Browser API is not present");
  }

  return api;
}

Do you think this is an acceptable solution?

[tshaddix]

@sc3w Great! I will merge this in. Thanks!

[tshaddix]

This has been published in 2.0.2

[ChrisLMerrill]

I can confirm this is fixed for me as well. Thanks!