manifest.json

{
  "name": "SocketIO Extension",
  "version": "1.0",
  "manifest_version": 3,
  "background": {
    "service_worker": "background.js",
    "type": "module"
  },
  "permissions": ["activeTab"]
}

background.js

// import { io } from 'socket.io-client';

// import { io } from 'https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.7.5/socket.io.js'
// import { io } from 'https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.7.5/socket.io.min.js'
// import { io } from './socket.io.esm.min.js'
// import { io } from './socket.io.js'
import { io } from './socket.io.min.js'
// import { io } from "https://cdn.jsdelivr.net/npm/[email protected]/+esm";
const socket = io("http://localhost:3000");

socket.on("connect", () => {
  console.log("Successfully Connected to server with socket id:", socket.id);
});

socket.on("message", (msg) => {
  console.log("Message from server:", msg);
});

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  socket.emit('Registration', 'Extension Client');
});

// chrome.devtools.network.onRequestFinished.addListener(function(request) {
//   console.log(request);
//   socket.emit("Registration", "Extension Client");
// });

// var socket = io.connect('http://localhost:3000');
// socket.on("hello",function(data){
//     console.log(data.text);
//     chrome.runtime.sendMessage({msg:"socket",text:data.text},function(response){});
// });

package.json

{
  "name": "socket_io",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "type": "module",
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "socket.io": "^4.7.5",
    "socket.io-client": "^4.7.5"
  }
}

Problem:
I’m encountering an issue where the io function is not defined, resulting in the error:

Uncaught ReferenceError: io is not defined

Uncaught SyntaxError: The requested module ‘./libs/socket.io.js’ does not provide an export named ‘default’

I’ve tried various import methods, including:

Importing from a local file (socket.io.js, socket.io.min.js, etc.)
Using a CDN link (e.g., jsDelivr)
None of these methods seem to work, and the io function remains undefined. I’ve also ensured that the server is running and accessible.