Google Chrome Package Apps : How to make transparent rounded background like google hangout app?

问题

As shown in the below screenshot, hangout app is fully transparent and it has background-shadow applied to it as well.

I tried several approach with no luck by applying css styling to "html" and "body" tag to the page and by using "frame: none" option while creating new window, but it doesn't work.

How to make Google chrome package app like this?

Anyone have any idea?

Here is the code on which I am experimenting.

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:

Unfortunately you can't currently do this. We have white-listed the hangouts app to be able to use the APIs needed for this.

Opening up these APIs to third parties has the potential for security problems (specifically, phishing and click jacking attacks). Solving these security issues will require a large effort, so we wanted to see if the API was considered useful with a partner app (hangouts) before undertaking that effort.

We're now considering our options and may open the API up to third party apps in the future.

来源：https://stackoverflow.com/questions/27804315/google-chrome-package-apps-how-to-make-transparent-rounded-background-like-goo

标签

javascript

html

css

google-chrome

google-chrome-app