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 hide a column in the Webgrid in aspasp.net MVC?

    Hide the element, but show for that place blank

    How to convert SVG CSS animation to pure JS code

    How to design HTML header

    How to create this type of element using XHTML & CSS?

    With three divs, how to make one float to the right?

    How to create an animated rainbow line using CSS or Javascript?

    How to center something I appended with js and also replace it

    How to do something like border-top-left-color. [CSS]

    how to create an anchor point

    CSS page headers - how to use print margins?

    How to convert a xml element into url using css?

    CSS: how to make background on left and right of the content

    How can I style a JavaFX SplitMenuButton in CSS

    How to combine this css?

    How can I avoid div from executing new line if one line is already full?

    How to change color in first td in my table using class

    How can I do the following thing without inline styling?

    CSS float: how to form the second row based on tallest DIV?

    How to detect and deliver separate CSS files for mobile devices?

    How can I use CSS to position an image on the rightmost side?

    How to disable IE11 WebBrowser control scaling

    How does Google Web Fonts decide which version of a font to provide to my browser?

    CSS--how to detect screen aspect ratio and apply styling accordingly? [duplicate]

    CSS - How to remove 2nd vertical scroll bar without changing anything else?

    I have a standard table with text inside. How do I vertical align this?

    CSS - How to make a 100% height div not overlap it's contents when window is resized

    How to stop animation using jQuery

    How should I approach the solution to develope a static, Responsive HTML file that seems to have functionality beyond CSS/HTML capabilities?

    How to stack smaller text in CSS?