How I Made the Domai.nr Chrome Extension

Writing a nifty Chrome Extension honestly isn't as difficult as you might think. In this tutorial, I'm going to walk you through how I took an API offered by a great domain-name search service, Domai.nr, and created a Chrome extension for them, simply using their API.

Step 00: What We'll be Creating Today

In this tutorial, I'll walk you through how I made the Domai.nr Chrome Extension, using simple HTML, CSS, and jQuery. The typical workflow of this extension can be broken down like so:

Click the icon

Search for a domain

Find one that's available, and click it

Purchase it using one of the links on the extension

So, it's not revolutionary or ground-breaking, but when you're looking for domains fairly frequently (as I'm sure many of you are), it does actually serve a purpose. I wanted to take this opportunity to not only show you how I made this specific extension, but also, more generally, how to make an extension for the Chrome web browser.

Step 01: What's in a Chrome Extension

There are a few different kinds of chrome extensions, but we'll be making a browser action extension that shows a popup when clicked. Google has a great overview of what is in each extension. Essentially, what you need to know is that each extension is a directory of files, much like a website. I'll be discussing more about each of these files later on in the tutorial, but every extension's directory contains the following files, and this is taken directly from Google:

A manifest.json file

One or more HTML files (unless the extension is a theme)

Optional: One or more Javascript files

Optional: Any other files your extension needs, i.e. image files

More on the JSON File

The manifest file provides mostly meta information about the extension. This is where you define things like the name, version, icon, and even permissions.

Step 02: Taking a Look at Domai.nr's API

Domai.nr's API can be found here. We're using the JSON API, which has two methods: Search and Info. It's called the JSON API because, well, it returns JSON. Both methods respond to a GET request, so we can just concatenate whatever we need to in our request URL, and the rest will fall into place.

Step 03: Digging into the manifest.json File

As you can see, a Chrome extension really isn't much more than a basic website. The structure we'll be using is as follows:

domainr.html - this is equivalent to the index.html page in most websites. I prefer to name the main HTML file the same as the extension itself - that's just a personal preference.

icon.png - this 128px by 128px icon is what the user sees in the toolbar. When they click on this icon, it will fire our extension.

images/ - this directory holds all of the images we will be using, just like a traditional website. I contacted the creators of Domai.nr and got permission to use all of the images they have on their website, just scaled down. So, I just used Chrome's Web Inspector and downloaded copies of them, and scaled them accordingly.

manifest.json - the manifest.json file, like explained above, is where we define many properties about our extension. It's required, but is pretty simple to create.

script.js - this JavaScript file is where all of our jQuery is held. We will reference it in the domainr.html file, and it will control all of the logic in our extension.

Our manifest.json File

Time to dig into our code and get started! Our manifest.json file is fairly simple. To see a more detailed summary of all of the fields supported in a manifest file, check this out. You can find all of the code used in our manifest.json file below:

{
"name" : "Domai.nr Search", // the name of the extension
"version" : "1.0" , // version number
"description" : "Give your domains a happy ending.", // description used in the Chrome Webstore
"browser_action" : {
"default_icon" : "icon.png", // specifies the default icon
"popup" : "domainr.html" // the page to show when the icon is clicked
},
"permissions": [
"http://domai.nr", // we give the extension permission to access data on these sites.
"http://domai.nr/*" // we suffix it with a *, so /api is accessible
]
}

As you can tell by the comments, it is fairly straightforward. The permissions section is extremely important in our case. Otherwise we'll get an XHR error because the extension can't access domains you don't give it permission to. Hence, the importance of the "permissions" section.

Step 04: Getting Started

For our extension, there will basically be three parts:

The <form> element, with an <input>, which is where the user types in the query they're looking for. This is what this step of the tutorial will focus on.

A <ul> with several <li> elements inside of it, that gets populated based on their request in part 1.

Information regarding the option they select, based on the list items presented to them in part 2.

So, I think it's fair to say that the extension gains complexity as the user progresses through those parts, or stages described above. With that being said, let's dig into the HTML I used to structure this.

Alright - that's it, as far as getting the input from the user is concerned (well, on the HTML side, at least). To be a bit more descriptive, that code is what the user will see when they click on the icon to trigger the extension. It's just an input box that we'll style to look like domai.nr's site has it. You'll notice that I merely have a <form> element - no method or action has been defined. I didn't need to use those, as jQuery's $.getJson method takes care of that for us. This would be a great time to test out the extension, wouldn't it?

How to Test Local Extensions

To test an extension in development that is on your local machine, simply follow these steps, and then you'll be up and running with it in no time:

Click Window and select Extensions.

On the right, towards the top of the page, you'll see a link that toggles the Developer Mode. Click that.

Select Load unpacked extension..., and navigate to the directory the extension is in. Select that directory, and that's all!

You'll want to keep the extensions page up in a tab, though, because every time you make a change to the extension and want to test it, you'll need to click "Reload" in the extensions page for that specific one.

We've got it installed locally, but let's be honest – it's looking pretty hideous. Let's pretty it up so the Domai.nr guys would be proud to have an extension like this. You'll want to download the images I use here, and place them in an /images directory inside of your extension folder, because I reference some of them eventually in the CSS (and in the HTML above, too).

Okay - we've got the first part all coded up and looking good. In the next section, we'll focus on taking the user's query and pulling some data from Domai.nr's API.

Step 05: Show the User Some Domains!

In this section, we'll take what the user typed in the <input>, and query it against Domai.nr's API. Based on those results, we'll display a list of all the results returned, as well as an icon indicating the status of that domain. So, let's jump right in!

Before we get into some of the jQuery behind the extension, I think this would be a good time to bring up how to inspect an extension, just like a regular website. Instead of right-clicking somewhere on the page and selecting "Inspect Element", you'll simply right-click on the extension, and select "Inspect popup". That's all there is to it!

This section is a bit more interactive, so it's the starting point for our Javascript. I'll be using jQuery for simplicity's sake.

That section above, while only a few dozen lines, gets quite a bit done:

We utilize jQuery's getJSON method, and use it against the Domai.nr's API.

Within that function, we simply iterate over all of the results it returns.

On each result, we check its availability status, and return the correct <li> based on that conditional.

Once we've gone through all of the results, we hide the AJAX loader.

That else statement in there – that's used when the query is blank. It just resets a few things that may not be blank, or may need to be reset to their default state.

And we're not quite ready to test it just yet. You'll see that in the jQuery code above, we're targeting a list element with an id of results-list that's not yet in the DOM. So, let's go ahead and add that just after the <form> element in domainr.html.

And now it's time to test. Don't get your hopes up though, becase it's going to look pretty ugly...

Assuming all's well, you should now see a list of all the domains related to a query the user types in (like above). While it is indeed pretty ugly-looking, we have our extension now correctly hooked into the Domai.nr API's search method, and are retreiving the results correctly. Congrats!

Before we move on to the final section of the tutorial, though, we've got some cleaning up to do. We need to display the icon that shows whether the domain is available, maybe available, or taken, and also just clean up the look of the list. Some simple CSS will take care of that with no problem.

Great - now it's looking all nice and clean – just like the real Domai.nr site! Finally, it's time to get to the good stuff.

Step 06: They've Selected a Domain

This last section changes the extension's UI the most, but if we break it down into steps, it really isn't too bad at all.

Okay - let's think this through. First, when the user clicks on a doamain, we want the popup to get wider, and display information regarding that specific domain. No problem at all. However, we'll need to add a bit more structure to our code to get it just right.

So, the comments should be explanatory enough for that HTML structure, however, we won't really notice much until we give our extension some more interactivity. Now that we've got the structure down, let's go ahead and do that by adding some jQuery.

That code above loaded in all of the information we need for the Wikipedia URL, IANA URL, Whois information, site link, and extension information. Below, we'll look into how I loaded the registrar information, among other things!

All Done!

And there you have it! Congratulations, you just made a nifty Chrome extension using a great service's API! I built this out while I was in an airport waiting for a layover; that helps to prove how simple and quick making one of these can be. Honestly, a Chrome extension is no more difficult than a regular web page. If you have any questions at all, please leave them in the comments below!