Web browser extensions development for CLIW Class

1. Web Browser Extensions
Development
Largu Dragos Constantin
An 3, Grupa 1, Semian B

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

3. Extensions can be developed either for personal
use, or for public use
For a public extension to be successful, it needs
to not interfere with everyday use of the
browser
Follow simple guidelines to assure quality
Light Memory Constant
Ease of use
Load Updates
Simplicity Customizability Tech Support

4. Every browser interprets “extensions” in a
different way
Google Chrome and Safari use the exact term
extensions
Firefox works with Add-ons and Extensions
Internet Explorer works with Browser
Extensions and Helper Objects
Opera works with Extensions and Widgets

5. 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
Extensions Add-ons Plug-ins

6. Extensions are practically all powered by Java
Script, styled by CSS and contained in HTML
Each 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

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

8. In about:config, the following Boolean fields
need to be created (all false):
extensions.checkUpdateSecurity
extensions.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

9. 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 file
an RDF install file (install.rdf), which contains
installation data
folders for other elements

10. 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

11. You can edit the basic overlay of the browser
window in overlay.xul and overlay.dtd
Java Script is included in a standard way using .js
files
One 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

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

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

14. Creating extensions in Chrome is MUCH simpler
than in Firefox
You 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

15. 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 structure
To 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" }

16. In order for the extension to be recognized by
Chrome, it needs to be loaded into the browser
using the Extension Manager
After loading, the icon image will appear in the
Chrome menu bar
When you click the icon, your extension will be
launched

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

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

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

20. Creating extensions in Opera is very straight
forward, pretty much like in Chrome
A basic file structure would be like
/config.xml
/index.html
/background.js
/popup.html
/icons/example.png
/options.html

21. Opera supports localization, following the same
principles as in Firefox
The 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 widget
background.js file which contains ` functions
one or more “popup” html files with actual content
a config.xml file with basic configuration info

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

23. When choosing the browser for which to
develop extensions, it’s very important to keep
track of the guidelines for developing
extensions
Study 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

24. Firefox Pros
well established community, pioneered extensions
widely used, so a good client base is available
powerful debugging tools
strong language capabilities
Firefox Cons
extremely tedious work is required just to get
started, and the whole process is over complicated
there is no clear border between add-ons and
extensions

25. Chrome Pros
very easy setup, perfect for beginners
you don’t need to create lots of files, which adds to
the clarity of the project
fast and lightweight development (you can convert
entire web applications to extensions very fast)
Google labs is simply awesome
Chrome Cons
not many people use it

26. Safari Pros
very straight forward development path, thanks to
the built in Extension Manager
comfort and ease of use
strong community of MAC and PC users
requires certificates in order to develop (security)
Chrome Cons
PC users don’t really care for Safari
certification may be complicated for some

27. Opera Pros
you are forced to respect W3C Widget standards
dedicated community with lots of app samples
relatively simple development process
you can add browser interface elements at runtime
Chrome Cons
not many people use opera
Opera Dragonfly works only while connected to the
internet

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