Browser extension

From EduTech Wiki
Jump to: navigation, search

Draft


1 Definition

“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.” (Wikipedia, retrieved 10:48, 19 March 2009 (UTC)).

Browser extensions can be considered a variant of rich internet applications, 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 Flock (a social software variant that is built on top of standard Firefox code).

See also: web browser

2 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

2.1 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:

  1. start up Firefix
  2. Go to: https://addons.mozilla.org/en-US/firefox
  3. 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.
  4. Click on "Add to Firefox" if you want to have it
  5. 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

  1. Go to the advanced preferences, type about:config in the address bar
  2. Search for "extensions.hideInstallButton".
  3. Double-click to enable

2.2 Dealing with incompatible extensions (after upgrades)

Warning: Only for advanced users ! Before trying any of this, you must understand how to launch Firefox in save mode in case something goes wrong.

Old Firefox versions (<= 4.x)

According to 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 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 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

2.3 For students, researchers and teachers

  • 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. Scrapbook is an simpler alternative with different functionalities.
  • 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 Firedocs. (Usually doesn't work after upgrades)
  • 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.
  • 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
  • Google Gears allows to work offline with certain web applications.

2.4 For general web use

  • Classic Theme Restorer. If you happen to own real screens and hate digging around in a chrome-like minimalist interface ....
  • Googlebar. See this pages for some (outdated) pointers to other domain-specific searches. Otherwise, the home page is outdated (but not the extension itself).
  • 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 UserScripts.org. See user-side JavaScript for more information (including a link to useful mediawiki scripts).
  • Colorful tabs. Adds color to tabs. If you browse with lots of tabs, makes finding the same tab a bit easier (similar extensions exist).
  • Resurrect pages. Finding ghosts of dead pages. Truly useful, if you find dead links in this wiki ;)

2.5 For web page authors and web developers

  • 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.
  • ColorZilla includes an Eyedropper, ColorPicker, Page Zoomer and other colorful goodies.
  • 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.
  • 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.
  • 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 !)
  • 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.
  • 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.
  • There doesn't seem to be an integrated CSS validator. For convenience, you can install 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.
  • 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:

  • 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.
  • 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.
  • 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 ....)
  • Pencil Project (Mozilla page)
    • a free and opensource tool for making diagrams and GUI prototyping that everyone can use.
    • Pencil Project Home page (may include a more recent version, also includes standalone versions)

2.6 For mediawiki authors

  • 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.
  • CoLT Copy Link Text is tiny extensionto copy a hyperlink's associated text or both the URL and the text in various formats.
  • Wiked. Not an extension but a script for the Greasemonkey extension.
    • Best mediawiki editor, if don't want to work with an external editor (as of 3/2009).

3 Other browsers

3.1 Chrome extensions

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

Google published in their student blog some tips about extensions of interest for students:

3.2 IE

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

3.3 Opera

Get at least the developer console and DOM snapshot from the Opera tools page. Installing add-ons with Opera is really easy.

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