Changes

* download, install, and launch See [https://nightlydeveloper.mozilla.org/ Firefox Nightly] (Developer Edition also includes WebExtension support, but Nightly will always be more up-to-date).* flip the preference that controls whether Firefox allows you to install unsigned add-ons: ** type <code>about:config</code> into the URL bar in Firefox** in the Search box type <code>xpinstall.signatures.required</code>** double-click the preference, or righten-click and selected "Toggle", to set it to <code>false</code>. ===Example WebExtension===To help get you started, we've created a very simple example WebExtension at https://github.com/mdn/webextensions-examples. Clone this repo and navigate to the "borderify" directory.  git clone https://github.com/mdn/webextensions-examples cd webextensions-examples/borderify/ This directory contains two files: <code>manifest.json</code> and <code>borderify.js</code>. Every WebExtension must contain a <code>manifest.json</code> file. This one looks like:  { "manifest_version": 2, "name": "Borderify", "version": "1.0", "applications": { "gecko": { "id": "borderify@mozilla.org" } }, "content_scripts": [ { "matches": ["*:US//*.mozilla.org/*"], "js": ["borderify.js"] } ] } * The first three keys are mandatory basic metadata.* A description key should also be added. It is displayed in about:addons and for Firefox OS in Settings->Add-ons.* The next key, <code>"applications"</code>, contains Firefox-specific information.* The next key, <code>"content_scripts"<WebExtensions/code>, specifies a [https://developer.chrome.com/extensions/match_patterns match-patternYour_first_WebExtension Your first WebExtension] and a [https://developer.chrome.com/extensions/content_scripts content script] to run in matching pages. In this case the pattern matches any pages under <code>mozilla.org</code>, or any of its subdomains. The content script is <code>"borderify.js"</code>. The other file is <code>borderify.js</code> itself, which just draws a red border around the document body:  document.body.style.border = "5px solid red"; ===Packaging=== Firefox add-ons are packaged as XPI files, which are just ZIP files with an "xpi" extension. One trick is that the ZIP file must be a ZIP of the files in the add-on, not of the containing directory. So to create an XPI from the borderify files, at the command prompt type, from inside the <code>borderify</code> directory, type:  # in webextensions-examples/borderify/ zip -r ../borderify.xpi * ===Installing=== To install the XPI, you can just open it in Firefox: * from the File Menu, select Open, or press Ctrl/Cmd+O* select <code>borderify.xpi</code> from the file selection dialog You should get a warning that you are installing an unsigned extension. Accept the warning. Now navigate to a page that matches, such as https://developer.mozilla.org/. You should see a red border appear round the page. ===Experimenting=== Try experimenting: * change the match-pattern to match different pages.* change "borderify" to do something else to the page.* use [[#List_of_supported_APIs|a different API]] to make the add-on do something else. Each time you change the add-on, you'll need to repeat the [[#Packaging]] and [[#Installing]] sections above. However, we're working on a feature that will enable Firefox to load an updated extension directly from its directory. See [https://bugzilla.mozilla.org/show_bug.cgi?id=1185460 bug 1185460]. At this time, it is not possible to publish WebExtensions to addons.mozilla.orgMDN.