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

Question

I'm making a chrome extension (content script) that will add text after the "More" in the top black bar in gmail. Those elements are encapsulated in the canvas_frame iframe.

When I try to access those elements with:

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

I get Uncaught TypeError: Cannot read property 'document' of undefined . But if I type that code directly into the chrome developer console it works. Why is this? How can I access and modify that element from my chrome extension.

I'm new with javascript so I am likely missing something obvious. Thanks.

Answer 1

尝试

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

Answer 2

I have built Chrome Extensions myself and have encountered this issued, there are a couple of ways to mitigate it, one is to run a timer loop in JS looking for #canvas_frame and stop it when you find it, the other is to listen for DOM node insert events and again, if the element you are looking for has been inserted, start doing what you want to do.

While canvas_frame has been the "content area" element for Gmail to interact with if that's what you need to do, currently (as of a few days ago) I've encountered instances of Google Apps Gmail that DO NOT have a content_frame, or rather, have one for an instant when the page loads and then it gets removed, I'm not sure what shenanigans Google is pulling, but since they don't provide an official API for making Gmail Chrome Extensions (so very unfortunately), we are at their mercy as Extension developers...