Firefox Extension generator
Yeoman generator for Firefox Extensions lets you quickly set up an extension with the basic file structure and recommended settings.
This saves you time writing boilerplate code so you can start writing up the logic for your project straight away.
The Firefox Add-on SDK is required to run this Firefox Extension generator. How to install it is described here: Firefox Add-on SDK installation page.
If you want to use
grunt-watch it's required that you install the Extension Auto-Installer.
Install the generator:
npm install -g generator-firefox-extension
Make a new directory for the extension and
cd into it:
mkdir my-new-firefox-extension && cd $_
yo firefox-extension, optionally passing an extension name:
yo firefox-extension [extension-name]
Need more information about Firefox Extensions? Please visit Mozilla Developer Network Add-on.
Firefox extension generator scaffolds out a complete project directory structure for you:
. ├── Gruntfile.js ├── app │ ├── data │ │ ├── bower_components │ │ ├── contentscript.js │ │ ├── contentstyle.css │ │ ├── images │ │ │ ├── icon-16.png │ │ │ ├── icon-32.png │ │ │ └── icon-64.png │ │ └── popup.html │ ├── lib │ │ └── main.js │ └── package.json ├── bower.json ├── dist └── package.json
Test your extension
To test the generated extension, run
grunt run. A new browser with the test extension will start.
Build your extension
To build the generated extension, run
jpm xpi --addon-dir=app. This command will create an
xpi file which you can distribute or upload to Mozilla's official Add-ons repository (AMO). Alternatively, you can run
grunt build which will create the
xpi file in the
More info on submitting your extension to AMO can be found here: Submitting an add-on to AMO.
This grunt task runs a new instance of Firefox with the add-on installed. When Firefox launches, in the top-right corner of the browser you'll see an icon with the Firefox logo. If you set the popup option to
true and click the icon, you'll see a popup with a
hello world message.
This task will watch for any changes in the
app folder (where the extension's files are) and reload the extension automatically in Firefox.
Remember: You need to install Extension Auto-Installer and have Firefox running in order to use this functionality.
This task finds your Bower components and injects them directly into the HTML file you specify.
This task build the
xpi file and puts it in the
Skips the automatic execution of
npmafter scaffolding has finished.
MIT © Gil Casadevall