I am building a chrome extension in React and webpack. I use chrome messaging API to communicate between the background page and the popup or content script. In the background script, I use browser.runtime.onMessage.addListener and in popup, I use browser.runtime.sendMessage.
In development mode, everything works great. I can easily send messages between the background page and the popup. Sadly when I bundle extension in production mode with code splitting, the messaging API does not work. When browser.runtime.sendMessage is run I get this error message: Error: Could not establish connection. Receiving end does not exist.
Here is a reproduction repo: https://github.com/sleaper/extension-error-reproduction
Can I use webpack in this way?
If you have more questions feel free to ask!
Related
I am working on a react application that is using React Stripe package to connect to Stripe.
I am trying to use Stripe PaymentElement to gather card information. Everything works fine in development mode but when I build the code for production and I deploy it on a test server I get this errors in the browser console:
The resource at “https://js.stripe.com/v3” was blocked due to its Cross-Origin-Resource-Policy header (or lack thereof). See https://developer.mozilla.org/docs/Web/HTTP/Cross-Origin_Resource_Policy_(CORP)#
How can I fix this error?
I have a react application that I've deployed using nginx, which however only return a blank page. I've been looking for a solution for the last week and I can say that I tried almost anything... but nothing seems to work.
If I open the console I can see that all of the files are delivered with success, however, I got a "Loading failed for the with source ..." on firefox and a "net::ERR_HTTP2_PROTOCOL_ERROR 200" on Chrome. The weird thing is that both files are actually received (200 status) and can be viewed with the development tools. Moreover, if I visit the static resource link I get the full content without problems.
And of course, the issue is only when using the production environment, if I deploy it locally it works perfectly.
I really don't know what to do. I've tried updating the "homepage" directive, playing around with "react-router", changing the various nginx configurations and many other things but nothing.
If anyone could help me out I would really appreciate it!
I was running nginx with docker on Raspberry and, for some unknown reason, the timing on the container was completely messed up. I solved the problem by running the container in privileged mode ('privileged: true' on docker-compose)
When I put a new react app version to production in amplify, for some users they only see a white screen and in the console I have seen the error message which said "rejected". Browser did not download my js or css files.
I'm using rtk query to cache my end point calls and service workers to enable Pwa if they may be relevant.
Thanks!
I am developing a react chrome extension.
I have a footer bar to navigate across my pages(components).
I am using react-router-dom to switch/route between pages.
My extension works perfectly when debugging but, after I build it (npm run build) and Load Unpacked at my extensions, the first page renders good but when I click my footer navigation buttons, my extension shows this message:
The webpage at chrome-extension://myextensionid/ might be temporarily down or it may have moved permanently to a new web
address. ERR_UNEXPECTED
Is it because I did not publish it yet, routing only works after I publish my extension?
Any ideas what can be wrong, can you please help me with this issue?
I am trying to follow the tutorial on creating a MEAN app on scotch.io.
I am using the WebStorm IDE and after completely following through I am stuck with a problem that seems to emerge from WebStorm. If I click on the "Open in Chrome"-Button in the IDE I am referred to:
localhost:63342/scotch_mean_tutorial/views/index.html
However, the actual port that I specified in my server.js is 8080 file:
// listen (start app with node server.js) ======================
app.listen(8080);
console.log("App listening on port 8080");
I have built a node API and it works when I go to:
http://localhost:8080/api/todos
However, clicking on the "Open in Chrome" through my WebStorm IDE uses a different port (i.e. 63342) and thus I am left with the following error:
GET http://localhost:63342/api/todos 404 (Not Found)
I am not sure how to resolve this? Any ideas?
You need to create a javascript debug run configuration with the correct URL (http://localhost:8080/api/todos) and use this configuration to open your URL in browser. Another option: specify this URL in Live Edit/Browser tab of node.js run configuration you use to run your server.js and tick 'after launch' checkbox to automatically start the browser with this URL on server start.
In Webstorm 9, you can configure the port for debugging apps. In Preferences:
Build, Execution, Deployment > Debugger > Built-in Server Port