尝试从我的Chrome扩展程序访问gmail中的iframe但未从开发人员控制台访问iframe时出现未定义错误

Question

我正在制作一个Chrome扩展程序（内容脚本），它会在gmail顶部黑色栏中的“更多”之后添加文字。这些元素封装在canvas_frame iframe中。

当我尝试使用：

访问这些元素时

document.getElementById('canvas_frame').contentWindow.document.getElementById('gbz').innerHTML = scr;

我得到Uncaught TypeError: Cannot read property 'document' of undefined。但是，如果我直接在chrome开发者控制台中输入该代码，它就可以工作。为什么是这样？如何从我的chrome扩展程序中访问和修改该元素。

我是javascript的新手，所以我可能会遗漏一些明显的东西。感谢。

Answer 1

尝试

document.getElementById('canvas_frame').contentDocument.document.getElementById('gbz').innerHTML = src;

Answer 2

我自己构建了Chrome扩展程序并且遇到了这个问题，有几种方法可以缓解它，一种是在JS中运行一个定时器循环来寻找#canvas_frame并在找到它时停止它，另一种是监听DOM节点插入事件，如果已经插入了要查找的元素，请继续执行您想要执行的操作。

虽然canvas_frame一直是Gmail与之交互的“内容区域”元素，如果您需要这样做，目前（截至几天前）我遇到过没有content_frame的Google Apps Gmail实例或者更确切地说，当页面加载后立即有一个，然后它被移除，我不确定谷歌正在推动什么恶作剧，但因为他们没有提供用于制作Gmail Chrome扩展程序的官方API（非常不幸） ，我们是扩展开发人员的怜悯......