尝试从Chrome扩展程序而不是从开发人员控制台访问gmail中的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开发人员控制台中键入该代码，它将可以正常工作。 为什么是这样？ 如何访问和从我的浏览器扩展程序修改该元素。

我是新的JavaScript，所以我可能失去了一些东西明显。 谢谢。

Answer 1

尝试

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

Answer 2

我自己构建了Chrome扩展程序，并遇到了此问题，有两种方法可以缓解它，一种是在JS中运行计时器循环以查找#canvas_frame并在找到它时将其停止，另一种方法是侦听DOM节点插入事件，如果已插入您要查找的元素，请再次执行该操作。

尽管canvas_frame一直是Gmail可以与之交互的“内容区域”元素，但目前（截至几天前），我遇到的Google Apps Gmail实例没有content_frame，或者，请在页面加载后立即将其删除，然后再将其删除。我不确定Google在拉扯什么恶作剧，但是由于它们没有提供用于制作Gmail Chrome浏览器扩展程序的官方API（因此非常遗憾），作为扩展开发人员摆布...