Channels ▼
RSS

Web Development

Writing Chrome Extensions


Chrome Extensions are the code components used for adding new or enhanced features in the Chrome Web browser. In other words, the functionality of the browser relies substantially on add-ons or plugins to Chrome. In this article, we explain what an extension consists of, how it can be developed, and then we provide a sample extension to illustrate the techniques.

The Anatomy of Chrome Extensions

A Chrome extension is a zipped bundle of files — HTML, CSS, JavaScript, images, and related extension files. Extensions are essentially Web pages, and they can use all the APIs that Chrome provides to Web pages, from XMLHttpRequest to JSON to HTML5.

A Chrome extension comprises the following files:

  • A manifest file (mandatory).

  • One or more HTML files (mandatory) such as background.html, popup.html.

  • One or more JavaScript files (optional).

  • Any other files your extension needs — for example, image files (optional).

Before going into details of the extension's components, let's see how to load and view an extension. Assuming you have all the extension-related files:

  • Create a folder anywhere on your system to hold the above files..

  • Go to the Extensions Management page in Chrome by clicking the wrench icon and choosing Tools > Extensions, and click on Developer mode option.

  • Use the Load unpacked extension button and specify the extension folder. This step will load the extension.

  • If the extension is valid, its icon appears next to the address bar, and information about the extension appears in the extensions page.

The extension is now ready to be used. Clicking on the extension's icon (next to the address bar) enables interaction with the extension. Note that this page provides options to Reload/Uninstall options for the extension. Now, we'll examine the contents of the extensions.

The Manifest File

The manifest file, called "manifest.json," provides information about the extension such as the most important files and the capabilities that the extension uses.

If you're not familiar with JSON, it stands for JavaScript Object Notation, and it's a lightweight text-based open standard designed for human-readable data interchange in JavaScript. In this way, it serves as an alternative to XML. It is used for representing simple data structures and associative arrays, called objects. It is language-independent, with parsers available for most languages. JSON files are denoted by the extension ".json." JSON is often used for serializing and transmitting structured data over a network connection. Here's a typical manifest file:


manifest.json

{

"name": "Kz_FACE_LIFT",

"version": "1.1",

"description": "Kz FACE_LIFT PLUG-IN.",

"background_page": "background.html",

"options_page": "options.html",

"browser_action": {

"default_icon": "images/clock.png",

"popup": "popup.html"

},

"content_scripts": [

{

"matches": ["<all_urls>"],

"js": ["page.js"]

}

"icons" : {

"48": "a_48.jpg",

"128": "a_128.jpg"

}

The manifest file is the heart of the Chrome extension. It contains several name-value pairs specifying what functions are to be performed by whom. The attributes name, version and description are metadata for the extension, whereas the attributes background_page, options_page and content-scripts give information about the files that will be holding the corresponding logic (which will be described later).

The browser_action attribute, which is a composite JSON object (that is, made up of one or more JSON objects) is a way of specifying the user interface (UI) to the extension. It holds the details of the image button or the UI that will be provided to the user to access the extension: It has the child attribute default_icon that specifies the icon to be used next to the URL in the address bar; and the child attribute popup contains the name of the HTML file that will be displayed when you click on the icon in the address bar.

The composite attribute icons specify the images that are to be displayed at various places. The child attribute 48 specifies the image/icon that is to be displayed during the installation and uninstallation process of the extension. The child attribute 128 specifies the image/icon that is to be displayed in the chrome://extensions page where details of all the installed extensions are listed. The child attribute 16 has the same functionality as the default_icon attribute.

Extensions get the user interface in the following two ways:

  • Browser action: An extension that enhances the functionality of the browser irrespective of the pages. As long as the browser is running, the extension will be there. It adds an action item to the browser. The action item is added in the browser's toolbar in the aforementioned sample manifest file.

  • Page action: An extension that enhances the functionality of the browser depending on the Web page being visited. That is, it will be active as long as that page (or any page from that domain ) is open in the browser. It adds an action item to some of the pages that depends on the program logic. The action item is added in the address bar for valid page addresses.

At most, an extension can have either one browser action or one page action.

Background.html

The main logic of the extension resides in the background.html file. When an extension needs to have a single long-running script to perform some task, background pages are the solution. Although it is an HTML file, its purpose is not used to add a GUI to the extension. Everything in this file is housed inside a <script> tag or contains a reference to a JavaScript file that holds the main logic.

This file exists for the lifetime of extension, and only one instance of it per extension is active at a time. For extensions with only background work to do, the UI is implemented by dumb views. That is, the view collects any data from the background page as needed and displays it on click. The manifest.json file specifies which HTML file will hold the background processing logic. It does this via the attribute background_page.

A sample background.html is shown here:


<html>

<body>

<script src="script.js"></script>

<script type="text/javascript">

chrome.tabs.onSelectionChanged.addListener(myFun4);

chrome.tabs.onUpdated.addListener(myFun4);

var val = 10 ; //declare a sample variable

</script>

</body>


Related Reading


More Insights






Currently we allow the following HTML tags in comments:

Single tags

These tags can be used alone and don't need an ending tag.

<br> Defines a single line break

<hr> Defines a horizontal line

Matching tags

These require an ending tag - e.g. <i>italic text</i>

<a> Defines an anchor

<b> Defines bold text

<big> Defines big text

<blockquote> Defines a long quotation

<caption> Defines a table caption

<cite> Defines a citation

<code> Defines computer code text

<em> Defines emphasized text

<fieldset> Defines a border around elements in a form

<h1> This is heading 1

<h2> This is heading 2

<h3> This is heading 3

<h4> This is heading 4

<h5> This is heading 5

<h6> This is heading 6

<i> Defines italic text

<p> Defines a paragraph

<pre> Defines preformatted text

<q> Defines a short quotation

<samp> Defines sample computer code text

<small> Defines small text

<span> Defines a section in a document

<s> Defines strikethrough text

<strike> Defines strikethrough text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<u> Defines underlined text

Dr. Dobb's encourages readers to engage in spirited, healthy debate, including taking us to task. However, Dr. Dobb's moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing or spam. Dr. Dobb's further reserves the right to disable the profile of any commenter participating in said activities.

 
Disqus Tips To upload an avatar photo, first complete your Disqus profile. | View the list of supported HTML tags you can use to style comments. | Please read our commenting policy.
 
Dr. Dobb's TV