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.
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.
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.
To enable this extension:
You will see the application in the window, now click Launch.