从 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 的内容时遇到问题，暴力破解方法是将 content script 直接注入 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() 调用时存在。 script.js 的不同副本将被注入选项卡内的每个框架中，包括基本框架。这不会在调用 tabs.executeScript() 后添加到选项卡的任何 iframe 中注入 script.js。对于 iframe，在 iframe 的 URL 更改（例如 src 属性更改）或父框架（例如选项卡的基本框架）之前，注入脚本所在的上下文将是有效的（即脚本将存在） ) 更改 URL（即在父框架中加载新页面）。