Looking at the screenshot below, it is evident that the Hangout app has a fully transparent design with background shadow effect applied to it.
I have tried various methods in vain, such as applying CSS styling to the "html" and "body" tags of the page, and using the "frame: none" option when creating a new window. However, none of these solutions seem to work.
Is there a way to make a Google Chrome packaged app similar to this one?
Does anyone have any insights or ideas on how to achieve this look?
Below is the code I am currently experimenting with:
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>