Vijay Krishna's Notes http://vijaykrishna.posterous.com Most of my notes as a student of computer software and everything around it. posterous.com Thu, 27 Jan 2011 18:25:21 -0800 Browser Actions - Chrome Extensions http://vijaykrishna.posterous.com/browser-actions-chrome-extensions http://vijaykrishna.posterous.com/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:
  1. Icon
  2. Tooltip
  3. Badge
  4. 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.
Quick Start: The following is what the manifest of your extension should look like.
{

"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

},

}

 
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!

Permalink | Leave a comment  »

]]>
http://files.posterous.com/user_profile_pics/1369599/pic.jpeg http://posterous.com/users/hcGXxsTkwP6SS Vijay Krishna Palepu vpalepu Vijay Krishna Palepu
Sun, 23 Jan 2011 18:27:34 -0800 Chrome WebStore http://vijaykrishna.posterous.com/chrome-webstore http://vijaykrishna.posterous.com/chrome-webstore I opened my browser (read Google Chrome) yesterday and i saw something new in it. Apps !!! I was like, "Hello!! What are you?" And within two clicks of the mouse i end up in the CHROME WEBSTORE!!! It is awesome the way Google does it! Google has now housed all of its Chrome  Extensions, Skins and Apps (yes that is correct, Apps) under one roof and it is simply awesome to say the least. Most of these products or add-ons are free, but you can charge for your apps as well. It takes a nominal fee of $5 to submit your app into the Store itself. A price which is next to nothing in my opinion, given that it is a one time payment. The first time i ventured into the store i hit it off with my favorite section which happens to be the Themes Section. The Store currently houses a whole gamut of Themes that are more than what you would normally see in your Tool Menu -> Options -> Personal Stuff -> Get Themes. You actually had some amazing set of colors and covering all kinds of people. These are a few i tried out for my browser: The Shrine Theme Ethereal 2 (This is the one i stuck with) Coming Winter Theme You also have a fantastic set of themes for Football lovers, one for every popular football playing nation. Here is the one for Brazil. Then you have the Apps. Now let me give an idea of what Apps are. They are not Add-ons. They do not form a part of your browser. Remember the blank empty space when you minimize all the options in a new tab of Chrome ie Most Visited and Recently Closed. Well there is an empty space there with a nothing in the background except for your theme's image/design if you have one. Point is imagine if you could have tiles or links to the favorite Apps you could possibly have, instead of an empty space. They are like little tools just as you have in your cell phone. These are specifically built for Chrome i guess, since they are Chrome Apps but can be run in other browsers as well. But the thing is that they are highly advanced and interactive websites which open in a new tab. You get access to 3 default Apps when it is activated in your browser, they are, The WebStore itself, an interesting Game called Entanglement and Popit, another game i guess, no clue really have not tried it yet. So fundamentally these are web applications built keeping in mind the Chrome Browser. Then finally you have the Chrome Extensions which are closer to the conventional Add-ons you get in other browsers like FireFox. These appear along with the Tools Menu in the Top right hand corner of your Browser. These are called browser actions and are meant for adding additional functionality to your browser, an extn for Gmail or any other mail to check your Mail in a single mouse click. You also have page actions which come up only in specific pages such as a Map functionality which will appear in the OmniBar when you navigate to a page with an Address in it. Apart from giving the user a brilliant experience, the WebStore is a fantastic place to let loose as a developer and/or tester. The documentation for all of this is simply fantastic and easy to use and as usual supports all well known technologies like JavaScript, HTML and CSS. I am neck deep into understanding Extensions for the time being. I may get to the Themes as well. ;) All in all a great add on to an already brilliant browser, which simply makes the Web experience that much more brilliant. :D

Permalink | Leave a comment  »

]]>
http://files.posterous.com/user_profile_pics/1369599/pic.jpeg http://posterous.com/users/hcGXxsTkwP6SS Vijay Krishna Palepu vpalepu Vijay Krishna Palepu