从Chrome扩展程序访问iframe中的DOM元素

Question

有没有办法在iframe中访问DOM元素而不会出现跨域错误？
基本上，我希望能够点击扩展程序中位于iframe内的按钮来启动视频。

我真的不知道该如何进行，我尝试了iframe.contentDocument但收到了跨域错误。

background.js：

chrome.tabs.executeScript({
    "file": "script.js",
    "allFrames" : true
});

script.js ：

var iframe = document.getElementById("iframeId");
var button = iframe.contentDocument.getElementsById("buttonId");

我得到的错误：
Uncaught DOMException: Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Blocked a frame with origin "https://website.com" from accessing a cross-origin frame.

谢谢

Answer 1

蛮力：将脚本插入iframe

如果您在访问iframe的内容时遇到问题，则蛮力方法是将内容脚本直接注入iframe并从该内容脚本访问iframe。

注入一个框架：
您可以通过在调用chrome.tabs.executeScript()提供帧ID来显式指定将脚本注入的帧。 可能是这样的：

chrome.tabs.executeScript(tabOfInterestId,{
    frameId: frameIdToInject,
    file: scriptFileWhichDoesWhatIWantInTheIframe.js
},function(results){
    //Handle any results
});

如果您不知道要注入的帧的帧ID，则可以从chrome.webNavigation.getAllFrames()获取它，例如：

chrome.webNavigation.getAllFrames({tabId:tabOfInterestId},function(frames){
    //Do what you want with the array of frame descriptor Objects
});

注入所有帧：
如果要注入选项卡中的所有框架，则可以执行已在“问题”中显示的操作：

chrome.tabs.executeScript({
    "file": "script.js",
    "allFrames" : true
});

这会将script.js文件注入到当前窗口的活动选项卡中所有在执行tabs.executeScript()调用时存在的tabs.executeScript() 。 将在选项卡的每个框架（包括基础框架）中注入不同的script.js副本。 在调用tabs.executeScript()之后，这不会在添加到选项卡的任何iframe中注入script.js 。 对于iframe，注入的脚本所在的上下文将一直有效（即脚本将存在），直到iframe的URL更改（例如src属性更改）或父框架（例如选项卡的基础框架）更改为止URL（即在父框架中加载了新页面）。