View source for Browser extension

{{incomplete}}
<!-- <pageby nominor="false" comments="false"/> -->

== Definition ==

{{quotation|A browser extension is a computer program that extends the functionality of a web browser in some way. Depending on the browser, the term may be distinct from similar terms such as plug-in or add-on. Mozilla Firefox was designed with the idea of being a small and simple web browser, delegating more advanced functions to Mozilla extensions.}} ([http://en.wikipedia.org/wiki/Browser_extension Wikipedia], retrieved 10:48, 19 March 2009 (UTC)).

Browser extensions can be considered a variant of [[rich internet application]]s, since they may connect to the Internet and they ought to offer a similar security model as Java (In practise though we suggest to be careful and only download extensions that are rated by informed users and from places you trust).

We believe that there is huge potential in education for such extensions (and some already exist). It's a technology that can be compared to commercial initiatives like Adobe Air or other technologies used for desktop widgets.
An other alternative to browser extensions are browser modifications, such as [http://flock.com/mozilla Flock] (a social software variant that is built on top of standard Firefox code).

See also: [[web browser]]

== Firefox extensions ==

Below is a short list for the [[Firefox]] browser and that should not grow too big. See the links sections. In addition, there are some installation tips

=== How to to ===

Adding an extension to Firefox is easy, but may be different for each version. E.g. you may find it through the "Tools" menu -> "Addons".

To make it simple:
# start up Firefix
# Go to: https://addons.mozilla.org/en-US/firefox
# Search for an extension, then click on the title (not yet the "add to Firefox button) '''and read''' some of the reviews. Often there exist several alternatives for a given functionality.
# Click on "Add to Firefox" if you want to have it
# Restart the browser once you are done adding extensions.

Too many extensions may slow down the browser ...

Sometimes, extensions are distributed as *.xpi files. To install these there are two solutions.
* Open the Tools->add ons panel in Firefox
* Drag and dropt the *.xpi into the panel

A better way is to unhide the "install" button in the same panel
# Go to the advanced preferences, type ''about:config'' in the address bar
# Search for "''extensions.hideInstallButton''".
# Double-click to enable

=== Dealing with incompatible extensions (after upgrades) ===

Warning: Only for advanced users ! Before trying any of this, you must understand how to [http://support.mozilla.org/en-US/kb/troubleshoot-firefox-issues-using-safe-mode launch Firefox in save mode] in case something goes wrong.

; Old Firefox versions (<= 4.x)
According to [http://www.bluishcoder.co.nz/articles/mozilla/disable-extension-check.html Bluish coder], Firefox extensions check what version of Firefox they run on and sometimes don’t run if you are running a newer version of Firefox due to failing the check. You can force then extension version check to be ignored by adding the configuration option ‘extensions.checkCompatibility’ set to ‘false’. This option can be added by going to the URL ‘about:config’. Right click on the list and choose ‘New’, followed by ‘Boolean’. Enter the name as ‘extensions.checkCompatibility’ and the value as ‘false’. Once done extensions will no longer check to see if they are compatible with the verson of Firefox you are running. You can remove the preference or set it to ‘true’ to enable the check again.

; No so old firefox versions (<= 10)
Same as above, but you had to install [https://addons.mozilla.org/en-US/firefox/addon/add-on-compatibility-reporter/ Add-on Compatibility Reporter]

; Newer version (=> 10)
More old add-ons will work now. Exceptions seem to be the ones that include binary code and/or are marked by the developer for a given version. In the latter case, one still can try hand editing. According to [https://addons.mozilla.org/en-US/firefox/addon/add-on-compatibility-reporter/reviews/370099/ kumarakshay] (August 4, 2012), you can try the following:

* Download the addon xpi from any other browser.
* Open archive inside any File unarchivers like 7zip,etc.
* Locate the file install.rdf
* Edit with a text editor and find "em:maxVersion>x.x.*</em:maxVersion"
* Replace x.x with 23.0,24.0,etc.
* Save it
* Close 7zip
* Drag the xpi file to the firefox window

=== List of Firefox extensions ===

Also see various collection on the Mozilla site, for example:
* [https://addons.mozilla.org/en-US/firefox/collections/webilu/webpro/ Web Pro]
* [https://addons.mozilla.org/en-US/firefox/collections/mozilla/webdeveloper/ Web Developer's Toolbox]
* 

==== For students, researchers and teachers====

* [https://addons.mozilla.org/en-US/firefox/addon/12123 Zoom Page] zooms full page or text only using two buttons in status bar. Useful if you want to project web pages in a classroom.

* A similar, more complex tool is [ttps://addons.mozilla.org/en-US/firefox/addon/nosquint/ NoSquint]

* [[Zotero]], to help you collect, manage, and cite your research sources. [https://addons.mozilla.org/fr/firefox/addon/427 Scrapbook] is an simpler alternative with different functionalities.

* [https://addons.mozilla.org/en-US/firefox/addon/scholar-h-index-calculator/developers Scholar H-Index Calculator Developer]. ill automatically display some of the most known citation indices (h-index, g-index, e-index) for any author, when querying on Google Scholar.

* [[eLML]] editor, to edit eLML documents (not stable yet on 3/2009). This editor is based on [http://www.firedocs.org/ Firedocs]. (Usually doesn't work after upgrades)

* [http://www.firedocs.org/ Firedocs] a word processor and remote authoring workspace. Firedocs has support for a growing number of document formats and content servers. It can Auto-discover editable content while you browse it and provides wysiwyg editing for html and xml-based content types.

* [http://www.wired-marker.org/en/ Wired-Marker] is a permanent (indelible) highlighter that you use on Web pages. The highlighter, which comes in various colors and styles, is a kind of electronic bookmark that serves as a guide when you revisit a Web page
** Could be used in classes that engage learners in reading web pages (not tested).
** [https://addons.mozilla.org/en-US/firefox/addon/6219 Wired-Marker extension]

* [https://www.mozilla.org/en-US/lightbeam/ Lightbeam]. Will tell you who is spying on you. When you start it, it will track and visualize all websites that interact with your page and your browser. 

* [http://gears.google.com/ Google Gears] allows to work offline with certain web applications.

==== For general web use ====

* [https://addons.mozilla.org/en-US/firefox/addon/classicthemerestorer/ Classic Theme Restorer]. If you happen to own real screens and hate digging around in a chrome-like minimalist interface ....

* [http://googlebar.mozdev.org/ Googlebar]. See this pages for some (outdated) pointers to other domain-specific searches. Otherwise, the home page is outdated (but not the extension itself).
** [https://addons.mozilla.org/en-US/firefox/addon/33 googleba extension]

* [https://addons.mozilla.org/firefox/424/ Wizz RSS News Reader] Firefox 1.x - 2.x extension]

* [https://addons.mozilla.org/en-US/firefox/addon/748 Greasemonkey] A quite spectacular extension that allows you to customize the way a webpage displays using small bits of JavaScript. Hundreds of scripts, for a wide variety of popular sites, are already available at [http://userscripts.org UserScripts.org]. See [[user-side JavaScript]] for more information (including a link to useful mediawiki scripts).

* [https://addons.mozilla.org/en-US/firefox/addon/1368 Colorful tabs]. Adds color to tabs. If you browse with lots of tabs, makes finding the same tab a bit easier (similar extensions exist).

* [http://trac.arantius.com/wiki/Extensions/Resurrect Resurrect pages]. Finding ghosts of dead pages. Truly useful, if you find dead links in this wiki ;)

==== For web page authors and web developers ====

* [http://users.skynet.be/mgueury/mozilla/index.html  HTML VALIDATOR] is a Mozilla extension that adds HTML validation inside Firefox and Mozilla. The number of errors of a HTML page is seen on the form of  an icon in the status bar when browsing. The details of the errors are seen when looking the HTML source of the page.
** [https://addons.mozilla.org/en-US/firefox/addon/249 related Firefox (en_US) page]

* [http://chrispederick.com/work/web-developer/ Web Developer] and DOM Inspector. Tells you most everything about your HTML page.
** On older FF versions you had to reinstall the browser choosing the 'Custom' and 'Developer Tools' options in order to use the DOM Inspector
** [https://addons.mozilla.org/en-US/firefox/addon/dom-inspector-6622/ Firefox DOM Inspector page] (download)
** [https://addons.mozilla.org/en-US/firefox/addon/60 Firefox web developer page] (download)

* [https://addons.mozilla.org/en-US/firefox/addon/271 ColorZilla] includes an Eyedropper, ColorPicker, Page Zoomer and other colorful goodies.

* [http://www.getfirebug.com/ FireBug] integrates with Firefox to put a wealth of web development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page. There also is a light version based on [[JavaScript]] that you can use with any browser.
** [https://addons.mozilla.org/en-US/firefox/addon/1843 related Firefox (en_US) page].
** [http://www.getfirebug.com/keyboard.html Firebug Keyboard Shortcuts]
** You also may add the [https://addons.mozilla.org/en-US/firefox/addon/10273 Codeburner for Firebug] extension, an extension that builds on top of FireBug to extend it with reference material for HTML and CSS.

* [https://addons.mozilla.org/en-US/firefox/addon/view-source-chart/ View Source Chart] is a simple, but very useful extension that will display the block structure of a web site. Useful to understand how the layout is done.

* [https://addons.mozilla.org/en-US/firefox/addon/2897 XML Developer Toolbar]. For XML development. Schema and DTD Generation, Various validation, XSLT on the fly. (As of 2010, this extension doesn't work with Firefox 3.0 !)

* [https://addons.mozilla.org/en-US/firefox/addon/5023/ XSL Results] Display XSLT transformation results. Since the XML toolbar is dead, this is a must have extension for XML authors. On the other hand, a good XML editor also can do this, however it takes more time to fire up an editor just to look at a result.

* [https://addons.mozilla.org/de/firefox/addon/5515 XQuery USE ME (XqUSEme)]. A [[XQuery]] processor. Great for teaching XQuery. E.g. you can put some huge XML files on some server and then ask students to do queries and also generate HTML output which then shows in a browser window.

* [https://addons.mozilla.org/en-US/firefox/addon/fireshot/ FireShot - Webpage Screenshots: Capture + Annotate]
** [https://addons.mozilla.org/en-US/firefox/addon/1146 Screengrab] was an extension that makes it easy to save a web-page as an image – it’s a screen capture tool for Firefox! '''Dead''' as of April 2012.

* There doesn't seem to be an integrated CSS validator. For convenience, you can install [https://addons.mozilla.org/en-US/firefox/addon/2289 CSS Validator] which will use the online  W3C CSS Validator. Since it will forward an URL, your page must be published on a web site.

* [http://firefogg.org/ FireOgg], a Firefox plugin for creating ogg and webm video files

There are dozens of other useful extensions, but as we said, some extensions may slow down your browser, some eat memory and all slow down startup. Here are some extra ones:

* [https://addons.mozilla.org/en-US/firefox/addon/13048 Codeburner for Firefox]
** It provides searchable reference information and code examples for HTML and CSS. It's a standalone version of the original CodeBurner for Firebug, but with an independent interface, and more dedicated search tools.

* [https://addons.mozilla.org/en-US/firefox/addon/2076 JSView    2.0.]
** offers the ability to view the source code of external files. Most websites store their javascripts and style sheets in external files and then link to them within a web page's... A must have for JS coders that want to understand how others code client-side interaction.

* [https://addons.mozilla.org/en-US/firefox/addon/11485 Web Doc Processor]
** modularized Firefox extension for processing and validation of XHTML web documents inside browser.
** Currently (Sept 2009) still experimental (works under Linux, HTML Validator does not ....)

* [https://addons.mozilla.org/en-US/firefox/addon/pencil/?src=api Pencil Project] (Mozilla page)
** a free and opensource tool for making diagrams and GUI prototyping that everyone can use.
** [http://pencil.evolus.vn/en-US/Home.aspx Pencil Project Home page] (may include a more recent version, also includes standalone versions)

==== For mediawiki authors ====

* '''DEAD extension''' (as of Dec 2017). [https://addons.mozilla.org/en-US/firefox/addon/4125 It's All Text! 1.3.1]. Edit textareas using an external editor, because it's all text!
** I use this to edit edutechwiki pages on PCs with an external editor.

* '''DEAD extension''' (Dec 2017): [http://www.borngeek.com/firefox/colt/ CoLT] Copy Link Text was a tiny extension to copy a hyperlink's associated text or both the URL and the text in various formats.
** Supports mediawiki format, I used it all the time - [[User:Daniel K. Schneider|Daniel K. Schneider]]

* [https://addons.mozilla.org/en-US/firefox/addon/copy-link-url-we/ Copy Link URL WE]
** Can partly replace COLT (see above). 
** In Firefox: Menu -> Add-ons -> Extensions. Click on Preferences. Modify "Copy Link info": <nowiki>[[[url]] [[name]]]</nowiki>

* [http://userscripts.org/scripts/show/12529 Wiked]. Not an extension but a script for the [https://addons.mozilla.org/en-US/firefox/addon/748 Greasemonkey] extension.
** Best mediawiki editor, if don't want to work with an external editor (as of 3/2009).

== Other browsers ==

=== Chrome extensions ===

* To get the standard tools: Hit CTRL-SHIFT-i or CTRL-SHIFT-j

* [https://chrome.google.com/webstore/category/extensions Chrome extensions gallery]

Google [http://googleforstudents.blogspot.com/ published in their student blog] some tips about extensions of interest for students:
* [http://googleforstudents.blogspot.com/2010/09/google-chrome-extensions-at-school-get.html Google Chrome Extensions at School: Get more done!]
* [http://googleforstudents.blogspot.com/2010/09/google-chrome-extensions-at-school_16.html Google Chrome Extensions at School: Research and write papers]

=== IE ===

* [http://www.microsoft.com/downloads/details.aspx?familyid=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en Web Developer Toolbar] (for IE 7 only !)
* IE 8 and later integrate developer functionality: Getting started with the tools is simple: press F12 or click Developer Tools from the Tools menu.

* Find more through the IE Tools/extensions menu. IE is less well known for extensions, but there ''are'' some other useful extensions for other purposes (e.g. video downloads). Some extensions are payware.

=== Opera ===

Get at least the developer console and DOM snapshot from  [http://dev.opera.com/tools/ the Opera tools page]. Installing add-ons with Opera is really easy.

== Alternatives to extensions ==

In some cases, there are no extensions (add-ons, plugins, etc.) available and one has to use another [[web browser]]. E.g. in 2010, only Opera could display dynamic [[SVG]]. As of 2013, Firefox can't play mp4 videos, ....

In addition to the traditional browsers, there are research or speciality browsers that can do things that the "big" IE, Mozilla, Webkit (Safari/Chrome), Opera, etc. can't do. 

[[Category:Writing]]
[[Category:Browser extensions]]
[[Category:Authoring tools]]
[[Category:Web technology tutorials]]