Chrome应用程序与PostMessage主页之间的通信

Communication between Chrome-app and a homepage with PostMessage

本文关键字：之间 通信 主页 PostMessage 应用程序 Chrome      更新时间：2023-09-26

我需要能够通过网络视图将postMessage从Chrome应用程序发送到主页并返回。

我已经建立了从Chrome应用程序到主页的PostMessage，该PostMessage也被主页捕获，并发送了一个新的PostMessage回复，但Chrome应用程序没有捕获此PostMessage回复。

我可以在Chrome-App API上看到这是可能的。：

访客将能够通过在收到的消息事件上向event.source发布消息来向嵌入程序发送回复。

所以问题是，即使我使用event.source.postMessage（''，event.origin）发送回复，我也无法让Chrome应用程序从主页获取回复。是window.addEventListener（'message'，messageHandler，false）；在background.js的结尾，错了吗？

我在下面包含了我的代码。：

background.js（Chrome应用程序的初始化位置）：

  var myAppWin = null;
  var webview = null;
chrome.app.runtime.onLaunched.addListener(function() {
  // Center window on screen.
  var screenWidth = screen.availWidth/2;
  var screenHeight = screen.availHeight;
  var chromeWindow = chrome.app.window.create('webview-embed.html', {
    id: "helloWorldID",
    bounds: {
      width: screenWidth,
      height: screenHeight,
    }
  }, function(win) {
        myAppWin = win;
        myAppWin.contentWindow.addEventListener('DOMContentLoaded', function() {
          webview = myAppWin.contentWindow.document.getElementById('webview');
          try{
            webview.addEventListener("contentload", function () {
              console.log("webview content is now loaded");
              try{
                console.log("Trying to post message");
                webview.contentWindow.postMessage("Message from Chrome APP!", "*");
              }catch(error){
                console.log("postMessage error: " + error);
              }
            });
          }
          catch(err) {
            console.log("Webview error: " + err);
          }
        });
  });
  //Event listnener for the PostMessage reply    
  var messageHandler = function(event) {
    console.log("got message from page back: " + event.data);
  };
  window.addEventListener('message', messageHandler, false);

});

webview embed.html（带有webview标记的html文件）。：

<!DOCTYPE html>
<head>
<title>webview</title>
</head>
<body style='margin:0;padding:0;' >
    <webview src="http://localhost" style="width:100%;height:100%;" id="webview" ></webview>
</body>
</html>

index.html（网络主页，需要捕获第一条PostMessage并将回复发送回Chrome应用程序）：

<!DOCTYPE html>
<html lang="en" >
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>title</title>
    </head>
    <body >
    <div id="wrapper" >
        //body
    </div>
    //Used to catch messages from the Chrome App and reply back 
    var messageHandler = function(event) {
      console.log('Message received fom APP!');
      try{
        console.log(event);
        event.source.postMessage("Message from page", event.origin);
        console.log("Sent massage back to APP");
      }catch(error){
        console.log("Error on postMessage back to APP" + error);
      }
    };
    window.addEventListener('message', messageHandler, false);
    </script>
    </body>
</html>

感谢您的输入。找到了解决方案！

我制作了一个webview.js并将其加载到webview-embed.html 中

var messageHandler = function(event) {
  console.log("Got message from webpage back: " + event.data);
};
webview = document.getElementById('webview');
webview.addEventListener("contentload", function () {
  try{
    console.log("Trying to post message");
    webview.contentWindow.postMessage("Message from Chrome APP!", "*");
  }catch(error){
    console.log("postMessage error: " + error);
  }
});
window.addEventListener('message', messageHandler, false);

清理了我的后台.js

chrome.app.runtime.onLaunched.addListener(function() {
  // Center window on screen.
  var screenWidth = screen.availWidth;
  var screenHeight = screen.availHeight;
  var chromeWindow = chrome.app.window.create('webview-embed.html', {
    id: "helloWorldID",
    bounds: {
      width: screenWidth,
      height: screenHeight,
    }
  });
});

和网页上的index.html

<!DOCTYPE html>
<html lang="en" >
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>title</title>
    </head>
    <body >
    <div id="wrapper" >
        //body
    </div>
    <script>
    var messageHandler = function(event) {
      console.log('Message received fom APP!');
      try {
        event.source.postMessage("Message from webpage", "*");
        console.log('message send back to get catched by webview');
      } catch(error) {
        console.log("Error on postMessage back to APP" + error);
      }
    };
    window.addEventListener('message', messageHandler, false);
    </script>
    </body>
</html>
相关文章：