Google Chrome套餐应用:如何制作透明的圆形背景,例如google hangout app?

时间:2015-01-06 17:54:17

标签: javascript html css google-chrome google-chrome-app

如下面的屏幕截图所示,环聊应用是完全透明的,并且还应用了背景阴影。

hangout app

我尝试了几种方法,没有运气,将css样式应用于" html"和"身体"标记到页面并使用" frame:none"创建新窗口时的选项,但它不起作用。

如何制作像这样的Google Chrome套餐应用?

有人有任何想法吗?

以下是我正在尝试的代码。

mainfest.json:

{
  "manifest_version" : 2,
  "name" : "Demo App",
  "version" : "0.1",

  "description" : "Demo Purpose",
  "app" : {
    "background" : {
      "scripts" : ["background.js"]
    }
  },
  "permissions" : ["experimental"]
}

background.js

chrome.app.runtime.onLaunched.addListener(function() {
    chrome.app.window.create("index.html", {
        frame: "none",
        id: "DemoWindow",
        resizable : false,
        innerBounds : {
            left: 600,
            maxWidth: 150,
            maxHeight: 150
        }
    });
});

index.html:

<!DOCTYPE html>
<html>
<head>

    <style type="text/css">
        .title-area {
            -webkit-app-region: drag;
        }
        html, body {
            margin: 0;
            padding: 0;
            border: none;
            outline: none;
            overflow: hidden;
            background-color: transparent;

        }
    </style>
</head>
<body>
<div class="title-area">Hello World</div>

</body>
</html>

1 个答案:

答案 0 :(得分:12)

很遗憾,你现在无法做到这一点。我们在白名单中列出了环聊应用,以便能够使用此所需的API。

向第三方开放这些API可能会出现安全问题(特别是网络钓鱼和点击攻击)。解决这些安全问题需要付出很大的努力,因此我们希望在进行此项工作之前,确定API是否被认为对合作伙伴应用程序(环聊)有用。

我们现在正在考虑我们的选项,并且可能会在未来打开API到第三方应用。