October 8, 2009 at 12:50

Creating a FireFox Starter Extension

    This article provides step-by-step instructions for developing the simplest extension for FireFox.
    This is a partial translation of the original article .

    This is not my article, but my friend (his little man: templar8@gmail.com). He really wants to get on Habr. I myself do not have enough karma for an invite.

    Introduction


    This tutorial is a step-by-step guide on how to create a simple extension. We will try to add another small panel with the phrase “Hello, World!” To the status bar.

    Environment preparation


    Extensions are packaged and distributed as zip files or packages with the XPI extension.

    Here is an example of a typical internal structure of an XPI file: We need to create a directory structure similar to this one. First, create the root directory of the extension (for example, or ). Inside this directory, create the directory in which to create the directory . In the root directory of the extension, create two empty text files with the names and . As a result, you should get a directory structure of the following type: Additional information on setting up the environment is located at this link .

    exampleExt.xpi:
            /install.rdf
            /components/*
            /components/cmdline.js
            /defaults/
            /defaults/preferences/*.js
            /plugins/*
            /chrome.manifest
            /chrome/icons/default/*
            /chrome/
            /chrome/content/

    C:\extensions\my_extension\~/extensions/my_extension/chromecontent

    chrome.manifestinstall.rdf

    \
            install.rdf
            chrome.manifest
            chrome\
                content\



    Installation script


    Open the install.rdf file and add the following text to it:

    2.  
    4.      xmlns:em="http://www.mozilla.org/2004/em-rdf#">
    5.  
    6.  
    7.     sample@example.net
    8.     1.0
    9.     2
    10.  
    11.     
    12.          with minimum and maximum supported versions. -->
    13.     
    14.      
    15.         {ec8030f7-c20a-464f-9b0e-13a3a9e97384}
    16.         1.5
    17.         3.0.*
    18.      
    19.     
    20.  
    21.     
    22.     sample
    23.     A test extension
    24.     Your Name Here
    25.     www.example.com
    26.       
    * This source code was highlighted with Source Code Highlighter.

    • sample@example.net - extension ID. This value is written in the format of the email address and is necessary to identify the extension (it should not be your email address). Make it unique. You can also use the GUID. NOTE: Although this parameter is written in the format of an email address, it does not have to be valid. (example.example.example)
    • Parameter 2- 2 indicates that it will be an extension. Suppose, for themes, this value should be set to 4 (all type codes can be found here ).
    • {ec8030f7-c20a-464f-9b0e-13a3a9e97384} - Firefox’s ID (approx. transl. - apparently, there will be a different value for Thunderbird).
    • 1.5 - the number of the minimum necessary extension for the version of Firefox to work. Never use the * character to indicate minVersion, this may lead to unexpected results.
    • 3.0. * - the maximum version number of Firefox with which the extension will work. This value should not be newer than the latest version of the browser at the moment! In this case, “3.0. *” Indicates that the extension will work with Firefox 3.0 and versions 3.0.x.

    (If you receive a message that install.rdf is incorrect, it will be useful to upload this file to Firefox (File-> Open file ...), after which the browser will show you xml errors. In my case, there was a space before “ Extensions created to work with Firefox 2.0.0.x, you need to specify “2.0.0. *” As the maximum version. For extensions created for working with Firefox 1.5.0.x - “1.5.0. *". A list of required and optional installation script parameters can be look here . Save the file.






    Browser Extension Using XUL


    The Firefox user interface is written using XUL and JavaScript. XUL is an XML subspecies that allows you to create user interface elements such as buttons, menus, control panels, trees, etc. All user actions are processed using JavaScript.

    In order to "expand" the browser, we modify individual parts of the Firefox user interface by adding or modifying widgets (controls). We add widgets by adding new XUL DOM elements to the browser window and control their behavior using scripts and event handling.

    The browser interface is defined in the file browser.xul( $FIREFOX_INSTALL_DIR/chrome/browser.jarcontains content/browser/browser.xul) In browser.xulwe can find a description of the status bar, which looks something like this:

    2. ... ...
    * This source code was highlighted with Source Code Highlighter.

    - This is the "tie point" of the XUL layer.

    XUL layers


    XUL layers are a way to add widgets to an XUL document. An XUL layer is an .xul file that defines XUL fragments that describe tie points in a “main” document. These fragments can indicate widgets that will be added, deleted or modified.

    XUL Layer Document Example


    3.          xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
    5.  
    * This source code was highlighted with Source Code Highlighter.

    A tag with an id equal to " status-bar" indicates a browser widget in which we want to add our element.

    A tag is a new widget that we want to add.

    Save this code in a sample.xuldirectory file chrome/content.

    Chrome URIs


    XUL files are part of the so-called “ Chrome Packages ” are packages of user interface elements loaded through the view URI chrome://. Instead of loading the interface using the URI of the view file://(moreover, the location of Firefox may vary depending on the platform and systems), Mozilla developers decided to create a new view of the URI, using which all installed applications will have access to the contents of XUL.

    The URI for the browser window is this chrome://browser/content/browser.xul. Try entering this URL in the address bar of Firefox.

    Chrome URI consists of several parts:

    • 1st — protocol ( chrome), which tells the Firefox network library that it is a Chrome URI.
    • 2nd — the name of the package (in this example, browser) that points to a set of user interface components. For your application, this part should be unique in order to avoid conflicts with other extensions.
    • 3rd — the type of data requested. There are three types: content(XUL, JavaScript, XBL communications and other components of the application user interface), locale(DTD, .properties files, which may contain other files containing user interface localization strings) and skin(CSS and theme images).
    • The last part is the path to the downloaded file.

    For example, it chrome://foo/skin/bar.pngloads a file bar.pngfrom the skin section of a theme foo.

    When you download something using the Chrome URI, Firefox uses the Chrome Registry (Chrome Registry) to convert this URI to the real path to the file on disk (or in JAR archives).

    Creating Chrome Manifest


    For more information about Chrome Manifest and all of its features, see the reference guide .

    Open the chrome.manifest file that was created in the root directory of your extension. Add the following code: ( Do not forget about the closing slash, “/”! Without it, the package will not be registered.) Let's analyze each element:

    content     sample     chrome/content/




    1. package type chrome
    2. package name chrome (must be lowercase, because Firefox / Thunderbird in version 2 and earlier do not support mixed case names - bug 132183 )
    3. hosting chrome package files

    This means that the sample package files are located in a directory chrome/contentrelative to the location of the file chrome.manifest.

    Note that the content, localization, and skin files must be inside the content, locale, and skin directory of the chrome subdirectory, respectively.

    Save the file. Now, when you start Firefox with your extension (how to do this will be described below), the chrome package will be registered.

    Layer registration


    Now you need to link your layer with the browser window. To do this, add the following lines to the file chrome.manifest: These two lines indicate Firefox'u tie and during loading .

    overlay chrome://browser/content/browser.xul chrome://sample/content/sample.xul

    sample.xulbrowser.xulbrowser.xul

    Testing


    First, we must tell Firefox about our extension. At the development stage for Firefox version 2 and higher, you can specify where to get the new extension from, and the browser will download it after each restart.

    1. Change to the home directory , and then to the directory containing the Firefox profile that you are going to work with (for example, ).Firefox/Profiles/.default/
    2. Go to the directory extensions/, if it does not exist, then create.
    3. Create a text file and put in it the full path to the directory with your extension (for example, C:\extensions\my_extension\or ~/extensions/my_extension/). Windows users should be mindful of the direction of slashes; be sure to add a trailing slash and remove all trailing spaces.
    4. Save the file with the extension id as its name (for example, sample@example.net). No file extension.

    Now everything is ready for testing.

    Launch Firefox. Firefox by text link will find the directory with your extension and install it. After launching the browser, you will see the message “Hello, World!” on the right side of the status bar.

    You can make some changes to the .xul file, restart Firefox, and immediately see the result.

    Package creation


    Now that the extension is working, you can create a package for later distribution and installation.

    Pack the contents of the directory with your extension (not the extension directory itself) with the zip archiver and change the archive extension from .zip to .xpi.

    If you are the proud owner of 'Extension Builder, then he can do all the dirty work for you (Tools -> Extension Developer -> Extension Builder). Just go to the directory with your extension and click the Build Extension button. This extension has a lot of tools to facilitate development.

    Now upload the resulting .xpi file to your server and make sure its type is set to application/x-xpinstall. After that, you can download and install the extension.
    Tags:

    Also popular now: