How to : build a simple chrome extension [tutorial]

Written by Alex Wolkov

Intro :

Chrome extensions are a way of enhancing a users behavior, by extending the Google Chrome browser.
There are many things that can be achieved with chrome extensions. You can either have your own html view, get access to users bookmarks, new tab page or history,
You can inject code into websites and add functionality to enhance a users experience with that site.
Chrome Extensions are based on javascript, and are very accessible to front end developers, who have JS experience.

In this tutorial we will create a simple chrome extension, from the enhancing variety.
We will learn how to add a button on a plugin page, and use information from that page for our functionality.

Diving in :

First of all we need to decide what to enhance. has a plugin repository, and it allows you to download a zip archive of a plugin, for later uploading to your blog.
This is sometimes uncomfortable, and they later introduced a way of installing plugins right from the admin panel of your blog.
However, every time I’ve Googled for a specific plugin, I’ve ended up copying it’s name from, login to my admin panel and search that plugin from there.

Our extension can help us automate this proccess.
We will learn how to add a quick “Install” button for plugins on page.
Clicking that button will ask the user to enter his blog url, and then open a popup with the install page for that plugin.

Extensionizr to the rescue

Chrome extensions are structured exactly like a regular website, with 1 exception.
We need to specify a manifest.json file with all the options & settings of our extension (as mentioned before, an extension can do a lot of things, some of them requires permission from the user, those permissions are definable in the manifest file)
As this can get tedious, I’ve automated this process a bit with

Getting started :

Go to, and select “Hidden”.
Our extension won’t have any views, it will only enhance the wordpress site.

Next check “No background”, as we don’t need a background process for our extension.
A background process lets you run a javascript proccess, in the background, while the user surfs the web.
But for our purpose we only need to run code when the user goes to

Check both inject.css and inject.js. Those are the files that will be injected into the url we choose ( every time a user visits them, and will run in the page’s context.
*One thing to note, an extension won’t have access to scripts already running on that page, according to Chrome’s security policy.

Click “Download it!”, and you should receive a zip file with a basic structure of a chrome extension and a manifest.json file in place.

Injection time :

Edit the manifest.json file, and specify the url our scripts will execute in.
We define a new context script section, add a js and a css file, and tell chrome to inject those files every time the user opens

Next we need to find out where we in the page want to inject our button.
I figured the best place for it was above the “download” button that’s already on the page.
Insert our button here marks the download button elements with a[itemprop=”downloadUrl”].
In inject.js we add the following code to query the download button by the itemprop attribute.

Now that we have our download button element, we can extract the plugin name from it’s href attribute.
Because all of wordpress plugin urls are similarly structured, we can extract the plugin name from the url with ease.

Next we prepare the element to be inserted and add a click event handler to it, then insert it near the previously found download button.

Handling clicks :

We need to add code to handle the clicks on the install button so we can open the users blog admin panel with this plugins install page.
For that we need to ask the user for his blog url, and then save it to localStorage for a better experience,
so the user won’t have to enter the same url over and over next time.

Some additional styling

Our button will already receive the same style as the download button, but we want to make it look different.
In the inject.css add the following color to the button :

And that’s it, now all we have to do is test out our extension.
In chrome, navigate to about:extensions, and enable the “developer mode”.
This will show 2 additional buttons in the UI, “Load unpacked extension” and “Pack Extension”

While you develop a chrome extension, you have the option of loading a directory on your computer, work on files, and chrome will address that directory as the extensions code.
This means you can change your code, reload the extension and see the changes immediately.
When you want to send your extension to someone, chrome will pack it in a CRX file, which is a special archive for installing extensions.

We click on “Load unpacked extension”, and choose our directory and Viola.
End result
Our extension will execute code each time the user will surf to and chooses a plugin
And add an “install” button that will prompt him to enter his blogs URL, and then conveniently open an install page for that specific plugin.
The extension can be found in Here and the code is on Github