2

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

cloudwheels
  • 23
  • 6
  • The modern approach is to pass the data to a dedicated page, [example](https://stackoverflow.com/a/54715122). – wOxxOm Apr 12 '20 at 11:31
  • BTW, executeScript won't help you as it's only for content scripts and those are for web pages, not for extension pages. – wOxxOm Apr 12 '20 at 11:52
  • thank you for the answer! I looked at the "modern approach" and I would need solution 4. (background page). Still hoping for some simple solution since i got a 3-liner doing the job right now. Also thanks for executeScript explanation, the API documentation is not that precise stating that it's only for content scripts - but now I see the "hints" they give and that explains why i couldnt get it working –  Apr 13 '20 at 09:53
  • You can probably use a data URI with full html inside instead of about:blank. – wOxxOm Apr 13 '20 at 10:30
  • Awesome @wOxxOm !! Thats exactly the simple solution I was hoping for - I never thought about that :) I'm gonna post an answer to my question. I like to send you a little bounty if you like, please check dashdevs.org and join discord, im there (no way to PM here) –  Apr 14 '20 at 10:01

1 Answers1

1

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
});
Community
  • 1
  • 1