Question

当用户点击浏览器操作按钮时，我正在开发Chrome扩展程序，新的选项卡必须在那里打开，屏幕应该使用框架进行拆分。在框架内我有文本框和iframe。文本框将像url bar一样，当用户在文本框中输入url时，我将更新iframe的内容。

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

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

我试过但没有用的东西： i）在manifest.json中，我添加了权限作为“权限”：[ “标签”，的 “http：// / ”， “HTTPS：// / ” ] 但没有奏效。 ii）尝试在chrome浏览器中使用--allow-file-access-from-files但无法正常工作

Answer 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更新消息来避免混淆。您可能需要更多过滤以防止其在您不希望的其他页面上运行。

这是未经测试的，但我相信这种解决方案可行。

Answer 2

实际上，在@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(""));
}

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

Answer 3

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

访问Google Chrome扩展程序中框架内的元素

3 个答案: