Web browser extensions development


Published on

Web browser extensions development for CLIW Class

Published in: Technology
1 Comment
  • For more details, please refer to my Blog at http://extensiondevcliw.blogspot.com/
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Web browser extensions development

  1. 1. Web Browser Extensions DevelopmentLargu Dragos ConstantinAn 3, Grupa 1, Semian B
  2. 2. Web browser extensions are custom usercreated programs which extend thefunctionality of web browsersAll major browsers support extensionsThe term “extension” is interpreted in differentways, depending on the browser usedAll extensions feature the same developmentprinciples and guidelines
  3. 3. Extensions can be developed either for personaluse, or for public useFor a public extension to be successful, it needsto not interfere with everyday use of thebrowserFollow simple guidelines to assure quality Light Memory Constant Ease of use Load Updates Simplicity Customizability Tech Support
  4. 4. Every browser interprets “extensions” in adifferent wayGoogle Chrome and Safari use the exact termextensionsFirefox works with Add-ons and ExtensionsInternet Explorer works with BrowserExtensions and Helper ObjectsOpera works with Extensions and Widgets
  5. 5. Extensions are what we will be exclusivelydiscussing furtherAdd-ons are more complex types of programsdesigned to run along side the browser (such asfor example an automatic text translator)Plug-ins are sets of programs created toenhance modularly designed browsers byadding functionality to existing elements Extensions Add-ons Plug-ins
  6. 6. Extensions are practically all powered by JavaScript, styled by CSS and contained in HTMLEach browser implements different languagesfor installation (example RDF for Firefox)Manifest and Assembly files are implemented tostore information about theauthor, permissions, application version, etc
  7. 7. Creating extensions in Firefox is a bitcomplicated, and many problems may occurbecause of Mozillas fast development cycleBefore starting, these problems need to beaddressedFirst, a user profile needs to be created (Start->Run->Firefox -P->New Profile)
  8. 8. In about:config, the following Boolean fieldsneed 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. 9. Directory structure in Firefox is focused aroundlocalization (meaning folders with differentlanguages)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. 10. When adding a new page to the extension, youneed 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, whichalter appearance of content in .xul files
  11. 11. You can edit the basic overlay of the browserwindow in overlay.xul and overlay.dtdJava Script is included in a standard way using .jsfilesOne very important aspect is that for a newfile, the .xul and .dtd files need to have thesame name, for example overlay.xul andoverlay.dtd
  12. 12. Once you are done writing the extensioncode, set an extension id in the install.rdf fileGo to %APPDATA%/Mozilla/Extensions andcreate a file named exactly as the install idInside, write the absolute path to the directorycontaining the install and manifest filesNow you have a pointer to your extension files
  13. 13. To deploy the extension, simply pack it in a ziparchive, change the name to .xpi, anddrag&drop it to the Firefox windowProceed to install it as any other extensionIt will be visible in the Add-ons menu underExtensions
  14. 14. Creating extensions in Chrome is MUCH simplerthan in FirefoxYou simply need to create a folder anywhere, inwhich you need to put a manifest.json file, a.icon file that works as a favicon, HTML, CSS andJS files
  15. 15. Json is conceptually similar to XML, in the sensethat you can define your own content freelyIts syntax is based on an "elementName" :"elementValue" type structureTo add a functionality, the manifest file needs tobe edited for example, to display a new html page, we add "browser action" : { "popup": "helloworld.html" }
  16. 16. In order for the extension to be recognized byChrome, it needs to be loaded into the browserusing the Extension ManagerAfter loading, the icon image will appear in theChrome menu barWhen you click the icon, your extension will belaunched
  17. 17. Creating extensions in Safari is veryeasy, because Safari provides a built in toolnamed Extension BuilderThe only catch is that you need to have registerat developer.apple.com and follow a set ofinstructionsYou need a signed certificate in order to useyour extensions
  18. 18. The process is very simple, you justregister, download a certificate file, run it, andupload an outputted fileNow it’s very similar to how Chrome works, onlyyou don’t have to create a manifest fileSimply create a directory using the ExtensionBuilder, and copy all your HTML, JS and CSS filesthere (including a .icon file)
  19. 19. You can use the Expression Builder to createbuttons, interfaces and other UI elementsdirectly from the GUIAfter you are done, just press Pack andInstall, and you are done!It’s really dead simple
  20. 20. Creating extensions in Opera is very straightforward, pretty much like in ChromeA basic file structure would be like /config.xml /index.html /background.js /popup.html /icons/example.png /options.html
  21. 21. Opera supports localization, following the sameprinciples as in FirefoxThe basic extension format follows the sameprinciples as W3C Widgets, meaning you haveto 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. 22. In order to run your extension, drag&drop theconfig.xml file to the browser windowOne very important thing to remember is theOpera strictly follows W3Crecommendations, so if your code is not W3Cvalid, you may have problemsAlso, Opera allows you to create Widgets, whichare independent mini-applications that run inseparate windows, but provide functionalitysimilar to Extensions
  23. 23. When choosing the browser for which todevelop extensions, it’s very important to keeptrack of the guidelines for developingextensionsStudy thoroughly regarding the capabilities ofeach browser to avoid situations in which youfind out half way into your project that thebrowser you chose cannot do what you want
  24. 24. Firefox Pros well established community, pioneered extensions widely used, so a good client base is available powerful debugging tools strong language capabilitiesFirefox 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. 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 awesomeChrome Cons not many people use it
  26. 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. 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 runtimeChrome Cons not many people use opera Opera Dragonfly works only while connected to the internet
  28. 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!