Webchunks 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

Find the most recent XPI in this directory and click on it to install the extension. 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.

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:

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.

You can hide/show the Webchunks toolbar using the View > Toolbars > "Webchunks toolbar" menu entry.

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.

   

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

   

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

• an entry with bold text was recently refreshed
• an entry with italic text has expired (typical example: an eBay auction)

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.

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.

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 the power of the wonderful Greasemonkey extension for Firefox, it's now possible to insert dynamically Webchunks in any web site. Just follow these steps:

1. Of course, make sure you've installed correctly Greasemonkey before anything else... In case you haven't, it's available from addons.mozilla.org.
2. Then, for a given web page, write a Greasemonkey script doing the following:
1. adding the hslice class to your webslice in the document
2. adding a dummy ID to that element if it has no ID at all
3. adding the entry-title class to the element that contains the title of your webslice or append one to your webslice if there's no title and you want to suggest a default one
4. adding the entry-content class to all the sub-elements of your webslice you want to see appear in your popup

Here is an example of such a script for http://us.cnn.com and http://edition.cnn.com.

Then when you load that web page, the Greasemonkey script will add for you the information needed to have Webchunks in the page... Then the Webchunks extension will detect them as if they were natively in the page...

Note: Webchunks extension is not dependant on Greasemonkey, meaning that if you don't have Greasemonkey, no problem, Webchunks will still install and run.