Menu
I'm new in Chrome Web App programming. I want a simple WebApp which is separated to my Chrome/Chromium (means no tab). It shall show a external website in the body.
So here is my configuration:
manifest.json
{
"name": "Hello World!",
"description": "My first Chrome App.",
"version": "0.1",
"manifest_version": 2,
"permissions": [ "webview" ],
"icons": {
"128": "icon_128.png"
},
"app": {
"background": {
"scripts": ["background.js"]
}
}
}
background.js
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create('window.html', {
bounds: {
'width': 400,
'height': 600
}
});
});
window.html:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<webview style="width: 100%; height: 100%;" src="http://www.google.de"></webview>
</body>
</html>
I excpected a window like this (it shows Chromium for demonstraiton):
But I got these:
So the height in webview isn't correct. When I set the height to (for example) 192px, it's show the correct size. But 100% isn't working...
356
I've asked François Beaufort (Chromium engineer atm) on Google+. Hey replayed:
The chromium team uses window.onresize to recalculate webview width and height in this sample: https://github.com/GoogleChrome/chrome-app-samples/blob/master/samples/webview-samples/browser/browser.js
After looking on these example I have the following Chrome App.
manifest.json:
{
"name": "Hello World!",
"description": "My first Chrome App.",
"version": "0.1",
"manifest_version": 2,
"permissions": [ "webview" ],
"icons": {
"128": "icon_128.png"
},
"app": {
"background": {
"scripts": ["background.js"]
}
}
}
background.js
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create('window.html', {
bounds: {
'width': 1050,
'height': 700
}
});
});
window.html
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
margin: 0px;
}
</style>
</head>
<body>
<webview src='http://www.google.de' id="xx"></webview>
<script src="main.js"></script>
</body>
</html>
main.js (here is the magic :D)
function updateWebviews() {
var webview = document.querySelector("webview");
webview.style.height = document.documentElement.clientHeight + "px";
webview.style.width = document.documentElement.clientWidth + "px";
};
onload = updateWebviews;
window.onresize = updateWebviews;
Now I have exactly what I want. A webview with fullscreen of a web page:
Edit:
I've also uploaded a git repo on GitHub for see the SourceCode: https://github.com/StefMa/ChromeAppWebsite
107
This works for me (within a style element in the HTML obviously):
webview {
display: flex;
height: 100vh;
}
This solution seems to work for me, it's not ideal, but works:
<webview src="https://github.com" style="width: 100%; height: 100%; display: inline-block; position: absolute; top: 0; bottom: 0; left: 0; right: 0;"></webview>
This could happen because you are using relative height and width with <!DOCTYPE html>. See this answer for an explanation.
Instead of using 100%, you could try specifying the width and height in pixels.
<webview style="display:block; width:400px; height:600px;" src="http://www.google.de"></webview>
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
