WebExtensions: Difference between revisions

Jump to navigation Jump to search

WebExtensions (view source)

Revision as of 22:24, 25 February 2016

3,535 bytes removed ,  25 February 2016
Move walkthrough to MDN.
(Move walkthrough to MDN.)
Line 52: Line 52:


== Testing out the WebExtensions API ==
== Testing out the WebExtensions API ==
First, you need to set up Firefox:


* download, install, and launch [https://nightly.mozilla.org/ Firefox Nightly] (Developer Edition also includes WebExtension support, but Nightly will always be more up-to-date).
See [https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Your_first_WebExtension Your first WebExtension] on MDN.
* 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 right-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": ["*://*.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"</code>, specifies a [https://developer.chrome.com/extensions/match_patterns match-pattern] 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.org.


= Technical Details =
= Technical Details =
Wbamberg
canmove, Confirmed users
737

edits

Retrieved from "https://wiki.mozilla.org/Special:MobileDiff/1118779"

Navigation menu