Developing (Cross) Browser Extensions.

Even the smallest extension built to resolve a recurring issue can speed up your workflow.

Lukas Mairl
July 30, 2014

What are Browser Extensions?

Browser extensions have been around since 1999. Internet Explorer was one of the first browsers to fully support extensions, while all other major browsers (Chrome, Firefox, Safari and Opera) followed in the years after. Wikipedia defines a browser extension as “… a computer program that extends the functionality of a web browser in some way.”

While doing research I came across a few different terms for extensions: While Google Chrome calls it an “extension”, Firefox calls it an “add-on”, and sometimes you’ll also hear it called a “plugin”. The difference between an extension and a plugin is that a plugin cannot alter the browser UI, such as the browser toolbar. Some well-known plugins are: Adobe Flash Player, Quicktime Player and the Java plugin. Extensions, on the other hand can interact with the browser through its API, interact with the page content, and enhance the browser toolbar and context menus.

Your might ask yourself, “why write your own extension?” In my own opinion, even the smallest extension that resolves a daily issue can help substantially speed up your workflow. Also, you can easily share your extensions with colleagues who most likely run into the same issues as you do on a daily basis.

Most Popular Extensions (measured by downloads)

Most recent ranking.

Rank Google Chrome Mozilla Firefox Safari
1 AdBlock AdBlock Plus AdBlock
2 AdBlock Plus Video DownloadHelper Exposer
3 Lightning Newtab Firebug Facebook Photo Zoom
4 Bang5Tao – Shopping assistant NoScript Security Suite ClickToFlash
5 Iminent Greasemonkey Awesome Screenshot
6 Google Mail Checker DownThemAll! TwitterTranslate
7 Evernote Web Clipper Microsoft .NET Framework Assistant Facebook Cleaner
8 Hangouts FlashGot Mass Downloader Turn Off the Lights
9 Quick Start Flash Video Downloader – Full HD Download clea.nr Videos for YouTube™
10 Google Translate Web Of Trust – WOT 1-Click Weather for Safari

Source

Browser Extensions for Frontend Developers

We’re always working to improve our development workflow, and one of the things we use daily are browser extensions. Here are some of our favorite Extensions:

  • Live Reload: Tired of manually refreshing your browser after making a change? Live Reload will monitor your file changes and refresh your browser as needed. For CSS files it even works without reloading the page. Download Link
  • JSONView: JSONView will transform your unformatted json response into a well-formatted document and validate it for you. Download Link
  • Responsive Inspector:The Responsive Inspector extension shows you what resolutions are defined in the CSS style sheets on web pages you’re visiting. Very handy for developing responsive sites. Download Link
  • Pixel Perfect: This Firefox add-on lets you overlay an image on top of the developed HTML. Very useful for creating pixel perfect layouts. It will also make any designers you‘re working with happy. Download Link
  • Firebug: One of the most popular Firefox add-ons, Firebug helps you inspect and modify HTML in real time, debug JS and CSS, and analyze usage and performance. Download Link
  • Web Developer: This extension adds a variety of indispensible web development tools to your browser, and it works in Firefox, Chrome or Opera. Download Link

How to build a Chrome Extension

Developing a basic Chrome browser extension is easier than you might think.

You can either start from scratch or create an extension template with the extension boilerplate from http://extensionizr.com/.

This tutorial will show how to setup a basic Chrome extension. For this walkthrough, we’ll add a custom icon to the browser toolbar and pull photos from Flickr. 

Untitled

1. Create the Manifest File

The manifest.json file is the heart of your extension. It’s a simple JSON-formatted text file that contains all your extension properties, including title, description, version number and permissions.

Beside the basic properties, one of the most critical steps is to set proper permissions. With the permissions property you define which websites your extension will work with.

2. Setup the Popup Html File

This sample extension will show a basic icon in the browser toolbar and open a simple popup. We already defined the necessary “browser_actions” inside the manifest.json file, to display the popup we have to setup our “start” html file

Depending on what your extension is going to do, you can create your own folder structure and add additional javascript/css files as needed. All you have to do is reference them inside the popup.html file.

3. Setup the JavaScript

4. Create an extension icon

To display the extension icon inside your browser toolbar, you can design an icon and place it in the root folder of your extension.

5. Load your extension into your browser and you‘re ready to go!

At this step you should be all set to try out your basic extension. There is only one more thing to do, loading the extension into your browser:

  • Visit Chrome -> Preferences -> Extensions or type “chrome://extensions” into your browser url bar.
  • Make sure “Developer Mode” is enabled.
  • Click on “Load unpacked extension” and select your extension located in your file system.

If everything goes right and your extension is bug free, the extension should now be visible in your browser toolbar.

  • Publish your extension to the Chrome App Store

Last but not least, if you’re satisfied with your extension and ready to publish it to the world, you can go to the Chrome App Store and go through the publishing process.

How to build a Cross Browser Extension

Building a Chrome extension looks easy enough, but what about an extension that works on all major browsers? Currently there’s no well-defined standard for developing a cross-browser extension; every vendor is doing their own thing. Luckily enough, nowadays there are several cross-browser-extension frameworks available. With these frameworks we can build cross-browser extensions based on one codebase and api.

Some of the popular cross browser frameworks are:

My personal favorite is Crossrider (http://crossrider.com). It offers a very good API, it supports JQuery and has a inbuilt browser IDE. All this makes publishing a cross-browser extension very easy. One of my favorite features is the option to have a staging and production environment. You can also develop locally with your preferred editor.