Search code examples
javascriptbrowsergoogle-chrome-extensiontabsfirefox-addon

Firefox extension: Open window and write dynamic content

I have developed a Chrome Extension and it's mostly compatible to firefox web-extensions API. Just one problem:

In Chrome Extension i have popup.js and background.js. User click's a button, popup.js does chrome.sendMessage to background.js where data is received and afterwards (popup.html may be closed meanwhile) i just call in background.js:

newWin = window.open("about:blank", "Document Query", "width=800,height=500");
newWin.document.open();
newWin.document.write('<html><body><pre>' + documentJson + '</pre></body></html>');
// newWin.document.close();

so that works fine in Chrome extension but not in firefox. I read here (https://javascript.info/popup-windows) that for safety reasons firefox will only open with a "button click event". And if i move above code to popup.js, inside button-click-evenListener, it will open this way (but i dont have the data prepared yet, thats really not what i want)

So i tried everything i found but i dont get the chrome.tabs.executeScript running. Here is my code with comments:

popup.js

    // working in firefox and chrome (popup.js)
    const newWin = window.open("about:blank", "hello", "width=200,height=200");
    newWin.document.write("Hello, world!");

    // not working firefox: id's match, he enters function (newWindow) but document.write doing nothing (but no error in log)
    // not working chrome: doesnt even enter "function (newWindow)""
    chrome.windows.create({
      type: 'popup',
      url: "output.html"
    }, function (newWindow) {
      console.log(newWindow);
      console.log(newWindow.id);
      chrome.tabs.executeScript(newWindow.tabs[0].id, {
        code: 'document.write("hello world");'
      });
    });

background.js

(created local output.html and gave several permissions in Manifest.json - tabs, activeTab, output.html, , about:blank)

            // opening but executeScript not working in firefox: Unchecked lastError value: Error: The operation is insecure.
            // opening but executeScript not working in chrome: Unchecked runtime.lastError: Cannot access contents of url "chrome-extension://plhphckppghaijagdmghdnjpilpdidkh/output.html". Extension manifest must request permission to access this host
            chrome.tabs.create({
              // type: 'popup',
              url: "output.html"
            }, function (newWindow) {
              console.log(newWindow);
              console.log(newWindow.id);
              chrome.tabs.executeScript(newWindow.id, {
                code: 'document.write("hello world");'
              });
            });

How can I get the data into the new window/popup from background.js - i can open an empty page from there, so it's only about getting executeScript() running

Solution

  • Thanks to @wOxxOm for pointing me to a data URI to transport the json document into the browser from background.js.

    While searching for a javascript method to build a data URI i found this thread, with the suggestion to create a Blob : https://stackoverflow.com/a/57243399/13292573

    So my solution is this:

    background.js

    var documentJson = JSON.stringify(documents, null, 2)
let a = URL.createObjectURL(new Blob([documentJson]))
chrome.windows.create({
  type: 'popup',
  url: a
});