如何使无框 Chrome 应用程序窗口可移动？答案

【问题标题】：How make frameless Chrome App Window movable?如何使无框 Chrome 应用程序窗口可移动？
【发布时间】：2013-10-15 18:55:12
【问题描述】：

我创建了一个带有窗口的 Chrome 应用，但它不能移动。我想让顶部栏（HTML/CSS 样式）允许它移动。我查看了 Chrome 应用示例，但找不到使拖动窗口成为可能的代码。

【问题讨论】：

标签： google-chrome google-chrome-extension google-chrome-app

【解决方案1】：

我发现了答案，但它没有出现在文档中，也不是很明显。它是一个控制它的 CSS 属性。

-webkit-app-region: drag;

否则，您的无框窗口将无法移动。

重要提示：您希望可点击或可交互的可拖动节点的任何子节点都需要其 CSS 上的 -webkit-app-region: no-drag;。

例如：

.myCustomBar {
    position: absolute;
    width: 100%;
    height: 30px;
    -webkit-app-region: drag;
}

.myCustomBarCloseButton {
    position: relative;
    width: 100px;
    height: 30px;
    -webkit-app-region: no-drag;
}

【讨论】：

它记录在 create frame 参数中。 developer.chrome.com/apps/app_window.html#method-create
即使在几个月后，这只是简单的解释，感谢 Don，这对您有很大帮助
@VincentScheib 这似乎让很多人感到困惑，也许可以更新文档以显示一些显示此必需设置的示例 CSS 代码？

【解决方案2】：

    Just add below code in your background.js

    chrome.app.runtime.onLaunched.addListener(function() {
      chrome.app.window.create("frameless_window.html",
        {  frame: "none",
           id: "framelessWinID",
           innerBounds: {
             width: 360,
             height: 300,
             left: 600,
             minWidth: 220,
             minHeight: 220
          }
        }
      );
    })

And follow  https://github.com/GoogleChrome/chrome-app-samples/tree/master/samples/frameless-window
    Here you can find the best sample for creating frameless chrome app with the movable window.It's little bit confusing because, after installing it in chrome you can able to create its shortcut on the desktop as well.

【讨论】：