Advertisment

Customizing Google's Chrome

author-image
PCQ Bureau
New Update

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.

Advertisment

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:

Advertisment

{



  "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.'
Advertisment

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.



Advertisment








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.

Advertisment