Your first extension
In Firefox: Open the about:debugging page, click "This Firefox" (in newer versions of Firefox), click "Load Temporary Add-on", then select any file in your extension's directory. The extension will now be installed, and will stay until you restart Firefox. Difference between firefox plugin,add-on and extension; firefox plugins. Share. Improve this question. Follow edited Jul 29 '11 at Sathyajith Bhat. k 21 21 gold badges 89 89 silver badges bronze badges. asked Jul 29 '11 at Sangam Sangam
We encourage you to visit Extension Workshop to learn more about browser extensions and how you can build fieefox extension for Firefox. 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 for resources amke help you migrate to the current API. We will create a Firefox extension to find all links in the current web page, highlight those which have a target 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 Hos extension development as well as a blueprint for any extension you would want to develop in the future. You need Firefox duh and basically whatever code editor you prefer. Then, there are some recommended things to do to prepare Firefox:. The steps to do this are:. Choose Create Profile in the dialog and follow the steps.
Open a terminal, use CD to navigate to your Firefox directory and then enter. Open Firefox through the Profile Manager process described above, or set the development profile as default during extension development.
Then enter about:config in the address bar. To do this, you must first find your profile directory:. The profile directory is where you will find all the settings for your Firefox profiles, including extension information. There how to remove a tampon without string will find your Firefox profiles, and they will be named with letters and numbers, followed by a dot.
In that location, you will find all your Firefox profiles, and they will be named with letters and numbers, followed by a dot. In your development profile folder, you will find a folder named extensions.
In it, you will have code for all your installed extensions. Instead of placing your how to make a firefox plugin there, you can create a pointer file.
Do that by creating a file with a unique name for you this will have to be the same as you chose for your em:id value in your install. In the case of our example, create a file named linktargetfinder robertnyman. What is needed to have a good base for your extension development, is to create the structure of the extension code.
Start by creating this hierarchy:. We begin with the intimidating code of install. This is nake you will have all the meta information about your extension, which versions of Firefox it supports and other assorted information.
Our install. Scary, right? The interesting parts for us are:. Read how to make a firefox plugin more options in Install Manifests. Firevox chrome of Firefox is everything around the content window.
The next file for our extension, which will probably feel a bit awkward to edit, is the chrome. This one, however, is in conjunction with install.
Our chrome. More information can be found in Chrome Manifest. Ok, once the mandatory parts are out of the way, now things start to get interesting. It is developed fitefox Mozilla to hiw interfaces in Firefox, Thunderbird etc. This is the file we will use to override some of the default look of the web browser, i. For a complete overview of what you can do, please read the XUL Reference. In our code here, we start with adding a menu option to the Tools menu in Firefox, and connect it to a keyboard shortcut:.
That is used for localizing text, and its translation can be found in the locale folder. More on that later. Another thing to notice, which can be tricky at first, is that some ids and classes for XUL elements actually have meaning for its display, stemming from core Firefox code.
Like this:. The complete options file for our extension looks like this:. Again, some regular XML information and styling of the content. It then what does hoka one one mean some XUL to layout the content of the preferences dialog.
The interesting part here, though, is connecting the user input to the actual settings for the extension those settings are to be found in the prefs. To start with, you create a preferences group in the options. Then you create an element and add a preference attribute to it, pointing to the before-chosen id attribute for the preference in the preferences group.
It will then automatically connect its value to that specific preference. All about system compatibility, my friends. All you need to access the content window is to precede your document call with the content keyword, like this:. When the window loads, it runs the init method of the linkTargetFinder object. If the preference autorun is set to true, it calls its run method immediately.
Otherwise, it will only be called when the toolbar button, menu item or statusbar icon is clicked. This happens through the oncommand attribute on the elements in the browser. The code in the run method is pretty straight-forward. It adds a CSS file from the extensions chrome tto to the current document, finds all links in it, yow through them and checks if they have a target attribute, counts those, highlights them and alerts you with the number of hits.
Within the defaults folder, you create a preferences folder and in that one a file named pref. This is used for the preferences you want to use for your extension, and looks like this:. Used for localization. In our case here, we just have one child folder for en-US content, but it can be easily extended.
That folder has a file named translations. Our file looks like this:. This is where it gets its translation. In our skin folder, we have three files: skin. The images are, naturally, used for the toolbar and statusbar respectively. The CSS in skin.
The code looks like this:. Note: do not ZIP the containing folder for your extension, just its contents chrome folder, chrome. Once you have your XPI file, you can just drag and drop it into Firefox, and it will automatically install. Rename it to. Ta daa! Open a terminal, get to your how to install drains in yard folder, and type in what does the gangnam style song lyrics mean in english -r LinkTargetFinder.
There are two options of distributing your extension. Either use addons. If you do it yourself, you can specify an updateURL in your install. The downside of rirefox, though, is that the review process can take quite some time for your extension to get an approval.
Before that it can still be downloaded as an experimental add-on, but people need to have an addons. It is also available as an XPI file, which you can install in your Firefox just to test the functionality drag and drop it into Firefox.
There were a lot of discussions about developing your extensions a couple of years ago, and somewhere plugn know-how and tutorials have gone missing the last couple of years or at least the good onesthis post is really, really good and will probably help a lot of people in the community start building extensions.
Keep up the good work Robert. Also, I plugkn guys like Ted M irc nick luser developed some pretty handy tools to get started. I think you can find that stuff here:.
It provides web development abstractions on top of XUL. This should definitely be on Plguin. Great tutorial, Robert. Thanks for reposting this, Rey! But you said nothing about how to run and debug add-on until it packed and installed. Thank you! This is hands down the best article ever when it comes to add-on development. Hai, Really nice topic.
Very good explanation in understanding of developing an add-on in firefox. This will be a very good startup for me.
Jun 05, · Update: Firefox has used the WebExtensions API as its extension API since We encourage you to visit Extension Workshop 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.. Please do not reference this article for extension development, as it is out-of-date. Jan 28, · Open the Windows Start menu and choose the Run option (on Vista, it might not be there – just press Windows key + R in that case). In the run dialog, write firefox -P and press enter /click OK. Choose Create Profile in the dialog and follow the steps. Profile manager on Mac. Jan 22, · Firefox Addons/Extensions allow you to add extra functionality to your web browser and webpages. In this video, we see that we need three simple files to mak.
If you are already familiar with the basic concepts of browser extensions, skip this section to see how extension files are put together. Then, use the reference documentation to start building your extension.
Visit Firefox Extension Workshop to learn more about the workflow for testing, publishing, and extensions for Firefox. This article walks through creating an extension for Firefox, from start to finish. The extension adds a red border to any pages loaded from "mozilla. Create a new directory and navigate to it.
Now create a new file called "manifest. Give it the following contents:. In this case, we're asking Firefox to load a script called "borderify. In some situations you need to specify an ID for your extension. The extension should have an icon. This will be shown next to the extension's listing in the Add-ons Manager. Our manifest. Create the "icons" directory directly under the "borderify" directory. Save an icon there named "border You could use the one from our example , which is taken from the Google Material Design iconset, and is used under the terms of the Creative Commons Attribution-ShareAlike license.
If you choose to supply your own icon, It should be 48x48 pixels. You could also supply a 96x96 pixel icon, for high-resolution displays, and if you do this it will be specified as the 96 property of the icons object in manifest.
Alternatively, you could supply an SVG file here, and it will be scaled correctly. Finally, create a file called "borderify. Give it this content:. The script has direct access to the document, just like scripts loaded by the page itself. In Firefox: Open the about:debugging page, click "This Firefox" in newer versions of Firefox , click "Load Temporary Add-on", then select any file in your extension's directory. Alternatively, you can run the extension from the command line using the web-ext tool.
Don't try it on addons. Content scripts are currently blocked on that domain. Try experimenting a bit. Edit the content script to change the color of the border, or do something else to the page content. Save the content script, then reload the extension's files by clicking the "Reload" button in about:debugging. You can see the changes right away:. For other people to use your extension, you need to package it and submit it to Mozilla for signing. To learn more about that, see "Publishing your extension".
Learn more about content scripts. Learn more about match patterns. Learn more about specifying icons. Give it this content: document. The extension will now be installed, and will stay until you restart Firefox. Now try visiting a page under "mozilla. Now you've had an introduction to the process of developing a WebExtension for Firefox: write a more complex extension read more about the anatomy of an extension explore the extension examples find out what you need to develop, test, and publish your extension take your learning further.
Browser extensions Getting started What are extensions? Your first extension Your second extension Anatomy of an extension Example extensions What next?