Chrome extensions are very powerful way to make Chrome (even) better. They give you (=the developer) a lot of power to extend the functionality of the browser and gain more productivity and power in daily tasks. In this tutorial we will learn how to create a basic extension that give you the power to open all the special information pages that Chrome offers. For the ones that wish to see code of a more complicated extension that does some networking and notification – You might want to have a look at the work of my friend Mr. Smus on ‘Stackoverflow notifier‘. Ok, let’s start to role.
Getting started with your first extension
We will take for example the case of opening some Chrome internal pages. I’ve wrote this extension more then a year ago because I wanted ‘one-click’ from many interesting internal pages that chrome give developers that want to have a look at some internal parts. For example:
- chrome://flags
- chrome://dns
- And many more can be found: chrome://about/
Browser Action or Page Action
We could choose that the user will see our extension all the time with a little button that will be place on the right side of the browser or to have our activation icon popup inside the address bar (the omni box) only when the user get to the page that our extension is working on. In our example we want the user to be able to activate the extension all the time so we will go with browser action.
The first thing we need to write is a short manifest file that describe our extension. You can see we declaring some trivial fields like: name, version, icon and more important ‘permissions’. This will give the user a warning dialog during the installation process to warn about the permissions that our extension will have. It’s good practice to use as little as possible since it will improve the confidence users will feel – thus, you will have more installations. Another good tip is to invest the time and effort to use great icons/graphics. It will also improve the user experience.
manifest.json
{
"name": "Chrome Short Cuts",
"version": "0.1",
"description": "Show short cuts and tips on Chrome",
"icons": {
"48": "app-icon-48.png"
},
"background_page": "background.html",
"permissions": [
"contextMenus"
],
"browser_action": {
"default_title": "Display short cuts and tips",
"default_icon": "toolbar-icon20.png",
"popup": "popup.html"
}
}
After we have our manifest file we need to code (fun time) the logic/data/ui of our extension. Here is our simple code of popup.html:
| <!doctype html> | |
| <html> | |
| <head> | |
| <meta name="author" content="Ido Green"> | |
| <!-- move it to another file --> | |
| <style> | |
| html { | |
| width: 350px; | |
| height: 600px !important; | |
| } | |
| </style> | |
| <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.css" /> | |
| <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> | |
| <script src="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.js"></script> | |
| <script> | |
| // start the party | |
| $(document).ready(function() { | |
| $("#ext").click(function() { | |
| chrome.tabs.create({url: "chrome://extensions/"}); | |
| }); | |
| $("#down").click(function() { | |
| chrome.tabs.create({url: "chrome://downloads/"}); | |
| }); | |
| $("#set").click(function() { | |
| chrome.tabs.create({url: "chrome://settings/"}); | |
| }); | |
| }); | |
| </script> | |
| </head> | |
| <body> | |
| <div data-role="page" id="home" data-theme="a"> | |
| <div data-role="header" data-theme="b" > | |
| <h1>Chrome ShortCuts</h1> | |
| </div> | |
| <div data-role="content"> | |
| <ul data-role="listview" data-theme="d" data-filter="true"> | |
| <li> | |
| <a href="#" id='ext' data-icon="gear"> | |
| <img src="ext.png" class="ui-li-icon"/> | |
| Extensions | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" id='set'> | |
| <img src="setting.png" class="ui-li-icon"/> | |
| Settings | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" id='down'> | |
| <img src="down.png" class="ui-li-icon"/> | |
| Downloads | |
| </a> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
After we wrote some code, it’s time to upload the extension to our chrome and test it. You can do it by going to: chrome://chrome/extensions/ and click on the button ‘load unpack extension’. You can see it below:
Once you click on the button you need to navigate to the directory that contain the manifest file and your html/js/css files. Once you click on ‘select’ the new extension will be added to the list of extensions and you should see its button on the toolbar (right side of it). You will continue to work and improve your functionality… and once you are happy with the results it’s time to publish your work to the Chrome Web Store. I’ve wrote about this process in the past here: How to get your web app and/or extension into the Chrome Web Store.
Is it simple or what?
Please let me know if you have any thoughts on the process and how we can improve it. Also, if you have good (to great) ideas to extensions – please share them…
Final notes
- You can set an option page so your users will be able to set their preferences. In our simple case, there is no point.
- Background pages – answer a common need to have a single long-running script to manage some task or state in the background. For example: check the page for certain keywords, links, check status of some web service etc’.
- How to OAuth2.0 from extensions
- A great source for extension developers is this guide.
Ido Green 