Redirecting to extension resource in firefox

For development purposes I am trying to build an extension that redirects all requests matching a regex to a specific page. The problem is that the firefox API does not seem to do what is advertised at the documentation of chrome.webRequest.onBeforeSendHeaders.addListener. Here is a simplified version of the extension:

manifest.js

{
    "applications": {
      "gecko": {
        "id": "addon@example.com",
          "strict_min_version": "42.0",
          "strict_max_version": "50.*",
          "update_url": "https://example.com/updates.json"
      }
    },

    "name": "Developer",
    "version": "0.1.26",
    "manifest_version": 2,
    "description": "A script useful for development.",
    "icons": {"16": "logo16.png",
              "48": "logo48.png",
              "128": "logo128.png"},
    "background": {
    "scripts": ["background.js"]
    },
    "web_accessible_resources": ["hello.html"],
    "permissions": [
        "activeTab",
        "webRequest",
        "webRequestBlocking"
    ]
}

background.js

// I found somewhere that onBeforeSendHeader it should work but it doesn't.
chrome.webRequest.onBeforeRequest.addListener(
  function(details) {
    var redirect;
    if (details.url.match(/example\.com/)) {
      redirect = chrome.extension.getURL("hello.html");
      console.log("Redirecting:", details.url, "->", redirect);
      return {redirectUrl: redirect};
      }
    console.log("Requesting:",details.url);
  }, {urls: [
    "<all_urls>"
  ]}, ["blocking"]);

hello.html

<html>
    <head>It works</head>
    <body>And it's not apache!</body>
</html>

In short it redirects anything fetched from example.com to an extension resource hello.html.

So I go to about:config and set security.fileuri.strict_origin_policy to false. Then I go to about:debugging and load the extension. Then I open the browser console Tools -> Web Developer -> Browser Console. Finally I go to example.com. I should be getting the contents of hello.html but instead I get nothing (white screen) and in the browser console I get:

Redirecting: "http://example.com/" -> "moz-extension://ce33a9b5-2c20-ed41-b8aa-f52143783c38/hello.html"
Security Error: Content at http://example.com/ may not load or link to file:///path/to/extension/hello.html.

I need the extension for personal development purposes so I don't mind changing about:config.

EDIT: if i change the redirect url to something on the web and onBeforeReqeuest to onBeforeSendHeaders everything works:

chrome.webRequest.onBeforeSendHeaders.addListener(
  function(details) {
    var redirect;
    if (details.url.match(/example\.com/)) {
      redirect = "https://www.google.com"; // chrome.extension.getURL("hello.html");
      console.log("Redirecting:", details.url, "->", redirect);
      return {redirectUrl: redirect};
      }
    console.log("Requesting:",details.url);
  }, {urls: [
    "<all_urls>"
  ]}, ["blocking"]);

Edit2: Sorry that would be a WebExtension (although I think it is obvious from the fact that there is a manifest.json file instead of an install.rdf). Also the documentation onBeforeRequest at the addListener section states:

Returns: webRequest.BlockingResponse. If "blocking" is specified in the "extraInfoSpec" parameter, the event listener should return an object of this type.

And then in the BlockingResponse docs:

redirectUrl Optional string. Only used as a response to the onBeforeRequest and onHeadersReceived events. If set, the original request is prevented from being sent/completed and is instead redirected to the given URL. Redirections to non-HTTP schemes such as data: are allowed. Redirects initiated by a redirect action use the original request method for the redirect, with one exception: If the redirect is initiated at the onHeadersReceived stage, then the redirect will be issued using the GET method.