I am trying to use socket.io library in a service worker of y Chrome extension, but when I try to load it in Chrome I get the error: Uncaught SyntaxError: "Cannot use import statement outside a module".
I got the library from here, then I saved the it in my extension folder, in socketIo.js:
Then in my service_worker.js, I try to import it:
import io from './socketIo.js';
const socket = io("http://localhost:3002");
Since it as service worker, I do not attach it to my extension html file, therefore I can't simply set the worker as a module like this:
<script type="module" src="./service_worker.js"></script>.
Also, since extensions are not Node.js applications, they don't have a package.json where I could set the property "type": "module.
And as you can see I used both the relative path and the extension of the file imported, as suggested here: Chrome Extension Service Worker not Supporting Importing Other JS Files or NPM Packages
Now I've added the ES module version of socket.io and its "map" file.
And updated my service worker in manifest.json to be a ES module too:
But when I tried to load the extension again, I get this warning: "Service worker registration failed. Status code: 3", and the generic error:
Since it as service worker, I do not attach it to my extension html
file, therefore I can't simply set the worker as a module like this: .
Also, since extensions are not Node.js applications, they don't have a
package.json where I could set the property "type": "module.
Register the service worker
You can optionally specify an extra field of "type": "module" to
include the service worker as an ES Module, which allows you to import
further code.
manifest.json
{
"manifest_version": 3,
"name": "socket.io",
"version": "1.0",
"background": {
"service_worker": "background.js",
"type": "module"
}
}
But the socket.io version you're using isn't an ES Module:
Uncaught SyntaxError: The requested module '/socket.io.js' does not provide an export named 'default'
So I downloaded socket.io.esm.min.js and socket.io.esm.min.js.map from https://cdn.socket.io/4.5.3
I don't know if they have an ES Module version of socket.io 1.7.3
Including the .map file in the extension prevents this error in the service worker console:
DevTools failed to load source map: Could not load content for
chrome-extension://cfdinlnmiepoligakoinbffeaphkfmmp/socket.io.esm.min.js.map:
System error: net::ERR_FILE_NOT_FOUND
background.js
import io from "/socket.io.esm.min.js";
const socket = io("http://localhost:3002");
The service worker console still gets flooded with this error:
Event handler of 'beforeunload' event must be added on the initial evaluation
of worker script.
But I think there's a solution for that on Stackoverflow.
Or not:
Add Socket.io to service_worker (chrome extension)
Remote Socket.io Connection not working from a manifest v3 extension
Also, put the libraries socket.io.esm.min.js and socket.io.esm.min.js.map inside the same folder of service worker, in the same level (not in a sub folder).
After you made this changes, just refresh you extension in chrome://extensions/. But if this doesn't work, delete your extension and load it unpacked again.
I'm trying to migrate Change Colors to Manifest V3, since support for V2 is ending.
Now I'm get stucked against the error below, which is shown in inspect views when you load the extension.
background_page.js:1 Uncaught (in promise) Error: Could not establish connection. Receiving end does not exist.
background_page.js:1 Uncaught (in promise) Error: Cannot access contents of url "devtools://devtools/bundled/worker_app.html?remoteBase=https://chrome-devtools-frontend.appspot.com/serve_file/#3cf3e8c8a07d104b9e1260c910efb8f383285dc5/&browserConnection=true". Extension manifest must request permission to access this host.
Here is my Pull Request to show all changes I made.
I'm not sure this error must be resolved to work properly, or you can just ignore it.
But the extension isn't working with the current source.
How to resolve the error?
Or, if this error isn't crucial, how to make the extension to work?
I am using puppeteer in my nodejs application to convert html file into pdf. This is working fine in my local server and pdf is getting generated. But this is not working in cPanel. I am getting error similar to this. I tried everything mentioned on that but nothing works.
I tried setting the executable path of chrome in puppeteer in cpanel but in vain. Errpr =>
Failed to launch the browser process!
/home/xxx/public_html/xxx/node_modules/puppeteer/.local-chromium/linux-1002410/chrome-linux/chrome: error while loading shared libraries: libatk-1.0.so.0: cannot open shared object file: No such file or directory
I tried different packages like html-pdf and node-pdf-generator. But the problem is I have designed some ejs templates according to chrome and then I am generating html files from these ejs templates. After that I am saving the pdf file in buffer and uploading this buffer to google bucket.
Flow: ejs templates -> html file -> pdf buffer -> stream buffer to gc
bucket
In other packages I am facing these issues:
Either the template is not coming as expected
Or The package has no option of storing generated pdf file in buffer.
Any solution or a different library?
I have made a module named as services which serves the loading bar, notifications and flash banner etc to other projects. I bundled this module by babel and it was running perfect but as the requirements kept growing for services so i have to bundled this from webpack-2 because of css type issues. I bundled it as a library. But when i uses notifications which are imported from services, it gives such warnings
Uncaught Error: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's `render` method, or you have multiple copies of React loaded
and
index.js:25 Uncaught TypeError: Cannot read property 'componentWillEnter' of undefined
PS: I have already tried resolve.alias and externals properties of webpack but no use :( Any suggestions Please?
I published a chrome extension to testers only. The app seems to work very well. I don't see any errors when inspecting the console for the popup or the background page. However, I get the following error when inspecting the console for any web page: "Uncaught Error: "getBackgroundPage" can only be used in extension processes. See the content scripts documentation for more extensions/schema_generated_bindings.js:418"
This app contains several JavaScript files, but each one includes the code within a self executing function. The "getBackgroundPage" calls are in the JavaScript files.
Could you please help? Isn't the app I built an isolated module independent from any web page? How can I prevent this error from happening?
I had the same error when I was trying to communicate with the background page from my content script. The correct way of doing it is via Message Passing. It is very well documented here : https://developer.chrome.com/extensions/messaging.html