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设置为browser.extension.getURL('overlay.html')，使iframe加载相关内容 - 脚本代码：
```
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等，并以字符串形式注入。

The Nitty Gritty

要解决此问题，我们可以将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网址，即 https://（当前页面为http://）。

因此，IFRAME网址应该是相对的，例如src="//example.com"

Firefox WebExtension，隔离的HTML叠加层

2 个答案: