14

I need to create a chrome extension which shows a notification when we get a message from socket io node js server.

How to include socket io in chrome extension? I am not able to get this to working.

Content.js:- Uncaught ReferenceError: io is not defined

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

Manifest:- This is not importing socket io Failed to load extension from: Could not load background script 'http://localhost:1337/socket.io/socket.io.js'.

    "background": {
    "scripts": [
        "http://localhost:1337/socket.io/socket.io.js",
        "background.js"
    ]
},

node server.js

var app = require('http').createServer(handler).listen(1337);
var io = require('socket.io').listen(app);

function handler(req,res){
    console.log(req.url);
    res.writeHead(200, {'Content-Type':'text/plain'});
    res.end('Hello Node\n You are really really awesome!');
}

io.sockets.on('connection',function(socket){
    socket.emit('hello',{text:"node!"});
});
Dinesh Jeyasankar
  • 1,043
  • 3
  • 10
  • 24
  • Can you simply include a static file in the extension, or does it need to be generated each time from the server? – Xan Jun 25 '15 at 22:11
  • When ever there is a socket emit from server I need to show a notification in chrome extension. – Dinesh Jeyasankar Jun 25 '15 at 22:19
  • What does it have to do with the JS file? – Xan Jun 25 '15 at 22:20
  • http://stackoverflow.com/questions/17805140/chrome-extension-use-the-same-socket-io-connection-under-background-page-and-con I am trying the solution given by chickenrice, but not sure how to import socket io in chrome extension – Dinesh Jeyasankar Jun 25 '15 at 22:26
  • Simply put: it's hard (not impossible, but hard) to make Chrome load an external file as a script. Do you _really_ need to, or can you simply add `socket.io.js` to the extension? – Xan Jun 25 '15 at 22:33
  • Ok let me try adding socket io in the extension. Thanks. – Dinesh Jeyasankar Jun 25 '15 at 22:37
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/81655/discussion-between-dinesh-jeyasankar-and-xan). – Dinesh Jeyasankar Jun 26 '15 at 15:36

2 Answers2

15

Since you only need the socket.io-client, this is what you should be doing:

"background": {
  "scripts": [
    "socket.io.js",
    "background.js"
  ]
},

Download and add the socket.io.js file from here: https://raw.githubusercontent.com/Automattic/socket.io-client/1.3.5/socket.io.js

Rahat Mahbub
  • 2,967
  • 17
  • 29
  • 1
    It's not a good idea to point to a tip-of-the-tree version of a library, especially in a client-server architecture. One should look at a release appropriate for your server-side code, e.g. here: https://github.com/Automattic/socket.io-client/releases – Xan Jun 29 '15 at 12:28
  • Thanks for pointing that out. I couldn't find the releases last time for some reason. – Rahat Mahbub Jun 29 '15 at 17:33
  • 2
    @RahatMahbub i get error socket.io.js:1 Uncaught ReferenceError: require is not defined – shzyincu Aug 19 '16 at 11:21
3

Note in 2020:

Rahat's answer is fine except the socket version , when you use it in background script it always reconnects , so if you use inappropriate version of socket.io.js you 'll get something like this enter image description here

but with socket.io.js 2.3.0 worked correctly as it should enter image description here here is a link which worked for me https://cdn.jsdelivr.net/npm/socket.io-client@2/dist/socket.io.js

More info at https://www.npmjs.com/package/socket.io-client

Gleb L
  • 61
  • 1
  • 4