Creating a Simple Chrome Extension

Since it’s introduction Google chrome browser had a rapid growth of users  and more developers had  favoured it much due to it’s  its extension framework is by far the simplest, and Google’s own documentation is valuable.While searching for chrome extension we stuck with some custom extension creation and likes to share with our readers .Actually creating  a simple extension is actually child’s play , it doesn’t involve much thing since almost every documentations and support are avail online.With some mere knowledge of Programming info on XML,HTML,CSS,JSON,Scripts it’s easy to build up an extension.

Needed Resources for creating Extension
Inorder to create a simple extension  on chrome  ,no need of any extra programming frameworks rather Chrome extension simply a web page presented in a varying functionalities. To begin with we need to create a manifest file  on .JSON(JavaScript object notation).What it does is that it describes aspects including your extension name, what it does and where its resources are.Next you should have an icon of small size in in PNG or JPEG format.JSON  is specifically designed to be an easily human-readable and editable file format for flexible data interchange between web-enabled apps.
What the below extension does is that it just add an  extension’s icon on top right side of your chrome browser and when clicked a little pop-up bubble appears.

Now just create a  new folder , put the icons needed in the folder , open up  a note pad type or paste below code

{
“name” : “Techtimely Extension”,
“version” : “0.2”,
“description” : “A techtimely extension.”,
“icons” : {
“60” : “index.jpg”},
“browser_action” : {
“default_icon” : “index.jpg”,
“default_popup”: “techii.html”
}
}

Note: for default icon and default pop up specify image file name and html file you have

Now just need to save it with the name MANIFEST.JSON (remember not MANIFEST.TXT). Till now our extension does nothing but just shows an icon in the browser. To make it useful, need to create an HTML file as indicated in above code(eg:”techii.html”) . This simply specifies an HTML file that Chrome will display when you click the icon. It can contain anything a standard HTML page can contain, including complex JavaScript and CSS if you wish.
On the above code ” browser actions” is used to put icons in the main Google Chrome toolbar, to the right of the address bar
Create a simple html file and save it in the same folder the JSON and images exist.Code is below
<html>
<head>
<style>
body {
width:100px;
font-family: sans-serif;
font-size: 0.8em;
}
</style>
</head>
<body>
<p>Hi: </p>
<p>welcome: </p>
<p>to: </p>
<p>new extension: </p>
</body>
Now you have got an html file , JSON file and images needed on your folder.To add this extension to chrome browser ,open chrome->tools->extensions->Load unpacked extension->chose the folder you created extension ->click ok
Now on top right hand side of your browser an icon is displayed ,on clicking it a popup message appears.If there’s an error in the manifest file, you’ll get a relatively helpful message telling you the exact point in the file where the error occurs in terms of line number and column.


If you do get an error, go back and double-check the file. Make sure the commas, quote marks and colons are all in the right places, check you haven’t used square or standard brackets instead of curly braces, and remember that if you open a brace or bracket in almost any type of code file, you must close it again. If all else fails, download our working extension code here.Above extension is just a new bee script ,since it’s a mere one, however visit Chrome extension devguide , any body could take more step on chrome extensions.
Looking for an Alternative chrome extension – This is a browser action with a popup , you could chose a color for a webpage like google.com.download source from here

Advertisements

About Technology Timely

Aimed on updated tech news

Posted on April 15, 2011, in Google, Technews, Tips'n'Tricks. Bookmark the permalink. 4 Comments.

  1. For beginners on chrome extension this tutor is good, for advanced visit
    srikanthrayabhagi.blogspot.com/2010/11/develop-chrome-extension-practically.html

  2. create and distribute your extension or packaged app by using the Chrome Developer Dashboard + Chrome Web Store.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: