Chrome IP Address

Today we will be creating a plugin called Chrome IP Address. This plugin will tell you your current IP Address.

In order to do this you will need to follow the tutorial on enabling plugins shown here:
http://chrome-developers.blogspot.com/2009/07/enabling-extensionsplugins.html

Next we will need to create a new directory. You can create it anywhere you like, but I will create mine on the hard drive. Create a new folder called “chrome-ip” mine is located at “c:\chrome-ip”.

Lets now tell Google Chrome to load this extension as we are developing it. Right click on Google Chrome and bring up the properties of the shortcut and edit the "Target". We will be adding the following: --load-extension=C:\chrome-ip\

Thus our entire "Target" will look something like the following: C:\Users\Username\AppData\Local\Google\Chrome\Application\chrome.exe --enable-extensions --load-extension=C:\chrome-ip\
Finally, lets load up Google Chrome to see if everything is working properly. If it is we should get an error such as the following.

Let’s move on to create the manifest file (manifest.json). This tells Google Chrome how to handle this plugin.

This is a very simple manifest file that describes what the extension is (name, description, and version). Finally it tells Google Chrome that this extension uses a toolstrip and its file is "toolstrip.html"

For this project I will be using PHP. You will need to find a free server. We will be using PHP to find the IP Address for us. There are other websites that you can use (such as http://www.whatsmyip.org/) but you will need to read their agreements before you start using them.

So depending on what you tend to do this may be a little different. Currently, I am using a PHP file which you can read below here.

This PHP file will print/echo the remote address that called it (our address). You should be able to upload this to a free host or use your own server to host it. Once you have this uploaded you should be able to type in the location (example: http://www.example.com/ipaddress.php) and it will show you your current ip address.

Now that we know our file is working we can continue working on the extension itself. Let’s go ahead and create the toolstrip.html file. Once we have that created we can go ahead and start coding.

Our "toolstrip.html" is basically a webpage. Let’s start off with the basic webpage template.

Now we are going to add our Google Chrome toolstrip-button.

Now if we load up Google Chrome we will now see a new toolstrip at the bottom with the picture of a world on it. You can download this world image from here: http://www.famfamfam.com/lab/icons/silk/

Now that we have our template for the toolstrip in place let’s get started on the code itself.
We first need to add some place holders into our html for displaying our IP Address. I will also add the handlers (onload/onclick) to get the IP Address and display it to the user.

Now if we load Google Chrome we will have a nice Globe with nothing beside it. This is exactly what we want. Let’s continue on here by adding the JavaScript into our Toolstrip.

Here we are declaring a variable called showIP. This will be our global variable to switch between showing and hiding the IP Address (saves space on the Toolstrip). Next we declare our two functions called get_IPAddress and toggleIPAddress. get_IPAddress is going to be our main function. It will actually call the php page and obtain the users IP Address for them. The toggleIPAddress function will be called whenever the user clicks on our toolstrip. Let’s continue and add some code into them.

Let’s start off with the toggleIPAddress function as it is the simpler.



What this function is doing is changing the display (css) style of our div that is called ip_address. It will change its display to none (hidden) and inline (shown). That is all this function does. By default because of our variable called showIP the IP Address will be hidden. The user must click on the globe to obtain the IP Address.

Finally we’ll code the main function called get_IPAddress.

We will go through this code step by step. First we log to the console that the toolstrip has loaded and this function has been called (console.log). This command is extremely useful for debugging as a developer as well.

Next we will need to create an XMLHTTPRequest object. This object we will use to send and receive the html from the PHP page that we created on “example.com”. Finally , we add some place holders for the success and failure handles. We will only be using the failure handle here but you could expand on this more by adding in logging to both of them.

This next block of code (try/catch) assigns a function to the XMLHTTPRequest onreadystatechange event. Whenever the state changes to 4 (ready) this function will be called. If there is an error in this function it will drop out to the catch block which we throw our exception. If there is no error we replace the element ip_address with the response text from our XMLHTTPRequest object (this will be the users IP Address).

Now that our brain function is wrote we need to send the request to the page that we created. These next two lines will do that.

Now you can run Google Chrome and see the extension in action. The only thing left to do is to create a CRX (which we can give out to other users to install the plugin).

You can read exactly how to create a CRX (package) over at the Google Chromium Documents located here http://dev.chromium.org/developers/design-documents/extensions/packaging

I have packaged all the above information into a single zip file. You can download it here http://www.tutelagesystems.com/chrome/chrome-ip.zip