Menu
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>
373
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.
124
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
