Creating a Network Enabled Chrome Extension

Created on: 2015-12-23 20:00:00 -0500

Categories: Web Development


Developing with Google’s Chrome browser is a quick way to create a MVC application. You can utilized the majority of the common HTML5 technologies to develop the UI View and access low level subsystems provided by the operating system. In this tutorial we will create a simple application to send a message to a server. The files used in this tutorial are available from my github repo.

When you create an application utilizing Google’s Chrome browser you will first need a manifest.json file. The below are the contents of the manifest.json file used in this Net Messenger app.

{
  "name": "Net Message Sender",
  "description": "An application that sends messages to a server.",
  "version": "0.1",
  "manifest_version": 2,
  "app": {
    "background": {
      "scripts": ["background.js"]
    }
  },
  "sockets": {
    "udp": {
      "send": ":8088",
      "bind": "*"
    }
  }
}

We are basically doing 2 things here. First we tell the application to run the background.js javascript file in the background to do some initialization of the application. We then define some udp sockets that will send data to the port 8088 and authorize the application to perform a UDP bind operation to the anywhere.

We will now take a look at the background.js file. This file contains the main initialization of the Net Messenger application. The application waits for an onLaunch event to be fired then creates a window which renders the window.html into the window view.

chrome.app.runtime.onLaunched.addListener(function() {
  chrome.app.window.create('window.html', {
    'outerBounds': {
      'width': 400,
      'height': 500
    }
  });
});

The window.html file (shown below) contains a web page which will help define what our application will look like. There is also a linkage to a network.js javascript file which will help aid in sending messages to a server and rendering the contents to the web page. It should be noted that onclick functions usually associated with button style functionality do not work. You have to bind the onclick event through Javascript as well be shown later.

<!DOCTYPE html>
<html>
  <head>
    <script src="network.js"></script>
  </head>
  <body>
    <div>Simple Network Test</div>
    <form>
      <input type="text" name="message" id="message">
      <input type="button" value="Submit" id="sendMsgButton">
    </form>
    <div id="reply"></div>
  </body>
</html>

The page provides a text box to enter a message and a button to transmit the message. The message will send a reply back and it will be placed in the reply div.

The essential portion of this application lies in the network.js file. This file helps create the network connectivity between this application and a server. The contents of the file is shown below. If you have followed my blog you may have seen the simple echo server I use for testing network applications. I have connected this application to that echo server. The contents of the input text box is sent to the echo server and the server simply returns the text back to this application. The interesting portion of the code is in the sendMsg() function.

document.addEventListener('DOMContentLoaded', function(){
  var sendMsgButton = document.getElementById('sendMsgButton');
  sendMsgButton.addEventListener('click', function() {
    sendMsg();
  });
});

function onReceive(info){
  console.log(ab2str(info.data));
  document.getElementById("reply").innerHTML = ab2str(info.data);
}

// Taken from http://stackoverflow.com/a/11058858
function ab2str(buf){
  return String.fromCharCode.apply(null, new Uint16Array(buf));
}


// Taken from http://stackoverflow.com/a/29576879
function stringToArrayBuffer(string){
  var arrayBuffer = new ArrayBuffer(string.length * 2);
  var buffer = new Uint16Array(arrayBuffer);
  //var stringLength = string.length;
  for(var i = 0; i < string.length; i++){
    buffer[i] = string.charCodeAt(i);
  }

  return arrayBuffer;
}

function sendMsg(){
  chrome.sockets.udp.create({}, function(socketInfo){
    var socketId = socketInfo.socketId;
    var myData = stringToArrayBuffer(document.getElementById('message').value);

    chrome.sockets.udp.onReceive.addListener(onReceive);

    chrome.sockets.udp.bind(socketInfo.socketId, '127.0.0.1', 0, function(retStatus) {
      chrome.sockets.udp.send(socketId, myData, '127.0.0.1', 8088, function(sendInfo) {
        console.log("sent " + sendInfo.bytesSent);
      });
    });
  });
}

To enable this extension:

You will see the application in the window, now click Launch.