Post on 13-May-2015
description
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!