1
edit
Changes
m
<?xml version="1.0" encoding="UTF-8"?>
<?xml version="1.0" encoding="UTF-8"?> <RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#">
</RDF>
→addtabbeside/
=Introduction=
In the [[Dive into Mozilla Modifying Firefox Lab|previous lab]] we made a small change to the behaviour of Firefox by modifying the browser's source code. In this lab we explore how to achieve the same effect using an '''extension''' rather than modifying the tree. ''(Thanks to [http://www.starkravingfinkle.org/blog/ Mark Finkle] for the idea of redoing this as an extension.)''
The goal of this exercise is to expose you to Firefox extensions and to show you how to modify or extend the browser without changing its source code directly. Some thought will also be given to the two methods of doing this (i.e., in the tree vs. as an extension), comparing their advantages and disadvantages.
The first thing to do is to copy the '''addtabbeside.js''' file we wrote earlier to '''addtabbdeside/chrome/content/addtabbeside.js'''.
This code now needs to get merged into the browser so it can access elements within the application. We do this by providing a [http://developer.mozilla.org/en/docs/XUL_Overlays XUL Overlay] file. A XUL Overlay is a .xul file that specifies XUL fragments to insert at specific merge points within a "master" document. Often this is used to add new UI to an application (e.g., a new menu item), but in our case we'll use it to merge our overlayaddtabbeside.js script into the browser.
We need to create '''addtabbdeside/chrome/content/overlay.xul''':
<pre>
<overlay id="addtabbeside-overlay"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script type="application/x-javascript" src="addtabbeside.js"/>
</overlay>
</pre>
Having added our script and overlay files, we now need to add a couple of metadata files to help Firefox understand and install/load our extension.
The first is '''addtabbeside/contentchrome.manifest''', which is a [http://developer.mozilla.org/en/docs/Chrome_Manifest Chrome Manifest]. This file helps Firefox translate between chrome:// URIs and actual files on disk. It also allows us to specify where our overlay will be merged into the browser:
# Chrome package addtabbeside has it's content in ./chrome/content
<pre>
<Description about="urn:mozilla:install-manifest">
<em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <!-- firefox -->
<em:minVersion>2.0</em:minVersion>
<!--<em:maxVersion>3.0a3pre0a9pre</em:maxVersion>--> <!-- trunk build Feb 27Oct 14, 2007 --> <em:maxVersion>3.0+</em:maxVersion> <!-- work for v3.0 and above -->
</Description>
</em:targetApplication>
</Description>
</pre>
C:\Documents and Settings\''Username''\Application Data\Mozilla\Firefox\Profiles\''dev-profile''\extensions\addtabbeside@senecac.on.ca
Or in Mac OSX
~/Library/Application Support/Firefox/Profiles/
This file should contain a single line of text--the full path to your extension, for example:
However, as was the case in our previous attempt, our code has a bug. Moving existing tabs doesn't update our position state, since we only modify '''mPreviousIndex''' when a new tab is selected; moved tabs remain selected, but change their order (i.e., TabSelect won't get dispatched on a move).
Luckily we've already stumbled upon the solution to this problem--the '''TabMove''' event. Here is the updated version of '''overlayaddtabbeside.js''', with the changes in bold:
var AddTabBeside = {
