|
|
| (5 intermediate revisions by 4 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>1.1</em:minVersion>
| |
| <em:maxVersion>4.0b2pre</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 or a statusbar. There are some new UI areas too: another 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.
| |
| | |
| Fennec does not (yet) include Firefox's [[FUEL]] library. Fennec instensions should instead use [https://developer.mozilla.org/en/XPCOM XPCOM] directly.
| |
| | |
| ==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.
| |
| | |
| == Electrolysis ==
| |
| | |
| One big difference between Fennec and desktop Firefox is that Fennec uses the "Electrolysis" multi-process architecture to run web content in a separate process. This has some big effects on add-ons that need to interact with browser elements and their contents. For details, see [[/Electrolysis]].
| |
| | |
| == Restartless add-ons ==
| |
| | |
| Fennec 4.0b4 supports [https://developer.mozilla.org/en/Extensions/Bootstrapped_extensions bootstrapped (restartless) add-ons]. For more details, see these links:
| |
| | |
| * http://starkravingfinkle.org/blog/2011/01/bootstrap-jones-adventures-in-restartless-add-ons/
| |
| * http://starkravingfinkle.org/blog/2011/01/restartless-add-ons-more-resources/
| |
| | |
| ==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 [http://www.mozilla.com/en-US/mobile/platforms/ 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”
| |
| # Search for "console"
| |
| # Set the preference “browser.console.showInPanel” to “true”
| |
| # Restart Fennec
| |
| # Open the tools panel (gear icon on the right toolbar)
| |
| # Tap the "bug" icon to display the Error Console
| |
| | |
| For a simple way to print debugging information, set the preference "browser.dom.window.dump.enabled" to "true", then start Fennec from a terminal window. Any string that you pass to the dump() function in your JavaScript code will be printed to the terminal.
| |
| | |
| ==Installing==
| |
| | |
| Extensions can be hosted on websites and installed using [https://developer.mozilla.org/en/Installing_Extensions_and_Themes_From_Web_Pages installTrigger]. 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 find and install extensions from AMO (addons.mozila.org). Extensions can be removed using the same dialog.
| |
| | |
| == Tutorials ==
| |
| | |
| See http://people.mozilla.com/~mfinkle/tutorials/ for some video tutorials on building Fennec add-ons.
| |