How to link to a HTML page in data folder

[Aki Kanerva]

Hi,

I'm trying to use a page-mod content script to add a button that would take the user to an HTML page included in the extension package.

The code below successfully creates the button and assigns the HREF attribute, but clicking the button produces an error message:

    Security Error: Content at [page-url] may not load or link to resources://[jetpack-id]/extension-name/data/file.html

If I right-click on the button, select Copy Link Location, then paste it into the address bar, everything works. I also have no issues creating an IMG element with the SRC attribute set to a resource file in the data folder.

Here's my code:

lib/main.js:

var data = require("sdk/self").data;

var pageMod = require("sdk/page-mod");

pageMod.PageMod({

    "include": supportedUrlPatterns,

    "contentScriptFile": data.url("content.js"),

    "onAttach": function(worker) {

        worker.port.on('content-message', function(message) {

            handleContentMessage(message, worker);

        });

    }

});

function handleContentMessage(message, worker) {

    if (message.method == "getDataURL") {

        var dataURL = data.url(message.dataPath);

        worker.port.emit("dataURL", {"url": dataURL});

    }

}

data/content.js:

function getDataURL(dataPath, callback) {

    self.port.emit("content-message", {"method": "getDataURL", "dataPath": dataPath});

    self.port.once("dataURL", function (response) {

        callback(response.dataURL);

    });

}

var button = document.createElement("a");

document.body.appendChild(button);

button.innerHTML = "Click here";

getDataURL("file.html", function(dataURL) {

    button.href = dataURL;

});