O'Reilly logo

JavaScript Cookbook by Shelley Powers

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

21.1. Creating a Browser Add-0n, Plug-in, or Extension

Problem

You have an idea that would make a good browser add-on, plug-in, or extension, but you want to leverage your JavaScript skills to make the application.

Solution

Use the browser’s plug-in SDK, Extension API, or other packaged functionality that lets you use JavaScript to create the application.

Discussion

Not all browsers provide a relatively simple way to create browser add-ons, plug-ins, or extensions. Opera doesn’t provide this functionality at all, and WebKit’s plug-in architecture isn’t trivial. However, if you’re motivated, you should be able to use your JavaScript skills to create any number of useful browser tools.

Creating Google Chrome extensions

A Google Chrome extension is the simplest development environment of all the browsers. Your extension can consist of a manifest file, created in JSON, a download icon, and then the extension web page and JavaScript. It’s uncomplicated, and it’s the environment I recommend you try first, before developing an extension for other browsers. You can run through the beginning tutorial and have your first Chrome extension finished in an hour.

If, I should add, you can run Chrome in your environment at all, as Google also provides limited platform support for its browser. Currently, the Google Chrome extension environment only seems to work in Windows, though you can see about getting into an early release program for Mac and Linux. Note that Chrome’s Mac support is for Intel-based machines only.

If you can work with Chrome, your extension begins with a manifest file that uses JSON and looks like:

{
  "name": "Hello World",
  "version": "1.0",
  "description": "Giving this a try",
  "browser_action": {
    "default_icon": "icon.png",
  "popup" : "popup.html"
  }
}

You’ll provide an extension name and description, provide the environments in which you’ll work (“permissions”), such as Google or Flickr, and provide browser actions to load pages or add icons.

The popup.html file for my first extension has a style section and a script section:

<style>
body {
  min-width:357px;
  overflow-x:hidden;
  background-color:  #ff0000;
  color: #ffff00;
  font-weight: bold;
  font-size: 48px;
}

</style>

<script>
window.onload=function(){
  var txt = document.createTextNode("Hello World!");
  var div = document.createElement("div");
  div.appendChild(txt);
  document.body.appendChild(div);
}
</script>

After you create the manifest and application page, you’ll load the extension in Chrome via the Tools menu, choosing Extensions. Make sure the Developer Tools are exposed, and click the “Load unpacked extension…” button for the extension folder, as shown in Figure 21-1. If all goes well, the icon shows in the toolbar.

Loading a Chrome extension

Figure 21-1. Loading a Chrome extension

If you click the icon, the extension pop-up should open, as shown in Figure 21-2.

Trying out my first Chrome extension

Figure 21-2. Trying out my first Chrome extension

Note

Access the Google Chrome Extension Lab at http://code.google.com/chrome/extensions/overview.html.

Mozilla extensions

The Mozilla extensions for the organization’s applications, including Firefox and Thunderbird, are reasonably uncomplicated to create, but even then, the number of files you need in order to implement an add-on is a little awe-inspiring.

To assist the new extension developer, Mozilla provides a section on extensions, including how to set up a development environment, what all of the files mean, and what you need to bring your application together. There is also an Extension Wizard, which can simplify your work.

The functionality for your Firefox add-on is going to be based, in part, on JavaScript, though the environment may not be one you recognize. For instance, your extension could consist of an XPCOM component, which has to be compiled using the Gecko SDK.

Robert Nyman provided probably one of the cleanest tutorials on creating a Firefox extension, including a no-nonsense description of what files are needed, and where they are located. Once you plow through all of the files, you’ll find a JavaScript code listing. Though the objects in the code are unfamiliar, the coding is not.

Note

The Mozilla Extensions site is at https://developer.mozilla.org/en/Extensions. The Extension Wizard can be found at http://ted.mielczarek.org/code/mozilla/extensionwiz/. A tutorial on how to build XPCOM components using JavaScript can be found at http://ted.mielczarek.org/code/mozilla/extensionwiz/. Robert Nyman’s Extension tutorial can be found at http://robertnyman.com/2009/01/24/how-to-develop-a-firefox-extension/.

Creating a Greasemonkey script

Greasemonkey is a popular Firefox extension that simplifies the process of building new functionality for the browser. Rather than going through the entire extension-building process, you can create a Greasemonkey script using JavaScript, and not have to worry about XUL, XPCOM, or intimidating file structures.

Note

Mozilla recently released the first milestone release of the Jetpack SDK, providing a simpler environment for creating Firefox extensions. Read more about it and download the SDK at http://mozillalabs.com/jetpack/2010/03/09/announcing-the-jetpack-sdk/.

A Greasemonkey script has a metadata section, which provides information about the script. Following the metadata section is the application functionality. Here’s an example of the beginning of a Greasemonkey script, from the popular YouTube Enhancer Greasemonkey script:

// @name     YouTube Enhancer
// @author    GIJoe
// @license   (CC) by-nc-sa
// @include   http://*.youtube.*/*
// @include   http://userscripts.org/scripts/show/33402*

This partial list of the metadata describes the name of the script and the author, provides copyright information, and also several include rules. The include and exclude rules determine if the script is run or not. If the include dependency isn’t met, the script isn’t run; similarly, if what’s listed in the exclude rule is met, the script isn’t run. This prevents running of script where it does no good, or may conflict with other applications.

The code, though, is very familiar. The following is a snippet from the UnShortEmAll Greasemonkey script, which unshortens the shortened URLs in Twitter:

var as = document.getElementsByTagName('a');
for (var i = 0; i < as.length; i++) {
   var a = as[i];
   if (isshort(a)) {
      unshorten(a);
   }
}
...
function unshorten(short_link) {
   GM_xmlHttpRequest( {
       method: "HEAD",
       url: short_link, href,
       headers: {"User-Agent": "Mozilla/5.0", "Accept": "text/xml"},
       onload: function(response) {
                       short_link.href=response.finalUrl;
       }
   });
}

The code looks familiar. What’s different is the objects, and how the objects are used. However, we’ve used libraries before, and the objects are intuitive.

Note

Download Greasemonkey from Greasespot. Get Greasemonkey scripts at http://userscripts.org, and the YouTube Enhancer script at http://userscripts.org/scripts/show/33042. The Greasemonkey Manual can be found online at http://wiki.greasespot.net/Greasemonkey_Manual.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required