logoWebchunks extension for Firefox 3 Tutorial

Author: Daniel Glazman <daniel@glazman.org>


  1. About Webchunks
  2. Installing Webchunks
    1. Disabling or uninstalling Webchunks
    2. Updating Webchunks to a more recent version
  3. The Webchunks toolbar
  4. A demo is better than anything else...
  5. Entries in the toolbar
  6. Webchunks everywhere

1. About Webchunks

Webchunks is an extension to Firefox 3 for all platforms implementing Internet Explorer Webslices and even extending them. With the use of a great extra extension to Firefox, Greasemonkey to name it, it's possible to insert Webchunks/Webslices in all web pages, regardless of the fact the site's author did not add Webchunks/Webslices to the site.

Note: this tutorial will use only the word Webchunk for this point.

2. Installing Webchunks

Install Webchunks from addons.mozilla.org. Firefox 3 will need to be restarted to install the extension. That's all !

Warning, Webchunks does not work with versions of  Firefox older than version 3.
Warning, Webchunks 1.0 is not compatible with previous versions of Webchunks and you'll need to recreate your Webchunks toolbar if you had a previous version installed.

2.1. Disabling or uninstalling Webchunks

Seriously, you don't want to do that :-) If you really really need it, select the "Add-ons" menu entry in the Tools menu of Firefox 3 to do that.

2.2 Updating Webchunks to a more recent version

If you have enabled automatic notification of extension updates, Firefox 3 will notify you directly when a new version is available. Otherwise, just follow again the installation process described above.

3. The Webchunks toolbar

Webchunks adds a new toolbar to Firefox 3 and a button controlling that toolbar (right before the URL field) :

toolbar

The first icon at the start of the toolbar serves two purposes:

  1. if you are visiting a web page containing Webchunks, a single click on the icon will add the default Webchunk of the page if any (or the first Webchunk in the page if there's not default Webchunk)  to the toolbar,
  2. a menupopup appears if you click on the down arrow. That menu lists current demo sites for Webchunks (eBay and StumbleUpon at the time of writing of this document) and all Webchunks detected in the current browsed web page. Selecting a Webchunk from that menu adds it to the toolbar.

Note: if you have too many webchunks for the width of the toolbar, a small chevron will appear on the right hand side of the toolbar allowing you to reach hidden webchunks through a menu.

toolbar chevron

You can hide/show the Webchunks toolbar using the View > Toolbars > "Webchunks toolbar" menu entry or you can use the Webchunks button in the main toolbar. This button is usually blue and becomes red if one Webchunk was updated and displayed bolden in its toolbar.

4. A demo is better than anything else...

  1. Click on the right arrow of the Webchunks icon
  2. Select Demo Sites > StumbleUpon
  3. Wait until the page is loaded
  4. Move the mouse pointer over the main area of the page with the thumbnails and notice the blue border and the Webchunks icon appearing on the left hand side.

    blue webchunks icon

  5. Click on that blue icon.
  6. A dialog pops up letting you customize the name of the webchunk before adding it to the webchunks toolbar

    blue webchunks icon

  7. Click on OK and notice the new entry in your Webchunks toolbar.
  8. Click on the new entry and enjoy...

5. Entries in the toolbar

Each entry in the toolbar complies with Microsoft's Webslices specification in terms of font-weight and font-style :

Clicking on an entry opens a popup with a set of buttons and the webchunk itself: A throbber turns inside the popup until the webchunk is fully loaded.

webchunk panel

The first button, "Open", at the top of the popup will close the popup and show the web page corresponding to the webchunk in the main browser area.

The second button, "Delete", removes the webchunk from the toolbar. This cannot be undone.

The third button, "Refresh", manually refreshes the webchunks contents in the popup.

The popup also contains expiration information if such data are provided by the webchunk.

The rest of the popup shows the webchunks itself. All active HTML elements like links or for submission buttons will show the result in the main browser area, closing the popup.

A context menu is available on all webchunk entries. It allows to open the page the webchunk refers to, delete or refresh the webchunk, and tweak its properties.

webchunk panel

6. Webchunks everywhere

Despite of the fact Webchunks/Webslices are a great feature, they're not widely used over the Web. One of the main reasons is probably the fact they hide advertisement... Anyway, thanks to a piece of code written by Zbigniew Braniecki, it's possible to select any element in an arbitrary web page and turn into a webchunk. Just select the first menu item when you click on the webchunk icon in the webchunks toolbar, and select an element in the page !