Chrome 应用程序：如何更新在 Chrome 应用程序的主要 window 中创建的辅助 window 元素的内容？

Question

我想创建一个简单的 chrome 应用程序，它启动 window、'window.html'，其中包含 2 个按钮。

1/ #btn1 creates a new window, loading "video.html". A video player,
playing "file1.webm".

2/ #btn2 updtates the source of the video from "file1.webm" to
"file2.webm".

第一部分很简单:)

第二部分比较棘手。

可以吗？

你会在下面找到我的文件。

谢谢:)

<!DOCTYPE html>
<html >
<head>

 <title>Chrome : Multiple Window</title>
 <link href="./css/main.css" rel="stylesheet">
 <script src="./js/jquery.min.js"></script>
 <script src="./js/test.js"></script>
</head>
<body>
 <button id="btn1" type="button" >Launch video Player</button>
 <button id="btn2" type="button" >Update Video</button>
</body>
</html>

$(document).ready(function() {
 $("#btn1").click(function(){
 chrome.app.window.create('video_window.html', {"width":1280, "height": 720});
});
$("#btn2").click(function(){
  $('#myvideo video source').attr('src', './video/avatar.webm');
 });
});

<!DOCTYPE html>
<html>
<head>
 <link href="./css/video.css" rel="stylesheet">
</head>
<body>
 <div class="wrapper">
  <video id="myvideo" autoplay loop>
   <source src="./video/the_master.webm" type="video/webm">
   </video>
  </div>
 </body>
</html>

Answer 1

chrome.app.window.create 接受回调，该回调将通过创建的 window 调用。您可以存储对此 window 的引用，然后直接在其上执行函数，或使用 window.postMessage 与其通信。

var videoWindow = null;

$("#btn1").click(function() {
  chrome.app.window.create('video_window.html', {
    "width": 1280,
    "height": 720
  }, function(window) {
    videoWindow = window.contentWindow;
  });
});

$("#btn2").click(function() {
  videoWindow.doSomething('./video/avatar.webm');
});

另一种选择，是使用chrome runtime API进行通信：

chrome.runtime.sendMessage("do-stuff")

chrome.runtime.onMessage.addListener(function(e) {
    // do stuff
})

Chrome 应用程序：如何更新在 Chrome 应用程序的主要 window 中创建的辅助 window 元素的内容？

Chrome App : How to update the content of an element of a secondary window created in the main window of a Chrome App?

javascript

html

google-chrome-app

sandbox