Firefox WebExtension，独立的 HTML 覆盖

Question

我正在寻找一种使用 WebExtensions 在某些网站上显示隔离叠加层的方法。
iframe 似乎是解决这个问题的方法，因为它为 css、js 和 DOM 提供了一个完全独立的范围。另一个巧妙的事情是目标网站将无法读取或更改内容。

在 Chrome 扩展中似乎没有任何问题，但在 Firefox 中使用 WebExtensions，即使它们共享相同的语法，我也会收到安全警告/错误并且它不起作用。

我尝试了两种不同的方法：

• 创建一个没有 src 属性的 iframe 并将其注入网站正文。 此方法失败，因为我在执行 iframe.contentWindow.document.open() 时收到 CSP 错误/警告。
  相关内容脚本代码：

  let html = `
      <!DOCTYPE html>
      <html>
        <head></head>
        <body>
          <h1>TEST</h1>
        </body>
      </html>
  `
  let iframe = document.createElement('iframe')
  document.body.appendChild(iframe)
  iframe.contentWindow.document.open()
  iframe.contentWindow.document.write(html)
  iframe.contentWindow.document.close()
  

• 我尝试的另一件事（这会更有意义，因为它会禁止网站访问内容）是将我的 iframe 代码放入我的 WebExtension 中的文件 (overlay.html) 并让 iframe 加载它通过将其 src 设置为 browser.extension.getURL('overlay.html')。
  相关内容脚本代码：

  let iframe = document.createElement('iframe')
  iframe.src = browser.extension.getURL('overlay.html')
  document.body.appendChild(iframe)
  

  在清单中，我为此将 overlay.html 定义为 web_accessible_resources：

  "web_accessible_resources": [ 
      "overlay.html"
  ],
  

  问题在于 iframe 根本不加载 overlay.html 文件。但它绝对可用，否则location.href = browser.extension.getURL('overlay.html') 将不起作用。如果这样做会非常方便，因为我可以将整个覆盖（html、css、js）作为单独的文件存储在我的扩展中。好像它是一个独立的网站。并且使用内容脚本我可以访问它来添加新数据或其他任何东西。

编辑：

目前我正在使用 iframe 的 srcdoc 属性来设置它应该包含的源代码（感谢 wOxxOm）。所以至少我现在有一些东西可以工作。但我真正不喜欢这种方法的是我无法与我的内容脚本中的 iframe 内容进行交互。有趣的是，我可以在 iframe 的 js 代码中与父页面交互，但同样不能与内容脚本交互。将所有的 html、css、js 代码放在一个字符串中，而不是像普通网站那样的多个文件，这也是非常混乱、不方便且难以维护的。

Answer 1

问题

首先，我们知道问题是安全问题，到底是什么问题？好吧，当尝试通过设置 iframe src 将扩展资源加载到 iframe 中时，浏览器会抱怨安全性并阻止 iframe 通过不同的协议连接，在本例中为“moz-extension://”。

解决方案

从扩展上下文中加载 html 等并作为字符串注入。

细枝末节

为了解决这个问题，我们可以将 iframe 的 src 属性设置为data:text/html;charset=utf8,${markup}。

这直接告诉 iframe 内容是 html，它使用 utf8 编码，后面是原始标记。我们完全绕过了 iframe 通过网络加载任何资源的需要。

Firefox 内容脚本的执行上下文与其加载的页面是分开的。这意味着您可以在不违反 CSP 的情况下发出 xhr 请求。

如果您对标记发出 xhr 请求，则可以将响应的内容作为字符串获取，并将其直接注入 iframe src 属性。

因此内容脚本：

    function loaded (evt) {
    if (this.readyState === 4 && this.status === 200) {
        var html = this.responseText;
        console.log(html);
        var iframe = document.createElement('iframe');

        iframe.src = 'data:text/html;charset=utf-8,' + html;
        document.body.appendChild(iframe);

        console.log('iframe.contentWindow =', iframe.contentWindow);
    } else {
        console.log('problem loading');
    }
}

var xhr = new XMLHttpRequest();
xhr.overrideMimeType("text/html");
xhr.open("GET", browser.extension.getURL('test.html'), false);
xhr.addEventListener("readystatechange", loaded);


xhr.send(null);

使用简单的 HTML 文件

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Test</title>
    <meta charset="utf8" />
</head>
<body>
   <h1>Hello World</h1>
</body>
</html>

所以现在你已经成功地将一个 html 模板注入到目标 iframe 中。

如果您需要任何图像、脚本、css 文件等，您需要根据上述方法编写引导加载程序，将新的脚本标签等直接注入 iframe 文档。

Answer 2

顺便说一句，有时人们在不同的协议中使用 IFRAME url，即
https://（而当前页面是http://）。

所以，IFRAME url 应该是相对的，比如src="//example.com"