Menu
I'm deploying a kiosk system that uses Chrome to display a java web app running in jetty started with a windows service wrapper. It takes some time after the system starts for jetty to be ready to serve content so for now I have a wait occurring which then launches Chrome in kiosk mode. This is pretty ugly, unreliable and slow.
What I'm trying to do in order to make it run smoother is to use a Chrome extension that detects the 4xx error and sets a timeout that reloads the page. I have this working as is but it's still an ugly solution since the page is refreshing every 3 seconds and it's the "Oops! Google Chrome could not find..." page that's showing to the user while they're waiting. I can fix the first problem with an ajax request in the background to detect when the page is ready but I really want to show the user a nice "Loading" screen instead of the error page. I'm not a Chrome extension developer and all of my attempts to fix this with an extension have failed so far.
I thought it would be possible to customize the error page but I can't find any information on how to do that since all of the search results I find on the topic center around the 512 minimum size issue.
602
asked Feb 12 '13 20:02
You can customize the error page with webNavigation API. Add an event Listener for onErrorOccurred event and update relevant details.
Check sample code as a reference.
Registered background page and added all relevant permissions to manifest file.
{
"name": "Customize error page",
"description": "",
"version": "1",
"manifest_version": 2,
"background": {
"scripts": [
"background.js"
]
},
"permissions": [
"webNavigation",
"<all_urls>"
],
"web_accessible_resources": [
"page.html"
]
}
Redirected to our custom Page in case of any error, you can customize this to desired level.
//Adding a Listener to Error Occured Event
chrome.webNavigation.onErrorOccurred.addListener(function (details) {
// Updating the browser window with desired URL
chrome.tabs.update(details.tabId, {
url: chrome.extension.getURL("page.html")
});
});
Some trivial code
<html>
<style>
body {
background:yellow;
position:absolute;
}
</style>
<body>
<div style="top: 200px;position: absolute;left: 500px;width: 500;font-size: 40px;">This is a Nice Description</div>
</body>
</html>
Go to options, privacy settings, and uncheck the box:
"Use a web service to help resolve navigation errors"
Detailed instructions here.
27
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
