Browsers serve as our primary interface to the Internet. For enhanced
efficiency and to do work quickly, a browser should provide customized
functionality besides basic browsing capabilities. This can be achieved in two
ways, either add functionality to a browser natively or let users decide his own
features using extensions. Adding lot of functionality natively to browser would
obviously make browser heavy plus most of the features would not be used by all
users, therefore the extension-based approach is the best among the two. At this
point, Google's Chrome seems to be fast becoming popular among users, and one
can find an elaborate introduction on Chrome from http://bit.ly/9Xfvh5. In this
article we talk about creating extensions and show how to create a simple one.
Chrome extensions
The most important issue about extensions in Chrome is that they are web
pages, therefore creating them is as simple as creating a web page. Extensions
add UI to Chrome and can also programmatically interact with web pages or server
or browser features like tabs etc. There are different types of extensions like
browser actions which would add button to browser that acts like a short cut to
your favorite site and also display recent information or update like Google
Mail Checker that displays unread messages. Other type of extensions are Page
actions that detect certain pages and prompt user to take action by clicking on
the displayed icon. Content scripts, the third kind of extensions, can directly
interact with web page you are visiting. It detects language of the visited page
and prompts user to click on a button to translate content of a page. Now that
we have a fair idea about different types of extensions, lets talk about the
structure of Google Chrome extensions. Most extensions have a 'background page'
which is an invisible page that holds the main logic of the extension.
Direct Hit! |
Applies To: Web developers USP: HTML based Chrome extensions Primary Link: http://www.google.com/chrome Search Engine Keywordes: Chrome, browser, extensions |
Adding extensions
Chrome extension is specially packaged file (with .crx extension) that
contains manifest file (most important), few HTML files, optional JavaScript and
other ( like images) files. In this implementation we are use the latest version
(4.0.249.89) of Chrome on a Windows machine. To start, create a folder on your
machine that would contain all the required files for Chrome extension. Inside
this folder create a file name 'manifest.jason'. This file contains information
like files and capabilities used by extension. Here are the contents of
manefest.jason we created:
{
"name": "PCQuest Extension",
"version": "1.0",
"description": "The is the first extension that we made for PCQuest.",
"browser_action": {
"default_icon": "pcquest.png",
"popup": "tool_pcquest.html"
}
}
To install an extension, open Chrome and click on Tools icon. Go to 'Extensions' and click on 'Load unpacked extension.' |
We created a browser action extension that uses 'pcquest.png' and
'tool_pcquest.html' files that need to be created in the same folder. On the
other hand, initial lines include name, version, and description of the
extension. Here is the simple .html file we have created (tool_pcquest.html):
We created a browser action extension. Simply click on the line to display a custom message. |
This is a TEST extension by PCQuest
Now that we have created the required files let's install these extensions.
To do this, open Chrome browser and click on Tools icon and go to 'Extensions.'
This will open the extensions page. The other way is to go to
'chrome://extensions/ ' page. On this page, click on the '+' sign in front of
'Developer mode' and then click on 'Load unpacked extension' button. Browse to
the folder where you have created the extension and you are done. You can find
all the loaded extensions from this page plus installation and un installation
of extensions do not need a browser restart. This extension would show a
'PCQuest' logo and clicking on this logo would show a message created in
'tool_pcquest.html' page.
To package and update an extension visit 'chrome://extensions' in your browser and click on 'Pack Extension.' |
The distribution of created extensions can be done by going to the extensions
management page (chrome://extensions) and clicking on 'Pack Extension' button.
In 'Pack Extension' window specify the path to the folder where you have created
your extension, and click 'OK.' This will create two files (Chrome.crx and
Chrome.pem). Here the file with '.crx' is the extension that can be installed
while '.pem' file is private key. To update your extension make changes to the
'manifest.jason' file and again repeat the above steps. Specify the path to the
private key and click on 'OK'. On the other hand, if you want to make your
extension available on extension gallery then simply visit https://chrome.google.com/extensions
and click on 'publish your extension' link. Here one needs to add ZIP file of
the created extension along with information about the extension in form of
screen shots or YouTube video.