Browser Actions - Chrome Extensions
Today i got some time from work to at a good look at the chrome extensions and its development. I have been doing a lot of reading in order to understand what the whole buzz is about. Another reason as to why i have been procrastinating the development of my 1st Extension is due to a lack of good idea(s). So i have to get my creative juices flowing. May i will over this weekend. But, all that reading has done me some good and i wanted to share as to how simple it is to build these extensions. So this post is about a specific UI concept in Chrome Extensions and it is known as a Browser Action.
Well, lets try and understand what the browser action really is. If you are using chrome you should see a small wrench in the top right corner of your Chrome browser right beneath the Close+Maxi/Mini-mize buttons. That in essence is highly advanced and evolved form of a browser action, atleast the way i look at it. A Browser Action is something that is a global action for the browser it self and not for a specific kind/set of websites. It is an add-on to the Browser and should in principle be independent functionally, from the website which is loaded in the browser. It can be a Action to view your mail, make a quick blog post, get a menu for all your tabs that are currently operating in the instance of your browser, a add-on u can use to shoot posts to your facebook or to tweet. Stuff like that is independent of the content/context of your website that is currently loaded in the browser. There are somethings called Page Actions which can be used for Page/Website Content Specific actions, examples of which i have given in my previous post on the Chrome Webstore.
So now that you have a good idea of what browser actions should be, let us have a really quick and painless view of how simple it is to create such actions.
A Browser Action can have the following 4 basic elements:
What you really need to do is to put this in a file called manifest.json, along with the popup.html and the testIcon.jpg in a folder. That is it that is you extension ready to be loaded. Then you need to go to Tools(the wrench sign)>Extension, then click on the + sign next to the Text which reads Developer mode, if it is not already a -. Then you should be clicking a button called "Load Unpacked Extension..." and select the folder where your extension from tree view that pops up and your extension is good to go. You should be seeing your extension icon next to the wrench and clicking it will open up a pop -up which will contain what ever mark up you place in your popup.html file. Remember all these files i.e. the manifest, popup.html and icon.jpg should be in the same folder, which you select to load into your browser. Simple enough won't you agree?
While this was a real ABC of Bowser Actions, you can dig up more information, you are interested, at http://code.google.com/chrome/extensions/devguide.html. It is the official Google documentation for Chrome Extensions Developers. So happy coding!
- Icon
- Tooltip
- Badge
- Popup
- An Icon is what appears next to the wrench. It can be a static image in the JPG, JPEG, GIF, ICO, PNG and BMP. It can also be a dynamic icon using the Canvas element of the HTML5 standard.
- The Tooltip is essentially, the title of the Extension, and appears in the tooltip. It is optional to give this in the manifest, as explained below.
- The Badge is a small fragment of text of not more than 4 characters, overlaid on the icon. It can be used to give out additional information to the user. Such as the count of unread mail for a Mail Extension. The text of the badge itself should be very concise.
- The Popup is an optional pane containing HTML markup which can be your creation and will open up when you click on the icon of the extension.
{
"name": "Test Browser Action",
"version": "0.1",
"broswer": {
"default_icon": "images/testIcon.jpg" //required
"default_title": "Test Action" //optional; tooltip text
"default_popup": "popup.html" //optional
},
}