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...
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
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>
Add this to styles.css
webview{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Related
Im trying to make only one div visible while others are just blacked out, so far Ive tried it with addClass and removeClass but it didnt work, changing css with jquery seemed to work, but only for once, I can click the buttons on and off for once, they will do the job and then just become useless, any solutions?
HTML
<div class="tamsus"></div>
<button class = "on">On</button>
<button class = "off">Off</button>
jquery
$(".on").click(function(){
$(".tamsus").css({ "background-color": "black", "position": "absolute", "color": "#fff", "height": "100vh", "width": "100%", "z-index": "88", "opacity": "0.8"});
});
$(".off").click(function(){
$(".tamsus").css({"display": "none"})
});
});
You have two issues:
You are not removing display: none after it is added.
The overlay is on top of your buttons due to very high z-index, so once it is shown you can't click the buttons since they are behind it.
const $tamsus = $(".tamsus")
$(".on").click(function() {
$tamsus.removeClass('hidden');
});
$(".off").click(function() {
$tamsus.addClass('hidden');
});
button {
position: relative;
z-index: 99;
}
.tamsus {
position: absolute;
z-index: 88;
height: 100vh;
width: 100%;
opacity: 0.8;
background-color: black;
color: #fff;
}
.hidden {
display: none
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tamsus hidden"></div>
<button class="on">On</button>
<button class="off">Off</button>
I'm learning ag-grid to display data into a grid. I've just started with a simple example to display simple data to cell using cellRenderer. You can exam on the code here:
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<script>
var __basePath = '';
</script>
<style>
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
span.cell1 {
position: relative;
float: left;
top: 50%;
left: 10%;
transform: translate(50%, -50%);
}
</style>
<script src="https://unpkg.com/ag-grid-community#20.2.0/dist/ag-grid-community.min.js">
</script>
</head>
<body>
<div id="myGrid" style="height: 100%;" class="ag-theme-balham"></div>
<script src="main.js">
</script>
</body>
</html>
main.js:
var columnDefs = [
{
field: 'gold',
cellRenderer: params => {
return '<span class="cell1">' + params.data.gold + '</span>';
},
editable: true,
},
];
var gridOptions = {
rowHeight: 60,
columnDefs: columnDefs,
};
document.addEventListener('DOMContentLoaded', function() {
var gridDiv = document.querySelector('#myGrid');
new agGrid.Grid(gridDiv, gridOptions);
agGrid
.simpleHttpRequest({
url:
'https://raw.githubusercontent.com/ag-grid/ag-grid/master/packages/ag-grid-docs/src/olympicWinnersSmall.json',
})
.then(function(data) {
gridOptions.api.setRowData(data);
});
});
Please note the css I used:
span.cell1 {
position: relative;
float: left;
top: 50%;
left: 10%;
transform: translate(50%, -50%);
}
I want to display the data in the middle of the cell (css: top: 50%;) so I tried with above css. But after edited, the cell didn't show as expected. Please help!
Render at start:
Render at editting:
Render after editted:
You need to update your CSS. Give height and line-height properties for span.cell1 the same number which you provide to your rowHeight.
span.cell1 {
height: 60px;
line-height: 60px;
text-align: center;
}
Have a look at the updated plunk: https://next.plnkr.co/edit/4HHSANMjCpRkTdmm
I'm wondering how to resize an iFrame dynamically (to the app size) in a ChromeOS app. At this point, it just shows up with a white background (replacing the site mentioned in the iFrame) with a black border around it (which should be there, as mentioned in the CSS).
Here's my window.html:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<script src="jquery-3.3.1.min.js"></script>
<title> GRLC Browser </title>
<style>
#ifrm {
width: 100%;
height: 100%;
}
iframe {
width: 100%;
height: 100%;
border: 2px solid black;
}
.iframe {
width: 100%;
height: 100%;
}
diiv {
width: 100%;
height: 100%;
border: 2px solid black;
}
/* DIV and IFRM sizing needs a Band-aid */
</style>
<script>
// Auto Size Adjustment Needs a Banda-id
var html = document.documentElement;
var height = $(window).height();
document.getElementById("diiv").setAttribute("style","height: " + height + "px;");
document.getElementById("ifrm").setAttribute("style","height: " + height + "px;");
</script>
</head>
<body>
<div id="diiv">
<iframe src="https://garli.co.in">
<p>Your browser does not support iframes.</p>
</iframe>
</div>
</body>
And here's my manifest.json:
{
"name": "GRLC Browser",
"description": "Search the Baked Blocks of Garlic on ChromeOS",
"version": "0.1",
"manifest_version": 2,
"app": {
"background": {
"scripts": ["background.js"]
}
},
"incognito": "not_allowed",
"content_security_policy": "default-src 'self' 'unsafe-eval' 'unsafe-inline'; script-src 'self' 'unsafe-eval' 'unsafe-inline'; style-src 'self' 'unsafe-eval' 'unsafe-inline';",
"minimum_chrome_version": "47",
"icons": {
"128": "icon-128.png"
}
}
Thanks for the help in advance!
Found this on the W3 website.
Basically: take the JavaScript, encrypt it in SHA-256/base64, and add it to the manifest.
This can help with encryption on Linux (requires OpenSSL):
echo -n "alert('Hello, world.');" | openssl dgst -sha256 -binary | openssl enc -base64
Here's an example of the Content Security Policy value:
default-src 'self';
script-src 'self' https://example.com 'sha256-base64 encoded hash';
Hope that helps and that you don't need me to compile,
Matt
Im trying to cancel every url requests that google chrome does with my extension, but I cant achieve it. Here's the code:
// Headers.js
var tabId = parseInt(window.location.search.substring(1));
function cancel(requestDetails) {
console.log("Canceling: " + requestDetails.url);
return {cancel: true};
}
chrome.webRequest.onBeforeRequest.addListener(
cancel,
{urls: ["<all_urls>"]},
["blocking"]
);
window.addEventListener("load", function() {
chrome.debugger.sendCommand({tabId:tabId}, "Network.enable");
chrome.debugger.onEvent.addListener(onEvent);
});
window.addEventListener("unload", function() {
chrome.debugger.detach({tabId:tabId});
});
var requests = {};
function onEvent(debuggeeId, message, params) {
if (tabId != debuggeeId.tabId)
return;
if (message == "Network.requestWillBeSent") {
var requestDiv = requests[params.requestId];
if (!requestDiv) {
var requestDiv = document.createElement("div");
requests[params.requestId] = requestDiv;
requestDiv.textContent = params.request.url;
}
if (params.redirectResponse)
appendResponse(params.requestId, params.redirectResponse);
document.getElementById("container").appendChild(requestDiv);
} else if (message == "Network.responseReceived") {
appendResponse(params.requestId, params.response);
}
}
Here's the manifest.json:
{
"name": "Live HTTP headers",
"description": "Displays the live log with the http requests headers",
"version": "0.7",
"permissions": [
"debugger",
"webRequest",
"webRequestBlocking"
],
"background": {
"scripts": ["background.js"]
},
"browser_action": {
"default_icon": "icon.png",
"default_title": "Live HTTP headers"
},
"manifest_version": 2
}
Here's the background.js:
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.debugger.attach({tabId:tab.id}, version,
onAttach.bind(null, tab.id));
});
var version = "1.0";
function onAttach(tabId) {
if (chrome.runtime.lastError) {
alert(chrome.runtime.lastError.message);
return;
}
chrome.windows.create({url: "headers.html?" + tabId, type: "popup", width: 800, height: 600});
}
And here is the headers.html:
<html>
<head>
<style>
body {
font-family: monospace;
word-wrap: break-word;
}
#container {
white-space: pre;
}
.request {
border-top: 1px solid black;
margin-bottom: 10px;
/*background-color:red;*/
}
</style>
<script src="headers.js">
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>
I already look in stackoverflow about this topic, but I couldnt solve this problem. Can someone give me a hand? Thanks
I was make Street view containers. I was see that link.
But i cannot see Street view in my browser /Google chrome/
Please teach me my mistake and my error.
Thank you
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>アスタンソーチのGoogle-APIです。</title>
<link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
function initialize() {
var fenway = new google.maps.LatLng(32.785473,129.862451);
var panoramaOptions = {
position: fenway,
pov: {
heading: 165,
pitch: 0
},
zoom: 1
};
var myPano = new google.maps.StreetViewPanorama(
document.getElementById('map-canvas'),
panoramaOptions);
myPano.setVisible(true);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
I had the same problem.
The problem is in the following line at the top
<link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet">
when your website is hosted on your own server location, your map page cannot find the css file.
you need to add the following css to your file;
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map-canvas, #map_canvas {
height: 100%;
}
#media print {
html, body {
height: auto;
}
#map-canvas, #map_canvas {
height: 650px;
}
}
#panel {
position: absolute;
top: 5px;
left: 50%;
margin-left: -180px;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
}
or you need to add it to a new file called default.css located at yourwebsitesAddress.com//\maps/documentation/javascript/examples/default.css