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


Tags: javascript,html,css,google-chrome,google-chrome-app

Problem :

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

hangout app

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>


Solution :

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.


    CSS Howto..

    How to reffer in CSS to an input which has class attached to?

    Hide all div element but show first two

    CSS: how to vertically and horizontally align an image?

    how to give margin between li using css?

    CSS: How to use Transform property on a bootstrap grid class

    How to create a backdrop for a dialog?

    CSS: How to style text in a box with a limited height

    How to keep div visible when hovering another div

    How to take control of style sheets in ASP.NET Themes with the StylePlaceHolder and Style control

    How to override styles between parent - child elements using css selector?

    How to make jQuery css affect upcoming elements

    How to have anchors to the side of the page? [closed]

    How to apply CSS to first child div element only?

    How to convert 2 css files into one swf file in flex 4.11 SDK

    How to change my online store template in dbdirector ecommerce platform

    CSS Newbie - How to dynamically move buttons

    How to reveal a Text Field on a form when the Select shows 'Other' using just CSS

    How can I conform to a 4 nest rule?

    How to place my dropdown CSS menu bar on top of my jQuery picture rotator?

    CSS how to change text color of disabled option inside a select?

    How to structure elements in jQuery Mobile

    How to create CSS-based (big) quotation marks?

    CSS: How to make the padding-right between li even?

    How can I set a height, or allow a div to extend to the height of absolutely position elements within?

    How php execute in file with extension .ctp in cakephp?

    How to make a fully responsive web page [closed]

    How to center hgroup in css

    How to customize and change ready-made CSS libraries such as Twitter Bootstrap, and what other alternatives exist? [closed]

    How to change an image on mouseover of wrapper div

    How to apply css on one html file only