尝试使用我的弹出页面作为 Chrome 扩展的弹出页面作为后台页面和弹出窗口 iframe 中显示的页面之间的通信管道时，出现以下错误。我需要一个沙盒环境来运行 Vue.js，但需要能够从chrome.storage其他此类对象获取数据并与其他此类对象一起使用，以便我接收数据包并在必要时向后台页面发送命令。
未捕获的安全错误：沙盒访问冲突：阻止了“chrome-extension://kncjlbkddbibekfmmljfpibdgjfdegeb”处的一个框架访问“chrome-extension://kncjlbkddbibekfmmljfpibdgjfdegeb”处的一个框架。请求访问的框架是沙盒化的，缺少“允许同源”标志。
这是管道弹出页面的代码：
//please look at it as if block comments aren't commented out
//this is needed due to SO not having chrome.* available.
//although line comments are real comments.
let displayFrame = document.getElementById('displayFrame');
let displayPort = displayFrame.contentWindow;
/*
let backgroundPort = chrome.extension.connect({
name : "Extension Connection"
});
*/
// Forwarding from background to index.
/*
backgroundPort.onMessage.addListener((msg) => {
displayPort.postMessage(msg, "*");
});
*/
// Forwarding from index to background.
window.addEventListener("message", function(msg) {
/*
backgroundPort.postMessage({
data : msg.data
});
*/
});<!doctype html>
<html lang='en'>
<head>
<meta charset='UTF-8' />
<script src="../scripts/popup.js" defer>
</script>
<style>
* {
box-sizing: border-box;
opacity: 1.0;
margin: 0px;
padding: 0px;
resize: none;
}
</style>
</head>
<body style="width : 300px; height: 500px;">
<iframe id="displayFrame" sandbox="allow-same-origin allow-scripts" src="./index.html" style="width: 300px; height: 500px" frameborder="0"> </iframe>
</body>
</html>的内容background.js，并index.html/js没有在我看来重要的是，他们都正确地传递消息到上面的代码的各自一方，我已经证实了这一消息传递在控制台中工作。当index.js对 Vue.js 变量进行任何更改时，就会出现问题。我已经尝试从实际的 Vue 对象（vm在文档中）和从内部（将消息侦听器附加到安装挂钩处的窗口）。我相信每个允许 Vue 监视状态变化的变量的包装 setter 是导致问题的原因，我很好奇是否有人知道如何摆脱错误。
我对扩展没有任何问题；消息传递甚至 Vue 变量设置/函数调用都可以完美运行。只是每次打开弹出页面，后台页面控制台都会出现错误。这是我应该担心的事情吗，可以解决吗？
所以这个问题已经解决了。该错误仅在将 vue 变量的值设置为event.sourceindex.js end 时发生window.addEventListener("message", (event) => { ... })。我猜想 Vue 如何跟踪变量与作为发件人的窗口对象的变量不相符。但是我意识到发件人一直是 iframe 的父级，所以我通过以下方式解决了我的问题：
event.sourcefor命令发送的介绍包。window.parent.postMessage我使用之前的位置发送命令this.vueVariable.postMessage。我希望这可以帮助将来遇到此类问题的任何人，解决方案一直在我的眼皮底下。扩展中不再有任何错误，通信也可以通过设置工作进行双向工作。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句