Your first extension - official Firefox extension tutorial not working

Question

I wanted to try learning how to make a browser extension and tried doing the first official tutorial https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Your_first_WebExtension

When following everything here and going into a mozilla.org domain the extension does not put a red border around the site. It basically does nothing. (I know that content scripts are disabled on addon.mozilla.org)

I've carefully followed each step of the tutorial.

Here's the repository for the tutorial : https://github.com/mdn/webextensions-examples/tree/master/borderify

I just want to verify if I'm the only one with who this tutorial does not work.

Answer 1

The tutorial is fine. You can try changing it to another site and test again. For example:

{

  "description": "Adds a solid red border to all webpages matching mozilla.org. See https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Examples#borderify",
  "manifest_version": 2,
  "name": "Borderify",
  "version": "1.0",
  "homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/borderify",
  "icons": {
    "48": "icons/border-48.png"
  },

  "content_scripts": [
    {
      "matches": ["*://*.example.com/*"],
      "js": ["borderify.js"]
    }
  ]

}

Then go to https://example.com/ to test.

Answer 2

I had the same problem: the Borderify example was not working. In my case, it was a problem of my default browser's privacy settings.

Try going to Firefox settings and see if the option Always use private mode is disabled.

Alternatively, after loading the extension in debugging mode, go to the Add-Ons section and enable the extension for private windows.