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 的不同副本，包括基本帧。这不会在任何iframe中注入 script.js ，这些iframe在调用tabs.executeScript()后会添加到选项卡中。对于iframe，注入脚本所在的上下文将是有效的（即脚本将存在），直到iframe的URL发生更改（例如src属性更改）或父框架（例如，基本框架）选项卡）更改URL（即在父框架中加载新页面）。

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

1 个答案:

暴力：在iframe中注入一个脚本