Node JS + Socket.IO + Chrome Extension Integration

Krunal Shah

Jul 05, 2017

2 min readLast Updated Dec 05, 2023

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.

TRT

We are a team of expert developers, testers and business consultants who strive to deliver nothing but the best. Planning to build a completely secure and efficient Node app? 'Hire Node JS Developer'.

· · · ·

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.

Projects Completed till now.

Discover how we can help your business grow.

"Third Rock Techkno's work integrates complex frameworks and features to offer everything researchers need. They are open-minded and worked smoothly with the academic subject matter."

- Dr Daniel T. Michaels, NINS

Related Resources

Our Services

You May Also Like