Question

我无法克服这个问题。有人可以提供一些建议吗？

我有这个使用ExtJS库的应用程序，我需要在Chrome扩展程序中运行。我已经成功创建了我的消息传递桥（postMessage），并在其中沙箱化了整个应用程序，一切正常。 ExtJS已加载，应用程序正在运行。
然后我有了这条逻辑，我需要在ExtJS视口中预览一段HTML片段。我在iframe本身和Panel上创建了afterrender我尝试在其中编写代码段。这是我使用的代码：
```
html: '<iframe src="about:blank" style="width:100%;height:100%;border:none;"></iframe>';

......

//p is the panel found in afterrender
p.body.down('iframe').dom.contentDocument.write(content);
```
然后是错误：

不安全的JavaScript尝试使用以下网址访问以下网址的框架：来自框架的空白，网址为chrome chrome-extension：//fcnpmlgapilgclcelfanblpbglmkghbc/core/themes/default/app.html。域，协议和端口必须匹配。
~~我在沙箱中使用postMessage尝试了这个动态iframe但没有任何反应。在清单中设置sandbox属性也不起作用。~~这是唯一可行的方法。请参阅下面的答案。

问题：

如何设置清单以支持此类用例？
或者有没有更好的方法可以在不使用iframe的情况下预览HTML代码段？使用iframe预览afayk是最好的，因为它沙盒化了片段而不会与父css混淆。

注意

这段代码在manifest v1中运行正常但我计划将其迁移到manifest v2。我没有意识到内容安全策略（CSP）已经变得严格。

描述问题的屏幕;）

screen

Answer 1

抱歉，这很尴尬。显然postMessage是唯一的方法，我之前无法让它工作，因为我的iframe尚未加载。此外，访问iframe中的dom文档在CSP下是一个很大的 no ，但是可以访问contentWindow来执行postMessage。

这就是我为解决这个问题所做的。希望有人能从中受益：

在您的扩展程序根

preview.html

在manifest.json下，将其添加为sandbox属性的一部分

在preview.html内，添加以下代码。请注意，我的代码段是完整的HTML，因此我改为使用document.write。

<!DOCTYPE html>
<html>
    <head>
        <script>
        window.addEventListener("message", function(e) {
            if (e.data.content) {
                document.write(e.data.content);
            }
        });
        </script>
    </head>
    <body></body>
</html>

照常在代码中创建iframe，将其指向preview.html，并将其附加到父div或Ext.Panel。

在绘制/创建/追加元素后，使用以下代码postMessage。

var content = '<!DOCTYPE html><html><body>Hello World!</body></html>';
var iframe = p.body.down('iframe').dom; //or the iframe node

iframe.onload = function() {
    iframe.contentWindow.postMessage({content: content}, '*');
};

享受;）

修改

正如Mike in Chromium forum指出的那样，srcdoc也可以解决这个问题。只需设置iframe的srcdoc，问题就解决了。

只是不确定srcdoc
的状态

Chrome扩展程序：将内容写入沙盒环境中创建的动态iframe

1 个答案: