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 wordpress.org plugin page, and use information from that page for our functionality.

Diving in :

First of all we need to decide what to enhance.
Wordpress.org 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 wordpress.org, 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 WordPress.org 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 extensionizr.com.

Getting started :

Go to http://extensionizr.com, and select “Hidden”.

Extensionizr.com
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 wordpress.org/extend/plugins/

Check both inject.css and inject.js. Those are the files that will be injected into the url we choose (wordpress.org/extend/plugins) 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 wordpress.org/extend/plugins/

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
Wordpress.org 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 http://wordpress.org/extend/plugins 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

  • Awesome tutorial man, really impressed.

  • altryne

    Glad you liked it!

  • Dude, great tutorial. I’ve gone from zero knowledge on chrome extensions to building one 🙂 Thanks! and Extensionizr is awesome!

  • Eugene Liang

    nice work here! really liked the http://extensionizr.com/ idea.

  • altryne

    Thanx bro! I’m glad u liked it!

  • altryne

    Thanx! this was the idea

  • 挖煤

    删减

  • Arfeen Godil

    Hi, just a quick comment. When I try to download the zip file from extensionizr.com the zip file cannot be opened by winzip or 7zip. It says that the zip file is corrupt.

  • asd

    same problem here…

  • I think it’s the inject.css file that makes the troubles, can u remove it and try again?

  • asd

    addon doenst work, even addon from google webstore doesnt work!

  • Scott Smith

    When I remove inject.css the zip is no longer corrupt. When I add it back in, it is corrupt.

  • Marcelo Ortiz Viveros

    Great app!! The tutorial, really simple to follow! I used it to build an extension for Goodreads that injects a button that searches the title of book in the Pirate Bay… I don’t plan to use it often, but it was fun to code. Are you going to write more tuts? Thank you and congratulations from Chile!

  • Thanx @marceloortizviveros:disqus for the kind words!

    I will write from time to time.

  • Philip

    addon doesn’t inject / load content script

  • Sean

    Phillip is right, the addon dosent inject or even load content script

  • cenk

    It doesn’t work. he is right.

  • Russell

    2 years on, and its still useful 🙂 But… Is it just me or is there a code typo in the section just above ‘Handling Links’

    download_button should be download_btn, or visa versa. But the same one either way.

    Wrong:

    Correct:

    Please say if I got that wrong….?

  • Sharma Rahul

    Bro Nice Example ! BTW you can wp-cli’s single command to Do this.