CODEWITHSUNDEEP
javascriptdomfirefox-addonfirefox-addon-webextensionsfirefox-developer-tools
steo
steo

Reputation: 11

JavaScript for Firefox Add-on/Extension: "failed to execute script: Error: Permission denied to access property "document" on cross-origin object"

I am looking forward to receive some help on this little but tedious problem of mine that seems I am not currently able to solve since a few weeks so far.

I am trying to develop a very easy/simple Extension/Add-on for the Mozilla Firefox browser.

My little project is to develop a simple extension-button that when clicked will allow the user to run an easy automated script on the current open webpage/tab. Basically, the script will try to extract some specific data from the page and present it in a new popup window created at the moment.

I am currently stuck and cannot achieve the desire result while getting the following error:

failed to execute script: Error: Permission denied to access property "document" on cross-origin object

P.S.: I am not using or working with any webpage that contains <iframe> tags.

The original script itself is a little bit elaborated but nothing complex. Trying to isolate the problem and the error I have tried to simplify the whole project in order to reproduce locally.

To summarize and recap:

How the folder/file structure of my project is currently designed:

/generic-folder/
    test-page.html
    /browser-extension/
        /icons/
            icon-48.png
            icon-96.png
        /scripts/
            script.js
        app.js
        manifest.json

Description and content of the project:

<!DOCTYPE html>
<html>
    <head></head>
    <body style="color: white; background-color: black;">
        <h1>TEST NEW PAGE</h1>
        <p id="paragraph">
            This is the content of the paragraph that needs to be extracted!
        </p>
    </body>
</html>

var body = "<!DOCTYPE html>\n";
var font = "font-size: 1.25rem; font-family: Courier New, Monospace; font-style: normal; font-weight: normal;";
var id = "paragraph";

body += "<html><body style=\""+font+"\"><h1>TEST NEW PAGE</h1>\n";
body += "<p>\n";
body += document.getElementById(id).innerText;
body += "\n</p>\n";
body += "\n</body>\n</html>\n";

var newWin = window.open('','extractor','width=1024,height=750,resizable=yes,scrollbars=yes');
newWin.document.write(body);
newWin.focus();

console.log("Message: '/scripts/script.js' has been executed!");

Note: if you open in debugging-mode (SHIFT+CTRL+C) the webpage test-page.html and manually run the above script.js it should work as wanted and you should see the desire behavior of the project.

browser.browserAction.onClicked.addListener(async (tab) => {
  try {
    let results = await browser.tabs.executeScript({
      file: "/scripts/script.js"
    });
  } catch (err) {
    console.error(`failed to execute script: ${err}`);
  }
});

{
    "manifest_version": 2,
    "name": "Page Extractor",
    "description": "Script for extracting specific data from a webpage.",
    "version": "1.0",

    "icons": {
         "48": "icons/icon-48.png",
         "96": "icons/icon-96.png"
    },

    "permissions": ["webRequest", "scripting", "activeTab", "tabs", "clipboardWrite"],

    "content_scripts": [{
      "matches": ["*://*/test-page.html*"],
      "js": ["/app.js"]
    }],

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

    "browser_action": {
        "default_icon": {
             "48": "icons/icon-48.png",
             "96": "icons/icon-96.png"
        },
    "default_title": "Execute Page Extractor!"
    }
}

When testing the extension: (following the MDN instructions)
Firefox -> about:debugging -> load temporary extension -> etc...

I can see the the web-extension correctly loaded with the correct icon, but, after I open the test-page.html (or the desired webpage), and click on the extension button then nothing happens!

However, I can see in the test-page.html debugging/console that the script has been ran (due to some manual debugging message I've tried to place)... but no popup/new window is presented/created to the user.

Instead analyzing the "Inspection" debugging window of the extension I can see the following error message:

failed to execute script: Error: Permission denied to access property "document" on cross-origin object

I cannot find the correct work-around/solution and I hope that someone can help me out.

Thank you in advance!

Upvotes: 0

Views: 565

Answers (1)

steo
steo

Reputation: 11

Apparently I have found my answer the same day I have created this post and, also as the user wOxxOm suggested, this is a known Firefox bug [ https://bugzilla.mozilla.org/show_bug.cgi?id=1508687 ].

At the moment I was able to isolate the problem (without avoiding a small "console error message") and make it work following the information found at this official page: https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Sharing_objects_with_page_scripts

(page, which reports:)

In Firefox, part of the isolation between content scripts and page scripts is implemented using a feature called "Xray vision". When a script in a more-privileged scope accesses an object that's defined in a less-privileged scope it sees only the "native version" of the object. Any expando properties are invisible, and if any properties of the object have been redefined, it sees the original implementation, not the redefined version.

Hence... Solution is:

to change this:

newWin.document.write(body);

into this:

newWin.wrappedJSObject.write(body);
XPCNativeWrapper(newWin);

Upvotes: 1

Related Questions