There is a way to use socket.io client inside a chrome extension (manifest v3)

[Elior2739]

Hi

I'm trying a while to use socket.io-client inside a chrome extension service worker.

I tried multiple ways to accomplish this:

1. Use "type": "module" inside manifest.json and try to import from the cdn

import idk from "https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.6.0/socket.io.min.js"

console.log(idk)

But it didn't work and throwed an error: Uncaught SyntaxError: The requested module 'https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.6.0/socket.io.min.js' does not provide an export named 'default'

Also tried:

import { io } from "https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.6.0/socket.io.min.js"

console.log(idk)

But throw an error: Uncaught SyntaxError: The requested module 'https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.6.0/socket.io.min.js' does not provide an export named 'io'

2. Try to import from a local file, I download the file manually from https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.6.0/socket.io.min.js and tried to use

import { io } from "./socket.js"

which throwed an error: An unknown error occurred when fetching the script.

manifest.json:

{
  "manifest_version": 3,
  "name": "Extension",
  "version": "1.0",
  "description": "extension",
  "permissions": [
    "storage",
    "tabs",
    "activeTab",
    "scripting"
  ],
  "background": {
    "service_worker": "scripts/background.js",
    "type": "module"
  },
  "action": {
    "default_popup": "popup/default/index.html"
  }
}

I'm really don't know what to do and what I'm doing wrong, So that's is the reason why I asked it here.

[tobycm]

I think to use import, you will have to use the esm version of socket.io
Try change socket.io.min.js to socket.io.esm.min.js

[nirgn975]

This worked for me.

[mt-ks]

Same issue.

[Elior2739]

I forgot about this discussion, You can use it inside a chrome extension but it's more complicated.

You can use Webpack for the background scripts, I'll check today if I have the files of the extension that I worked on if yes I will send you for example

[BingeCode]

I forgot about this discussion, You can use it inside a chrome extension but it's more complicated.

You can use Webpack for the background scripts, I'll check today if I have the files of the extension that I worked on if yes I will send you for example

Could you share your setup? I am struggling with the same and cannot get it to work. @Elior2739

[Elior2739]

Hi, Sorry for the late response. I'll try to send the project itself tomorrow

[nikhil478]

@Elior2739 could you please send it again i am facing same issue :)

[nikhil478]

@mehmetbeyHZ have you find any workaround

[tobycm]

@nikhil478 https://github.com/tobycloud/youtube-watch-together/blob/main/extension/background.js
this is how I did it

[Reza1290]

use watchify, or some bundle lib