webview - 如何在 Dart google chrome 应用程序中将消息发布到 webview (securityError)

Question

我正在使用 Dart 编程语言构建带有 webview 的 Google Chrome 应用程序。 该应用程序通过 postMessage 与 webview 内容进行通信。如果我从 DartEditor 运行应用程序(作为 Chrome 应用程序运行)postMessage 工作正常。但是在构建(dart2js)并使用“加载未打包的扩展...”加载到浏览器之后 - 应用程序无法获取 webview contentWindow 并在其上执行 postMessage。

来自 Chrome 开发控制台的错误: 未捕获的安全错误:阻止来源为“chrome-extension://bpddihniogcgmnlaghkacfagkecgnljo”的框架访问来源为“swappedout://”的框架。请求访问的帧具有“chrome-extension”协议(protocol)，被访问的帧具有“swappedout”协议(protocol)。协议(protocol)必须匹配。

Google Chrome 版本 36.0.1951.5 开发版 Dart 版本 SDK 1.4.2、版本 1.5.0-dev.4.2 - 给出相同的错误。

这是演示该问题的最小工作示例 - https://github.com/Dumbris/dart_chrome_app_webview_security_error

Answer 1

据了解，这是当前版本dart2js编译器的一个bug，参见bug report here

我构建了一个简单的解决方法 chromeapp_webview_wrapper.js 如果 contextWindow.postMessage 从 JS 包装器调用 - 它工作正常。 使用示例:

js.JsObject _webview = new js.JsObject.fromBrowserObject(querySelector('webview'));
js.JsObject _webview_wrapper = new js.JsObject(js.context['WebviewWrapper'], [_webview]);
_webview_wrapper.callMethod('postMessage', ['initial message', '*']);

尽管如此，我仍在等待 Dart 开发团队修复错误。因为，与 WebView 内容的通信是 Chrome 打包应用中的重要功能。