Web Browser Extensions Development

Largu Dragos ConstantinAn 3, Grupa 1, Semian B

What are extensions?

Web browser extensions are custom user created programs which extend the functionality of web browsersAll major browsers support extensionsThe term “extension” is interpreted in different ways, depending on the browser usedAll extensions feature the same development principles and guidelines

Development Guidelines

Extensions can be developed either for personal use, or for public useFor a public extension to be successful, it needs to not interfere with everyday use of the browserFollow simple guidelines to assure quality

Constant Updates

Light Memory LoadEase of use

Tech SupportCustomizabilitySimplicity

Browser Support Overview

Every browser interprets “extensions” in a different wayGoogle Chrome and Safari use the exact term extensionsFirefox works with Add-ons and ExtensionsInternet Explorer works with Browser Extensions and Helper ObjectsOpera works with Extensions and Widgets

Terminology

Extensions are what we will be exclusively discussing further Add-ons are more complex types of programs designed to run along side the browser (such as for example an automatic text translator)Plug-ins are sets of programs created to enhance modularly designed browsers by adding functionality to existing elements

Plug-insAdd-onsExtensions

Language Overview

Extensions are practically all powered by Java Script, styled by CSS and contained in HTMLEach browser implements different languages for installation (example RDF for Firefox)Manifest and Assembly files are implemented to store information about the author, permissions, application version, etc

Extensions in Firefox

Creating extensions in Firefox is a bit complicated, and many problems may occur because of Mozilla's fast development cycleBefore starting, these problems need to be addressedFirst, a user profile needs to be created (Start->Run->Firefox -P->New Profile)

Extensions in Firefox

In about:config, the following Boolean fields need to be created (all false):

extensions.checkUpdateSecurityextensions.checkCompatibility.9.0 (For Firefox 9.0) change .9.0 to any other version you want (for example .8.0 for Firefox 8)

Now we’re ready to create a basic extension

Extensions in Firefox

Directory structure in Firefox is focused around localization (meaning folders with different languages)The root folder has to contain

a manifest file (chrome.manifest), which describes each filean RDF install file (install.rdf), which contains installation datafolders for other elements

Extensions in Firefox

When adding a new page to the extension, you need to create

a .xul file (containing descriptions of UI elements to add to the browser window)a .dtd file (containing definitions for the elements in the .xul file)

One or more CSS files may be present, which alter appearance of content in .xul files

Extensions in Firefox

You can edit the basic overlay of the browser window in overlay.xul and overlay.dtdJava Script is included in a standard way using .js filesOne very important aspect is that for a new file, the .xul and .dtd files need to have the same name, for example overlay.xul and overlay.dtd

Extensions in Firefox

Once you are done writing the extension code, set an extension id in the install.rdf fileGo to %APPDATA%/Mozilla/Extensions and create a file named exactly as the install idInside, write the absolute path to the directory containing the install and manifest filesNow you have a pointer to your extension files

Extensions in Firefox

To deploy the extension, simply pack it in a zip archive, change the name to .xpi, and drag&drop it to the Firefox windowProceed to install it as any other extensionIt will be visible in the Add-ons menu under Extensions

Extensions in Chrome

Creating extensions in Chrome is MUCH simpler than in FirefoxYou simply need to create a folder anywhere, in which you need to put a manifest.json file, a .icon file that works as a favicon, HTML, CSS and JS files

Extensions in Chrome

Json is conceptually similar to XML, in the sense that you can define your own content freely Its syntax is based on an "elementName" : "elementValue" type structureTo add a functionality, the manifest file needs to be edited

for example, to display a new html page, we add "browser action" : { "popup": "helloworld.html" }

Extensions in Chrome

In order for the extension to be recognized by Chrome, it needs to be loaded into the browser using the Extension ManagerAfter loading, the icon image will appear in the Chrome menu barWhen you click the icon, your extension will be launched

Extensions in Safari

Creating extensions in Safari is very easy, because Safari provides a built in tool named Extension BuilderThe only catch is that you need to have register at developer.apple.com and follow a set of instructionsYou need a signed certificate in order to use your extensions

Extensions in Safari

The process is very simple, you just register, download a certificate file, run it, and upload an outputted fileNow it’s very similar to how Chrome works, only you don’t have to create a manifest fileSimply create a directory using the Extension Builder, and copy all your HTML, JS and CSS files there (including a .icon file)

Extensions in Safari

You can use the Expression Builder to create buttons, interfaces and other UI elements directly from the GUIAfter you are done, just press Pack and Install, and you are done!It’s really dead simple

Extensions in Opera

Creating extensions in Opera is very straight forward, pretty much like in ChromeA basic file structure would be like

/config.xml/index.html/background.js/popup.html/icons/example.png/options.html

Extensions in Opera

Opera supports localization, following the same principles as in FirefoxThe basic extension format follows the same principles as W3C Widgets, meaning you have to have

an index.html file which is a start file for the widgetbackground.js file which contains ` functionsone or more “popup” html files with actual contenta config.xml file with basic configuration info

Extensions in Opera

In order to run your extension, drag&drop the config.xml file to the browser windowOne very important thing to remember is the Opera strictly follows W3C recommendations, so if your code is not W3C valid, you may have problemsAlso, Opera allows you to create Widgets, which are independent mini-applications that run in separate windows, but provide functionality similar to Extensions

Browser Pros and Cons

When choosing the browser for which to develop extensions, it’s very important to keep track of the guidelines for developing extensionsStudy thoroughly regarding the capabilities of each browser to avoid situations in which you find out half way into your project that the browser you chose cannot do what you want

Browser Pros and Cons

Firefox Proswell established community, pioneered extensionswidely used, so a good client base is availablepowerful debugging toolsstrong language capabilities

Firefox Consextremely tedious work is required just to get started, and the whole process is over complicatedthere is no clear border between add-ons and extensions

Browser Pros and Cons

Chrome Prosvery easy setup, perfect for beginnersyou don’t need to create lots of files, which adds to the clarity of the projectfast and lightweight development (you can convert entire web applications to extensions very fast)Google labs is simply awesome

Chrome Consnot many people use it

Browser Pros and Cons

Safari Prosvery straight forward development path, thanks to the built in Extension Managercomfort and ease of usestrong community of MAC and PC usersrequires certificates in order to develop (security)

Chrome ConsPC users don’t really care for Safaricertification may be complicated for some

Browser Pros and Cons

Opera Prosyou are forced to respect W3C Widget standardsdedicated community with lots of app samplesrelatively simple development processyou can add browser interface elements at runtime

Chrome Consnot many people use operaOpera Dragonfly works only while connected to the internet

Final Thoughts

My personal opinionI prefer Opera. I’ve been using it for the past 7 years, and I’ve never had any major complaintsI think Firefox is overly complicatedI like Chrome very much because it is very lightweight and fast Safari’s Extension Builder is an awesome tool!