Mobile/Fennec/Extensions: Difference between revisions

From MozillaWiki
< Mobile‎ | Fennec
Jump to navigation Jump to search
m (→‎The Basics: fix dash characters)
(Replaced content with "Please see [https://developer.mozilla.org/en/Extensions/Firefox_on_Android the documentation on the Mozilla Developer Network].")
 
(11 intermediate revisions by 5 users not shown)
Line 1: Line 1:
[http://wiki.mozilla.org/Mobile Fennec] has support for extensions. Extensions are built using the [http://developer.mozilla.org/en/Building_an_Extension same methods] as any Mozilla-based extension. Since Fennec is a totally separate host application, there are some Fennec-specific issues that you need to handle when creating your extension. Most notably, the Fennec application ID and the differences in the user interface (UI) structure - the XUL used to build the UI. Extensions typically [http://developer.mozilla.org/en/XUL_Overlays overlay] the host application's UI to add toolbar buttons, menus and other features. Fennec is designed to work on devices with smaller screens and different usage models. For the most part, trying to use the same overlays in Firefox and Fennec is really not possible.
Please see [https://developer.mozilla.org/en/Extensions/Firefox_on_Android the documentation on the Mozilla Developer Network].
 
==The Basics==
 
In order to install an extension in Fennec, you need to follow the guidelines for building a Mozilla-based extension. To support Fennec specifically, you'll need to add Fennec to the list of target applications in the extension's <code>[http://developer.mozilla.org/en/Install_Manifests install.rdf]</code> file. The code snippet will look something like this:
 
<pre>
<em:targetApplication>
  <!-- Fennec -->
  <Description>
    <em:id>{a23983c0-fd0e-11dc-95ff-0800200c9a66}</em:id>
    <em:minVersion>0.8</em:minVersion>
    <em:maxVersion>1.0.*</em:maxVersion>
  </Description>
</em:targetApplication>
</pre>
 
In addition to the install manifest changes, you may want to expose your extension into the Fennec UI. Fennec does have a few familiar UI elements, such as a URL toolbar, a side toolbar with navigation controls and a browser content area. But Fennec doesn't have a main menu, statusbar, or even popup menus (yet). There are some new UI areas too: side toolbar holding the open tab thumbnails and a large offscreen panel for more complex UI features.
 
See the Fennec main window XUL file for the actual structure: [http://hg.mozilla.org/mobile-browser/file/tip/chrome/content/ browser.xul]
 
There is a handy [[Mobile/Fennec/Extensions/BestPractices|best practices]] document with lot's of valuable tips and tricks too.
 
==Fitting into Fennec (User Interface Guide)==
 
The Fennec user interface is very different than that of Firefox. For one thing, there is much less user-interface! Given small screens and a focus on maximizing space for content, add-ons need to put a lot of thought into how to extend the Fennec UI, but remain minimal. Check out the [[Mobile/Fennec/Extensions/UserInterface|user interface]] guide for background and guidelines on building your add-on into Fennec's UI.
 
==Supporting Add-on Options==
 
Fennec uses a simplified options UI. The UI is created using specialized XUL tags, implemented in XBL. Add-ons must also use the same XUL tags when creating options. It's easy to support Firefox and Fennec style options in the same add-on.
 
There is [[Mobile/Fennec/Extensions/Options|information]] on setting up and using options in a Fennec add-on.
 
==Porting an Existing Extension==
 
Since there aren't many extensions designed explicitly for Fennec, you may need to port your favorite extensions. This usually means extracting and editing the <code>install.rdf</code> file to add Fennec as a target application. You may also need to modify the extension's overlay to be able to work with the Fennec UI. Many archive tools, like 7zip, can edit and update a file in the archive without needing to manually extract it and add it back into the XPI.
 
There is also a collection of Fennec-specific [[Mobile/Fennec/CodeSnippets|code snippets]] that might be helpful.
 
==Debug Tools==
 
There are not yet the same amount of tools available for developers as there are for desktop Firefox, but some efforts are underway. If running a desktop version of Fennec, you can install DOM Inspector. You can also launch Fennec using the <code>-jsconsole</code> flag to display an Error Console window.
 
The Error Console window is also integrated into Fennec itself. It’s hidden by default – you need to use '''about:config''' to display it.
 
* Navigate to “about:config”
* Set “browser.console.showInPanel” to “true”
* Restart Fennec
* Go to the Browser Panels to display the Error Console
 
==Installing==
 
Extensions can be hosted on websites and installed by clicking on the extension link in Fennec. Make sure the webserver is serving the extension XPI with the right MIME type (application/x-xpinstall). The add-on installation UI should appear after clicking the link. Fennec supports a basic Add-on Manager user interface, which allows a user to manage extensions. Using this interface, a user can also install extensions from AMO (addons.mozila.org). Extensions can be removed using the same dialog.

Latest revision as of 16:41, 23 May 2012

Please see the documentation on the Mozilla Developer Network.

Retrieved from "https://wiki.allizom.org/index.php?title=Mobile/Fennec/Extensions&oldid=433778"