如何使用 angularJS 将数据从主 window 传递到 chrome 应用程序中新创建的 window？

Question

我目前正在创建一个 chrome 应用程序只是为了娱乐和学习，然后我遇到了一个问题。从主要的 window，我创建了一个 window，它会显示你与你点击的名字的对话，但我不知道如何将数据传递给那个新的 window。可能吗？如果那样的话，怎么办？这是我的代码。

    chrome.app.window.create('views/templates/chatWindow.html', {
        'bounds': {
            'width': window.screen.availWidth,
            'height': window.screen.availWidth
        },
        state: 'maximized',
        resizable: false
    });

请注意，我正在使用 AngularJS 并且我正在 windows 机器上工作。

另外，我还有一个问题。那个新的 window 有自己的控制器，那么，我如何获取传递的数据？

Answer 1

选项 1

return 中 chrome.app.window.create gives you AppWindow 对象的回调函数。此对象有 contentWindow 属性，它是新创建的 window 中的一个 window 对象。有了这个引用，您可以在 document.body 对象上触发自定义事件并在您的控制器中处理它。

选项 2

使用angular的NgRoute和URL的散列来传递数据。例如，您可以执行以下操作：

chrome.app.window.create('views/templates/chatWindow.html#/client/1234' //...

然后使用路由器和相同应用程序的代码来处理视图和操作。

Answer 2

聚会有点晚了，但我希望这个答案能帮助其他人解决这个问题：

如果您使用 chrome.windows.create(https://developer.chrome.com/extensions/windows#method-create) 创建了 child window，您可以使用 Chrome 的消息传递 API 来传递给这个新创建的消息 child window:

在您的 parent（后台脚本）中，您可以这样做：

chrome.runtime.sendmessage({
  type: "a_message_type",
  foo: "bar"
});

在您的 child window 的 HTML 中，您会有一些代码如下所示：

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Child Window</title>
  <script src="jquery-3.5.1.min.js"></script>
  <script src="child.js"></script>
</head>
<body>
  <p> I'm the child window </p>
</body>
</html>

在 child.js 中，您可以收听来自 parent 的消息：

$(function () {
  chrome.runtime.onMessage.addListener(function (request) {
    if (request.type === "a_message_type") {
      console.log(request.foo); // request has the payload from the parent window
    }
  });
});

如何使用 angularJS 将数据从主 window 传递到 chrome 应用程序中新创建的 window？

How to pass data from main window to newly created window in chrome app with angularJS?

javascript

windows

google-chrome

angularjs

google-chrome-app