667
edits
Changes
no edit summary
==Creating the rest of the extension==
Firefox extensions are packaged as compressed zip files with a '''.XPI''' extension. This is what you download when you visit http://addons.mozilla.org and choose to install an extension. This means that you can unpack any extension and see how it's built. For example, try saving [https://addons.mozilla.org/firefox/16/ ChatZilla's .xpi] to your computer and decompress it (NOTE: if your built-in unzip program won't do this, try changing the name of the file to .zip).
An extension is a series of files and directories containing JavaScript, XUL, CSS, XML, RDF, and other custom text files. Some of these files define scripts to be executed, such as those we wrote above. Other files contain information ''about'' the extension, meta data telling the browser how to integrate and install things, what the extension is called, it's version number, etc.
===Extension files and directory structure===
Start by creating the following directory structure:
addtabbeside/
chrome/
content/
Because this is a first extension, we will skip some [http://developer.mozilla.org/en/docs/Building_an_Extension#Setting_up_the_Development_Environment other directories and files] that more complete extensions would include (e.g., localization, skins).
====addtabbeside/chrome/content====
The first thing to do is to copy the '''overlay.js''' file we wrote earlier to '''addtabbdeside/chrome/content/overlay.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 overlay.js script into the browser.
We need to create '''addtabbdeside/chrome/content/overlay.xul''':
<pre>
<?xml version="1.0" encoding="UTF-8"?>
<overlay id="addtabbeside-overlay"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script src="overlay.js"/>
</overlay>
</pre>
====addtabbeside/====
Having added our script and overlay files, we now need to add a couple of meta data files to help Firefox understand and install/load our extension.
Here is the '''content.manifest''' file:
content addtabbeside chrome/content/
overlay chrome://browser/content/browser.xul chrome://addtabbeside/content/overlay.xul
chrome://browser/content/browser.xul
==Success, and some bugs==
Moving a tab breaks tab position state code. We also need to update position on TabMove.
=Reflections=
