iframe如何在chrome扩展中访问父窗口

Posted 2023-02-27

【中文标题】iframe如何在chrome扩展中访问父窗口

【英文标题】：How can Iframe access parent window in chrome extension

【发布时间】：2012-07-24 22:39:31

【问题描述】：

我的 chrome 扩展文件夹中有一个页面 iframe.html。我希望它显示在我当前的网页中。这就是问题所在，当我单击 iframe 中的按钮时，如何关闭 iframe？我试过这样的代码：

window.parent.iframe.hide()

但它不会出现错误：

Unsafe javascript attempt to access frame with URL

但是我清楚地阅读了evernote的源文件。它有一些代码，如

window.parent.$readable.hide()

为什么evernote 的扩展程序可以工作，但我的扩展程序显示一些错误？这是我应该在 manifest.json 中做的事情吗？这是我的清单文件。

  "name": "Reader",
  "version": "1.0",
  "manifest_version": 2,
  "description": "A great start!",
  "browser_action": 
    "default_icon": "icon.png"
  ,
  "background": "scripts": ["background.js"],
  "permissions": [
    "tabs", "<all_urls>"
  ],
  "web_accessible_resources": [
    "iframe/index.html"
  ]

【问题讨论】：

可能重复：***.com/questions/10464136/…

@Larry：不是重复的：这个问题涉及一个 iframe，它被添加为 扩展程序自身功能的一部分，而该问题涉及“自然发生的“ iframe 是网页的正常部分。这个问题涉及注入 iframe 的脚本权限，该问题询问为什么在页面加载时间后页面添加的 iframe 中没有注入内容脚本。

我发现evernote明显没有为iframe提供src属性。他们只是使用模板并将javascript: <the template> 设置为src。我还没有尝试过这种方法。但我认为这应该可行。

我不用上面的技巧就解决了这个问题。我只是通过chrome扩展api向后台页面发送消息，然后让后台页面将消息发送到内容脚本。它看起来很复杂，但它现在解决了问题。

@aisensiy 你找到比上面更好的解决方案了吗？

【参考方案1】：

我没有仔细研究过 Evernote，但有一种可能性：也许 Evernote 正在为其添加的 <iframe> 指定额外的权限属性。看看MDN对sandbox attribute的描述：

属性的值可以是解除特定限制的以空格分隔的标记列表。有效的令牌是：

allow-same-origin：允许将内容视为来自与包含文档相同的来源。如果未使用此关键字，则嵌入的内容将被视为来自唯一来源。

...

allow-scripts：允许嵌入式浏览上下文运行脚本（但不创建弹出窗口）。如果不使用该关键字，则不允许该操作。

因此，当您的内容脚本将 iframe 添加到页面时，让它添加一个 sandbox 属性，以放宽源和/或脚本限制。

<iframe src="chrome-extension://abcdefghijk/iframe/index.html" sandbox="allow-same-origin">

尝试添加不同的sandbox 权限，看看是否能解决问题。我相当有信心allow-same-origin 和/或allow-scripts 会解决这个问题。

【讨论】：

我不知道为什么，但是当我添加到 iframe 时，这些值中的任何一个都会阻止我通过 chrome.extension.sendRequest 方法与 backgroud.html 通信。

对不起——我的回答是错误的。事实证明，sandbox 阻止对同源页面的访问，而allow-same-origin 只授予对无论如何都应该具有它的页面的同源访问权限。它似乎没有向尚未同域的页面授予同源权限。我会继续寻找答案。