Here is our second part on "How to create a Google Chrome extension". Last time we made a basic "hello world" chrome extension. This time we will be going to the innards of a real world Google Chrome extension to see how things will work in real time.
Last time, we showed you how to create and run a Hello world application as a Google Chrome extension. This time you can see how you can extend the application to a realtime application and port it in Chrome Webstore with just a few tricks.As you already know the basics, lets step into extending them. I shall do a kind of reverse engineering to help you understand things better.
Did you know ? You may view the source code and their corresponding files of any installed chrome extension. I'm sure you must have installed few extensions already from the Chrome Web Store.
On Ubuntu or any other distro of linux, Chrome extensions and their files are stored in the directory:
~/.config/google-chrome/Default/Extensions/
In Windows 7, the extensions path is:
C:\Users\*UserName*\AppData\Local\Google\Chrome\User Data\Default\Extensions
In the first glance, one may see a list of folders with garbled texts as folder names. Don't panic. It's so simple to find the corresponding extension's folder.
I remember my first extension created when Google Wave was gaining momentum. I shall take the following simple extension as an example.
https://chrome.google.com/webstore/detail/jkcjhmblcjlnajjolkljhpebnbckmplc
Once installed, Press the Wrench icon > Tools > Extensions (or type chrome://extensions/ and press enter in the address bar)
Look for Developer mode option present in the right top corner. Click it if the Developer mode has a + by it, to add developer information to the page. The + changes to a -, and more buttons and information appear along with the existing extensions list.
Now scroll down to the extension that you just installed. Did you find something called "ID: " comprising 32 letters in it?
Cool, Didn't it remind you of something ? Yeah, these are none other than the folder names you saw in the Extensions directory.
Now, enter into the directory containing the ID that "Google Wave chat" extension had to find it's source.
It's time to explore with the files you see. Can you find manifest.json , options.html and popup.html ? These files are responsible for this extension to function. You will get to know more when you clone an extension and modify changes to see how it works by Loading your unpacked extension as mentioned in (Part 1)
Let me leave the coding part to you. I suggest you to read the official documentation before you work on any apps. There are few other things that you might want to know on how you have to extend your application.
Extending the Hello World application :
How to Publish in Chrome Web Store
Now it’s time to showcase your application to the whole world. The following steps will guide you to publish in Chrome web store
- Go to https://chrome.google.com/webstore/developer/dashboard and login with your Google credentials.
- Click Add new Item and surf to the file you created in zip format and click Upload.
- Once uploaded, you can customize the page how it should look in the web store to public, by adding all catchy images of Codesion and an addon preview.
- Developer test accounts are available to make your application visible only to specific users for testing initially before you make it visible to public.
- And you can extend this extension's functionality to track the traffic using Google Analytics (which is beyond the scope of this article).
NOTE : A one-time developer registration fee of $5.00 is required to verify your account and publish items. This has been free before; fortunately I haven't been charged as I was an old user ;) .
Help & Reference :
http://code.google.com/chrome/extensions/getstarted.html
Look at some sample extensions
Watch some videos, such as How to build an extension
I must say that you have posted a very good article. Thanks a lot for sharing such useful piece of information.
ReplyDeletejoomla extension