Chrome Package App：打开模态窗口还是使用bootstrap？

Question

我已经写了我的第一个Chrome应用程序，但我遇到了问题。我似乎无法打开一个模态窗口？是否存在此功能，还是应该使用bootstrap来显示模态窗口？

我不知道其他人在做什么？

我可以打开另一个窗口，但两个窗口同时处于活动状态并且可以更改，这不是我想要的。

我正在尝试创建一个设置菜单，因此会打开一个模态窗口并允许您更新，然后在关闭它时，它会将控制权交还给主窗口。

有什么想法吗？

Answer 1

与浏览器标签一样，Chrome App顶级窗口没有相对于彼此的模态概念。每个人都生活在自己的世界里。您有几个选择：

1. 尝试使用alwaysOnTop选项。有关示例，请参阅https://github.com/GoogleChrome/chrome-app-samples/tree/master/window-state。这可能足以满足您的需求。

2. 当您想要模态的窗口打开时，灰显或以其他方式禁用其他窗口的内容。这可能是一种糟糕的用户体验，特别是如果您的用户错放了您想要最顶层的窗口。

3. 不要创建顶级Chrome应用窗口，而是在主窗口中使用灯箱式div并将模态内容粘贴在那里。这是惯用的方式，因为大多数Chrome应用都是单页网站。

根据您的具体用例，您可以通过事件侦听器和AppWindow.focus（）实现模态的近似。但是你不会从系统中获得任何帮助，因为你无法阻止非模态窗口首先被聚焦，它可能不是你想到的干净体验。

Answer 2

对于扩展程序，惯用设置界面为Options，manifest.json中的声明为chrome://extensions中的扩展程序提供选项链接。

我强烈建议上述内容，但对于原生应用来说，这是不可取的：

Chrome仍然没有为原生应用设置提供惯用界面，所以就像你说的那样：＆＃34;我不知道其他人在做什么。＆＃34;

嗯......一切：

• Caret使用菜单栏在编辑器选项卡中打开完全可配置的JSON文件。
• Google Keep没有任何设置。
• 作家通过一个位于奇怪位置的小齿轮图标打开一个单独的标签。
• Chrome通过多功能框右侧的3栏图标打开一个单独的标签。
• Sketchpad通过3栏图标打开一种浮动div。
• Writebox通过3栏图标打开第二个UI栏。

如果没有界面指南，我会在Chrome浏览器之后对界面进行建模，并从3条图标中打开设置，希望进入单独的标签页，并且可以通过某种命令栏通过{ {1}}。 （最后一点可能不可能。）

无论您走的是什么路线，我都找不到复制/粘贴文件菜单，多功能广告或标签的Chrome API，如果您想要灯箱，showModalDialog()已被弃用，<dialog>还有很长的路要走，所以你要推出自己的解决方案。

最重要的是，我建议不要打开一个单独的窗口。 Chrome操作系统倾向于使用标签，如果没有标签，那么就有一个灯箱。

Answer 3

将这行添加到manifest.json

"browser_action": {
"default_popup":"popup.html"
},
"options_page":"settings.html"

其中popup.html - 模态窗口

settings.html - 设置窗口（在扩展程序菜单中显示）