Search code examples
javascriptfirefoxfirefox-addonfirefox-addon-webextensions

Firefox WebExtensions WebRequest Example not working

Im trying to following with the webRequest example given here. This simple extension should log all requests to the console, but it is not doing that. In my actual code I've included a line that changes the page's border color to red and that does work, so I know the extension code is running.

To load the extension I'm going to about:debugging and loading it via the Load Temporary Add-on button

Here is my actual code

manifest.json

{
    "description": "something something dark side",
    "manifest_version": 2,
    "name": "Interceptz",
    "version": "1.0",
    "icons": {
        "48": "icons/border-48.png"
    },

    "applications": {
        "gecko": {
            "id": "[email protected]",
            "strict_min_version": "45.0"
        }
    },

    "permissions": [
        "webRequest",
    "*://*.mozilla.com/"
    ],

    "content_scripts": [
        {
            "matches": ["*://*.mozilla.org/*"],
            "js": ["intercept.js"]
        }
    ]
}

As you see, I've changed the manifest from the example given on the mozilla page because copying and pasting that json without any changes causes firefox to not even load the extension

intercept.js

document.body.style.border = "5px solid red";

function logURL(requestDetails) {
  console.log("Loading: " + requestDetails.url);
}

chrome.webRequest.onBeforeRequest.addListener(
  logURL,
  {urls: ["<all_urls>"]}
);

enter image description here

Solution

  • You can`t put webRequest API in the content script. You need to separate your intercept.js, to rename manifest.js to manifest.json and fix permissions.

    manifest.json:

    {
"description": "something something dark side",
"manifest_version": 2,
"name": "Interceptz",
"version": "1.0",
"icons": {
    "48": "icons/border-48.png"
},

"applications": {
    "gecko": {
        "id": "[email protected]",
        "strict_min_version": "45.0"
    }
},

"permissions": [
    "webRequest"
],

"background": {
  "scripts": ["background.js"]
 },

"content_scripts": [
    {
        "matches": ["*://*.mozilla.org/*"],
        "js": ["intercept.js"]
    }
]
}

    intercept.js: 

    document.body.style.border = "5px solid red";

    background.js:

    function logURL(requestDetails) {
  console.log("Loading: " + requestDetails.url);
}

chrome.webRequest.onBeforeRequest.addListener(
  logURL,
  {urls: ["<all_urls>"]}
);

    And, of course, to add /icons/border-48.png