在谷歌浏览器扩展中访问框架内的元素答案

【问题标题】：Access elements inside frame in google chrome extension在谷歌浏览器扩展中访问框架内的元素
【发布时间】：2011-11-25 07:16:12
【问题描述】：

当用户单击浏览器操作按钮时，我正在开发一个 chrome 扩展程序，应该在那里打开一个新选项卡，应该使用框架分割屏幕。在框架内，我有文本框和 iframe。文本框就像 url bar，当用户在文本框中输入 url 时，我会更新 iframe 的内容。

这是我的实际问题，当用户点击 iframe 内的任何链接时，我必须更新 url 栏，但我无法为 iframe 内的链接添加事件侦听器，问题是我无法访问 iframe 中的元素，我收到错误消息，因为“不安全的 javascript 尝试从框架访问 URL ......”。

这个页面是chrome扩展标签，如果是其他页面，我可以注入内容脚本在框架内添加事件监听器，所以我不能在这里使用内容脚本。

我试过但没用的东西： i）在 manifest.json 中，我将权限添加为“权限”：[ “标签”， "http:///", “https:///” ] 但没有用。 ii) 在 chrome 浏览器中尝试了 --allow-file-access-from-files 但没有用

【问题讨论】：

标签： iframe permissions google-chrome-extension

【解决方案1】：

您不需要将脚本注入到扩展中内的html文件中。通过这些，您将能够从页面脚本访问 chrome.* API。

话虽如此，如果 iframe 和带有文本框的框架位于不同的域中，则您无法从另一个域访问其中一个，因为跨站点脚本安全性会阻止它。

我需要查看更多您已经拥有的 HTML 文件，但您也许可以做这样的事情...

在扩展选项卡中（包含文本框）：

chrome.extension.onRequest.addListener(function (response) {
   if (response.type === "urlUpdate") {
      document.getElementById("addressBar").value = response.url;
   }
});

在后台页面中：

chrome.extension.onRequest.addListener(function(request, sender) {
   if (request.type === "urlUpdate") {
      chrome.tabs.sendRequest(sender.tab.id, {type: "urlUpdate", url: request.url});
   }
});

最后，要在http://* 和https://* 上运行一个内容脚本。确保您的清单中有此内容（将其添加到现有的内容脚本列表中）：

"content_scripts": [
   {
      "matches": ["http://*/*", "https://*/*"],
      "js": ["address.js"],
      "all_frames": true
   }
 ];

将all_frames 设置为true 以使脚本在iframe 中运行，这一点很重要。

然后，你会在address.js 中拥有这个：

if (window.top !== window) {
   chrome.extension.sendRequest({type: "urlUpdate", url: location.href});
}

基本上，window.top 检查应该通过仅从 iframe 内部发送 url 更新消息来避免混淆。您可能需要更多过滤以防止它在您不希望它运行的其他页面上运行。

这是未经测试的，但我相当有信心这种解决方案会奏效。

【讨论】：

【解决方案2】：

您可以使用content script 作为点击事件侦听器，当用户点击新链接时，使用window.postMessage 将新网址传递出 iframe。

【讨论】：

【解决方案3】：

实际上，根据@abraham 给出的答案，我认为您可以做到这一点。

在扩展选项卡中（带有地址栏）：

window.addEventListener("message", function(msg) {
   document.getElementById("addressBar").value = msg.data;
}, false);

在address.js:

if (window.top !== window) {
   window.top.postMessage(location.href, chrome.extension.getURL(""));
}

您不需要后台页面中的任何内容。

【讨论】：