{"id":271,"date":"2009-01-28T15:46:49","date_gmt":"2009-01-28T22:46:49","guid":{"rendered":"http:\/\/blog.mozilla.org\/addons\/?p=271"},"modified":"2020-02-14T14:13:37","modified_gmt":"2020-02-14T22:13:37","slug":"how-to-develop-a-firefox-extension","status":"publish","type":"post","link":"https:\/\/blog.mozilla.org\/addons\/2009\/01\/28\/how-to-develop-a-firefox-extension\/","title":{"rendered":"How to develop a Firefox extension"},"content":{"rendered":"

Update: <\/span><\/strong>Firefox has used the WebExtensions API as its extension API since 2017. We encourage you to visit Extension Workshop<\/a> to learn more about browser extensions and how you can build an extension for Firefox. You can find reference documentation for the WebExtensions API on MDN<\/a>. <\/strong><\/p>\n

Please do not reference this article for extension development, as it is out-of-date. If you are the developer of a legacy add-on, please refer to this page<\/a> for resources to help you migrate to the current API.<\/strong><\/p>\n

\n

Our objective<\/h2>\n

We will create a Firefox extension to find all links in the current web page, highlight those which have a target<\/code> attribute and alert you how many links it found. The good part is that once you have done this, you have both an understanding of Firefox extension development as well as a blueprint for any extension you would want to develop in the future.<\/p>\n

\n

What you need – setting up the developing environment<\/h2>\n

First, let\u2019s start with setting up your development environment. You need Firefox (duh) and basically whatever code editor you prefer. Then, there are some recommended things to do to prepare Firefox:<\/p>\n

Create a different development profile<\/h3>\n

The first step is to create a different profile in Firefox, since you will do some settings and changes that you probably don\u2019t want for your regular profile. In my case, I\u2019ve created a new development profile named \u201cdev\u201d. The steps to do this are:<\/p>\n

Profile manager on Windows<\/h4>\n

Open the Windows Start menu and choose the Run option (on Vista, it might not be there – just press Windows key<\/kbd> + R<\/kbd> in that case). In the run dialog, write firefox -P<\/code> and press enter<\/kbd>\/click OK. Choose Create Profile in the dialog and follow the steps.<\/p>\n

Profile manager on Mac<\/h4>\n

Open the Terminal (located under \/Applications\/Utilities) and type in \/Applications\/Firefox.app\/Contents\/MacOS\/firefox -profilemanager<\/code>. Choose Create Profile in the dialog and follow the steps.<\/p>\n

Profile manager on Linux<\/h4>\n

Open a terminal, use CD<\/acronym><\/span><\/code> to navigate to your Firefox directory and then enter .\/firefox -profilemanager<\/code>. Choose Create Profile in the dialog and follow the steps.<\/p>\n

Configuration settings for Firefox<\/h3>\n

Open Firefox through the Profile Manager (process described above, or set the development profile as default during extension development). Then enter about:config<\/code> in the address bar. It will warn you about changing settings, but it\u2019s ok since what you will do is only minor changes for development. You can filter the existing settings, and if any of the below settings don\u2019t exist, you can just create them.<\/p>\n

Recommended settings<\/h4>\n

These are good to enable extension errors in the Firefox Error Console (Tools > Error Console), disable XUL caching and such.<\/p>\n