How to : build a simple chrome extension [tutorial]
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”.
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/
|
1 2 3 4 5 6 7 |
"content_scripts": [ { "matches": ["http://wordpress.org/extend/plugins/*"], "css": ["src/inject/inject.css"], "js": ["src/inject/inject.js"] } ] |
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.
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.
|
1 |
var download_link = document.querySelector('a[itemprop="downloadUrl"]'); |
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.
|
1 2 3 4 |
/* url example : http://downloads.wordpress.org/plugin/tumblr-importer.0.7.zip */ /* We split the url by the / char, then take the last bit which is the file name split it by "." char and take the first array item which is the plugin name. */ var plugin_name = download_link.href.split('/').pop().split('.')[0]; |
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.
|
1 2 3 4 5 6 7 8 |
var download_btn = document.createElement('p'); download_button.innerHTML = '<a href="#">Install</a>'; download_button.className = "button special-plugin-button"; download_button.dataset.name = plugin_name; /* insert the `p` element into the parent element near the download button */ download_link.parentElement.insertAdjacentElement('beforebegin',p); /* now that our button is in the DOM, add click event listener to it */ p.querySelector('a').addEventListener('click',clickHandler,true); |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
clickHandler = function(){ /* check if we already have his url in localstorage and if not place http:// there */ default_url = localStorage["blog_url"] || 'http://'; /* ask the user for url, pre-fill with previously entered url */ var answer = prompt('Please insert the url of your blog without the wp-admin',default_url); if(!answer) return; /* disable the process if user clicked "cancel" */ localStorage["blog_url"] = answer; /* join the user's url with the full URL of plugin install on wordpress, and add the plugin name*/ full_plugin_url = answer + "/wp-admin/plugin-install.php?tab=plugin-information&plugin=" + plugin_name +"&TB_iframe=true&width=600&height=550"; /* and open a new window with the combined url */ win = window.open(full_plugin_url,"plugin_install","width=600,height=550,location=no,directories=no,status=no,menubar=no,toolbar=no,resizable=no"); } |
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 :
|
1 2 3 4 5 |
.special-plugin-button{ background: #6779DB !important; margin-bottom: 11px !important; /*add !important to make sure our button gets the styles we want */ } |
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.
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
