Extensions Modify and extend Mozilla applications Add-ons add new functionality to Gecko-based applications such as Firefox, SeaMonkey, and Thunderbird. There are two main types of add-on: Extensions add new features to the application, while Themes modify the application's user interface. Add-ons can greatly affect the behavior of the application that hosts them. Extensions Extensions add new functionality to Mozilla applications such as Firefox and Thunderbird. There are three different techniques you can use to build extensions: Add-on SDK-based extensions, manually bootstrapped restartless extensions, and legacy extensions. Add-on SDK extensions Extensions built using a set of high-level JavaScript APIs, which don't require a browser restart to install. WebExtensions We're working on a system called WebExtensions, which is a new way to develop WebExtensions for Firefox, that will be largely compatible with the system used by Chrome and Opera. Debugging Recommended practices Performance Security
Performance best practices in extensions - MDN Docs One of Firefox's great advantages is its extreme extensibility. Extensions can do almost anything. There is a down side to this: poorly written extensions can have a severe impact on the browsing experience, including on the overall performance of Firefox itself. This article offers some best practices and suggestions that can not only improve the performance and speed of your extension, but also of Firefox itself. Improving startup performance Extensions are loaded and run whenever a new browser window opens. Load only what you need, when you need it Don't load things during startup that are only needed if the user clicks a button, or if a given preference is enabled when it's not. Use JavaScript code modules You can create your own JavaScript code modules incorporating sets of features that are only needed under specific circumstances. This has an advantage over XPCOM modules, which are always loaded when your extension starts up. Defer everything that you can General Performance Tips
How to build an XPCOM component in Javascript If you are looking for Add-on SDK solution for XPCOM JavaScript components then check out platform/xpcom module first. This is a "Hello World" tutorial for creating an XPCOM component in JavaScript. This tutorial does not describe how and why XPCOM works the way it does, or what every bit of the example code does. That's been detailed elsewhere. This tutorial will show you what you need to do to get a component working in as few and as simple steps as possible. Implementation This example component will expose a single method, which returns the string "Hello World!". Defining the Interface If you want to use your component in other XPCOM components, you must define the interfaces that you want exposed. There are many interfaces already defined in Mozilla applications, so you may not need to define a new one. If an interface exists that meets your needs, then you do not need to write an IDL, or compile a typelib, and may skip to the next section. HelloWorld.idl Compiling the Typelib
Application Versions JavaScript JavaScript (JS) is a lightweight interpreted (or just-in-time compiled) programming language with first-class functions. While it is most well-known as the scripting language for Web pages, many non-browser environments also use it, such as Node.js, Apache CouchDB and Adobe Acrobat. JavaScript is a prototype-based, multi-paradigm, single-threaded, dynamic language, supporting object-oriented, imperative, and declarative (e.g. functional programming) styles. JavaScript's dynamic capabilities include runtime object construction, variable parameter lists, function variables, dynamic script creation (via eval), object introspection (via for...in and Object utilities), and source-code recovery (JavaScript functions store their source text and can be retrieved through toString()). This section is dedicated to the JavaScript language itself, and not the parts that are specific to Web pages or other host environments. Looking to become a front-end web developer? Get started
Manifest Files - MDN Docs In this section, we'll see how to put chrome and XUL files into a package and create the manifest files for them. Packages A package is a set of XUL files and scripts that define the functionality of a user interface. Packages may be installed into Mozilla and referenced with chrome URLs. A package can contain any kinds of files and may be split into subdirectories for different parts of the package. Manifest files A manifest file describes a package and maps its location on disk to a chrome URL. Note: Starting in Gecko 2.0, only the file named chrome.manifest is read automatically; if you need to read multiple manifest files, use the manifest command in that file to import additional manifests. If you just want to try testing privileged XUL code in the Firefox browser, you can do this easily by just using a manifest with only one line in it: Create a new directory somewhere. content tests The file path in that line should point to the directory created above.
Building a Thunderbird extension 4: chrome manifest - Extensions The file called chrome.manifest tells Thunderbird what packages and overlays are provided by the extension. Open the file called chrome.manifest that you created and add this code: content myfirstext chrome/content/ content specifies the type of material in the package myfirstext is the name of the chrome package (specified in the first segment of <em:id> in the install.rdf file chrome/content/ is the location of the package's files within the chrome namespace So, this line says that for a chrome package myfirstext, we can find its content files in the directory chrome/content/ (which is a path relative to the location of chrome.manifest). To change the Thunderbird user interface to support the extension, you create an overlay and then merge it with the default Thunderbird interface. Add this line at the end of chrome.manifest: overlay
Adding items to menus From MozillaZine Knowledge Base Note: Information in this section applies to Mozilla Suite, Firefox and Thunderbird and other XUL-based applications. When I say Mozilla, I mean one of these three applications. This tutorial describes steps necessary to add a static or a dynamic menu item to Mozilla from an extension. It's created for beginner extension developers; if you're a user, you probably want to search for existing extensions that do what you need. Creating the overlay To add an item to an existing menu of a Mozilla-based application without editing its source files, you first need to create an overlay. The following lines in the overlay will add two items to contentAreaContextMenu popup menu (the menu that appears when you right-click a web page): These lines in the overlay add an item to Firefox "Tools" menu: You can specify position of the item being inserted with insertafter/insertbefore/position attributes [1] To find out id of specific menu, use DOM Inspector. Resources
Setting up an extension development environment This article gives suggestions on how to set up your Mozilla application for extension development. Unless otherwise specified, these suggestions apply to both Firefox and Thunderbird as well as SeaMonkey version 2.0 and above. Overview Create a development user profile to run your development firefox session; with special development preferences in about:config. Development profile To avoid performance degradation from development-related prefs and extensions, and to avoid losing your personal data, you can use a separate profile for development work. You can run two instances of Thunderbird or Firefox at the same time by using separate profiles and starting the application with parameters -no-remote and -P ProfileName. On Ubuntu (and many other Linux distributions): /usr/bin/firefox -no-remote -P dev On some other distributions of Linux/Unix: /usr/local/bin/firefox -no-remote -P dev On Mac OS Snow Leopard (10.6) and newer: On Windows: On Windows 64 bit: Development command flags use
Setting up an extension development environment - MDN Docs This article gives suggestions on how to set up your Mozilla application for extension development. Unless otherwise specified, these suggestions apply to both Firefox and Thunderbird as well as SeaMonkey version 2.0 and above. Overview Create a development user profile to run your development firefox session; with special development preferences in about:config. Install some Firefox development extensions to your dev profile. Development profile To avoid performance degradation from development-related prefs and extensions, and to avoid losing your personal data, you can use a separate profile for development work. You can run two instances of Thunderbird or Firefox at the same time by using separate profiles and starting the application with the -no-remote parameter. On Ubuntu (and many other Linux distributions): /usr/bin/firefox -no-remote -P dev On some other distributions of Linux/Unix: /usr/local/bin/firefox -no-remote -P dev On Mac OS Snow Leopard (10.6) and newer: On Windows: use
Optimize browser rendering - Make the Web Faster Once resources have been downloaded to the client, the browser still needs to load, interpret, and render HTML, CSS, and JavaScript code. By simply formatting your code and pages in ways that exploit the characteristics of current browsers, you can enhance performance on the client side. Use efficient CSS selectors Overview Avoiding inefficient key selectors that match large numbers of elements can speed up page rendering. Details As the browser parses HTML, it constructs an internal document tree representing all the elements to be displayed. According to this system, the fewer rules the engine has to evaluate the better. The following categories of rules are considered to be inefficient: Rules with descendant selectors For example: Rules with the universal selector as the key body * {...}.hide-scrollbars * {...} Rules with a tag selector as the key ul li a {...} Rules with child or adjacent selectors body > * {...}.hide-scrollbars > * {...} ul > li > a {...} Rules with overly qualified selectors
Add-on Builder The Add-on Builder was a web-based development environment that allowed developers to create add-ons using the SDK APIs, but without needing to use the cfx command line tool. It was retired on April 1, 2014, and the "builder.addons.mozilla.org" domain now redirects to this page. If you have only used the SDK through the Builder, you already know most of what you need to know to develop using just the SDK. The high-level and low-level APIs used for Builder add-ons are exactly the same for Builder and SDK. install the SDK locally get to know the cfx command line tool, with this introductory walkthrough and the detailed cfx reference get to know the package.json file used to configure attributes of your add-on