Node JS + Socket.IO + Chrome Extension Integration

Krunal Shah

Jul 05, 2017 | 2 min read

Node JS + Socket.IO + Chrome Extension Integration

The followings are the steps to integrate Socket.io in Chrome extension. We wanted to allow message passing in our Chrome application, and socket.io is the best option to do so. Chrome extension doesn’t allow its native socket connection due to security issues. But we can achieve this via JavaScript socket connection. On the server side, we have used Node JS. The following is the architecture of Node JS, Chrome extension, and Socket.io integration.

SERVER SIDE CODE NODE JS

SERVER SIDE CODE (NODE JS)

Step 1:

In your express application, add socket.io via installing socket.io

npm install socket.io

Step 2:

Now add this dependency in your app. js file.

var express = require('express');
var app = express();

// Socket connection

/* Creates new HTTP server for socket */
var socketServer = require('http').createServer(app);
var io = require('socket.io')(socketServer);

/* Listen for socket connection on port 3002 */
socketServer.listen(3002, function(){
console.log('Socket server listening on : 3002');
});

/* This event will emit when client connects to the socket server */
io.on('connection', function(socket){
console.log('Socket connection established');
});

/* Create HTTP server for node application */
var server = http.createServer(app);

/* Node application will be running on 3000 port */
server.listen(3000);

CLIENT SIDE CODE

Step 1:

In your chrome extension add socket.io.js in your index.html you can find it on:

https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.7.3/socket.io.js

Step 2:

Now add the following script in your js file where you want to establish your connection.

/* Connects to the socket server */
var socket = io.connect('http://localhost:3002');
socket.on('connect', function() {
console.log('Client connected');
});

Hope Shared code would be helpful. For Facebook, Google and Slack integration stay tune. We will be back soon.

· · · ·

Third Rock Techkno is a leading IT services company. We are a top-ranked web, voice and mobile app development company with over 10 years of experience. Client success forms the core of our value system.

We have expertise in the latest technologies including angular, react native, iOs, Android and more. Third Rock Techkno has developed smart, scalable and innovative solutions for clients across a host of industries.

Our team of dedicated developers combine their knowledge and skills to develop and deliver web and mobile apps that boost business and increase output for our clients.