Firefox 扩展：打开 window 并写入动态内容

Question

我开发了一个 Chrome 扩展，它与 firefox 网络扩展基本兼容 API。只有一个问题：

在 Chrome 扩展中我有 popup.js 和 background.js。用户点击一个按钮，popup.js 执行 chrome.sendMessage 到 background.js 接收数据，之后（popup.html 可能同时关闭）我只是调用 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();

所以在 Chrome 扩展中工作正常但在 firefox 中不工作。我在这里 (https://javascript.info/popup-windows) 读到，出于安全原因，firefox 将仅以 "button click event" 打开。如果我将上面的代码移动到 popup.js，在 button-click-evenListener 中，它将以这种方式打开（但我还没有准备好数据，那真的不是我想要的）

所以我尝试了我找到的所有东西，但我没有得到 chrome.tabs.executeScript 运行。这是我的代码和注释：

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

（创建本地 output.html 并在 Manifest.json 中授予多个权限 - 选项卡、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");'
              });
            });

如何从 background.js 将数据导入新的 window/popup - 我可以从那里打开一个空白页面，所以这只是获取 executeScript() 运行

Answer 1

感谢@wOxxOm 为我提供了一个数据 URI，以便将 json 文档从 background.js 传输到浏览器。

在搜索 javascript 方法来构建数据 URI 时，我找到了这个线程，建议创建 Blob ：

所以我的解决方案是这样的：

background.js

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

Firefox 扩展：打开 window 并写入动态内容

Firefox extension: Open window and write dynamic content

javascript

browser

tabs

firefox-addon

google-chrome-extension

popup.js

background.js

background.js