从chrome扩展访问iframe

Question

我正在开发一个chrome扩展，遇到了一个大问题。

$("#iframe1").contentWindow.document.execCommand("InsertHTML", false, 'test text');

TypeError: Cannot read property 'document' of undefined

奇怪的是，我可以访问iframe的html。因此，这段代码在chrome扩展中可以完美地工作：

$("#iframe1").contents().find('div').html('test')

我尝试将“all_frames”：true放入清单文件中，但没有成功：（

Answer 1

为了理解代码不能工作的原因，我包含了前面回答的一个片段：

内容脚本对页的全局窗口对象没有任何访问权限。对于内容脚本，适用以下内容：

• 窗口变量不引用页的全局对象。相反，它指的是一个新的上下文，页面上的一个“层”。页面的DOM是完全可访问的。^{#执行环境}

null

// jQuery:
$("#iframe1").contents()[0].execCommand( ... );

// VanillaJS
document.getElementById("iframe1").contentDocument.execCommand( ... );

// "Unlock" contentWindow property by injecting code in context of page
var s = document.createElement('script');
s.textContent = 'document.getElementById("iframe1").contentWindow.document.execCommand( ... );';
document.head.appendChild(s);

if (window != top) {
    parent.postMessage({fromExtension:true}, '*');
    addEventListener('message', function(event) {
        if (event.data && event.data.inserHTML) {
            document.execCommand('insertHTML', false, event.data.insertHTML);
        }
    });
} else {
    var test_html = 'test string';
    // Explanation of injection at https://stackoverflow.com/a/9517879/938089 :
    // Run code in the context of the page, so that the `contentWindow`
    //  property becomes accessible
    var script = document.createElement('script');
    script.textContent = '(' + function(s_html) {
        addEventListener('message', function(event) {
            if (event.data.fromExtension === true) {
                var iframe = document.getElementById('iframe1');
                if (iframe && (iframe.contentWindow === event.source)) {
                    // Window recognised, post message back
                    iframe.contentWindow.postMessage({insertHTML: s_html}, '*');
                }
            }
        });
    } + ')(' + JSON.stringify(test_html) + ');';
    (document.head||document.documentElement).appendChild(script);
    script.parentNode.removeChild(script);
}

此演示仅用于教育目的，不要在真正的扩展中使用此演示。为什么？因为它使用postmessage来传递消息。客户端也可以生成这些事件，这会导致安全漏洞（XSS：任意HTML注入）。

PostMessage的替代方案是Chrome的消息API。有关演示，请参见以下答案。但是您将无法比较窗口对象。您所能做的就是依赖window.name属性。window.name属性自动设置为iframe的name属性的值（加载iframe时只设置一次）。