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>
TODOOnce debugging and testing is complete, you'll want to [http://developer.mozilla.org/en/docs/Extension_Packaging create an installable .xpi file] to give to your users. As was previously mentioned, .xpi files are just .zip files with a different extension. All .xpi files must contain the '''install.rdf''' file in the root (i.e., when you unzip it, install.rdf should be in the top directory). Follow these steps to create an installable .xpi: # Create a new zip file named '''addtabbeside.zip''' (NOTE: you can use .xpi instead of .zip if your application will allow it).# Add your extension files and directories to '''addtabbeside.zip''', making sure that '''install.rdf''' is in the root (i.e., don't zip the addtabbeside directory itself, just it's contents).# Rename the resulting file to '''addtabbeside.xpi''' You can try installing your extension in a browser that doesn't have it by simply dragging '''addtabbeside.xpi''' into it. This should trigger the add-on manager and give you the option to install your extension and restart the browser.
→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:
===Packaging the extension===
==Success, and some bugs==
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 = {
=Reflections=
Many of the steps we did in order to create the extension's installation and registration files will be the same each time. Rather than doing it by hand, you can use [http://ted.mielczarek.org/code/mozilla/extensionwiz/ an on-line wizard] to build a basic extension. The process of developing extensions is greatly improved with the addition of [http://kb.mozillazine.org/Setting_up_extension_development_environment some settings preferences] to the browser, as well as the [http://ted.mielczarek.org/code/mozilla/extensiondev/index.html Extension Developer's extension]. This extension will automate many of the steps described here. It will also allow you to reload the browser's chrome at runtime. This is a great way to test changes to your XUL/JS files without having to restart the browser.
You can read complete details on how to set-up an extension developer's environment [http://kb.mozillazine.org/Setting_up_extension_development_environment here].
