15 July, 2010

How to write Extension for Google Chrome web browser?


Recently Google Chrome web browser is getting popular with many features like simple,fast and secured browsing compared to other browsers. Chrome gives us the option to customize their browser by writing extensions,theams. They have a simple way to write your own extension with the following steps.




  • Create manifest.json
  • Create an icon for extension
  • Create a HTML file to display when the extension is clicked
  • Load the extension into Browser
every extension of chrome browser should contain a manifest file, which provides some import information to the browser like extension name , version, permissions, icon.
Example manifest file:

{
  "name": "My Extension",
  "version": "1.0",
  "description": "Here the description about your extension",
  "browser_action": {
    "default_icon": "extension_icon.png",
    "popup": "popup.html"
  },
  "permissions": [
    "tabs",
    "bookmarks",
  ]
}
As next step create an icon that will be displayed in the browser toolbar. The optimal size of the icon is 16x16 pixels.The supported image formats are PNG,JPEG,GIF,ICO,BMP.

Now create a HTML page which will be displayed when the extension icon is clicked from the browser. The HTML file shall contain CSS,Javascript also to represent the page.
Example HTML file:
<style>
body {

  min-width:400px;
  overflow-x:hidden;
}
</style>
<h1> Hello World! </h1>

Now the coding part is complete you have to load this extension into the browser. To load the extension click on the extensions menuitem from the configure toolbar item. It will display the extensions page with list of extensions already loaded. Click on the developer mode link will show the "load unpacked extension" button. Click on this button and browse to the folder where all your files are stored. Now your extension will be loaded into the browser and the icon will be displayed in the toolbar.

0 comments: