从Chrome扩展程序访问/编辑iframe的内容

时间:2012-12-02 13:22:41

标签: google-chrome-extension

我想通过Chrome扩展程序编辑iframe的内容,但我无法编辑,因为iframe的contentWindow / contentDocument返回undefined。 一直在四处寻找答案,正如我所理解的那样,如果iframe从一开始就存在于页面上,就很容易解决,但事实并非如此。 有问题的iframe是gmail撰写的文本区域,它以iframe的形式出现,并且动态地添加到DOM中。 有没有办法通过chrome扩展来实现这一目标?

编辑: 对不起。 Rob W让我意识到contentDocument确实可以被访问。我在这里要做的是在Gmail中添加一些额外的功能,在工具栏中有一个按钮,在撰写窗口中添加一些html。我现在让按钮部分工作,它添加了html但它不会像它应该的那样在插入符号中执行它因为我无法访问contentWindow以便执行此操作:

range = iWindow.getSelection().getRangeAt(0);
node = range.createContextualFragment(html);
range.insertNode(node);

对此有任何解决方案吗?

1 个答案:

答案 0 :(得分:2)

contentWindow is not accessible in Chrome extensions
另一方面,contentDocument会在框架内正确返回文档,前提是iframe位于同一原点,即Gmail的情况。

以下是Gmail的示例。为简单起见,我假设文档中只有一个编辑器。

var poller = setInterval(function() {
    var editor = document.querySelector('iframe.editable');
    if (editor && editor.contentDocument && !editor.__rwHandled) {
        editor.__rwHandled = true; // Run once for an editor instance
        var textNode = document.createTextNode('It works!');
        editor.contentDocument.body.appendChild(textNode);
    }
}, 200);

每当您想要停止轮询时,只需使用clearInterval(poller);即可。确保您检测的方法价格低廉。例如:查询DOM节点是正常的,不打开新窗口。