Google Chrome frameless (like kiosk) - google-chrome

I want know if is it possible to make Google Chrome behave like a kiosk (without a frame or controls) but not in full screen, like the next mock picture:

My solution in Electron:
var app = require('app'); // Module to control application life.
var BrowserWindow = require('browser-window'); // Module to create native browser window.
// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is GCed.
var mainWindow = null;
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
app.on('ready', function() {
// Create the browser window.
mainWindow = new BrowserWindow({width: 800, height: 600, frame:false});
// and load the index.html of the app.
mainWindow.loadURL('http://www.google.com/');
// Emitted when the window is closed.
mainWindow.on('closed', function() {
// Dereference the window object, usually you would store windows
// in an array if your app supports multi windows, this is the time
// when you should delete the corresponding element.
mainWindow = null;
});
});

I do not think that it's possible to make Chrome itself behave that way, but a Chrome App (not an extension) can do this.
This is an option in window creation:
chrome.app.window.create("app.html", {
frame: "none"
});
Note that you will have to provide your own controls to close/move the window.
To make it behave like a browser, you'll need to embed a <webview> element. See also a browser app example.
However, note that Chrome Apps are being deprecated.
You should consider using a similar platform, like Electron or NW.js, to build your own "mini-browser" for your purpose.

Related

ZoomWindow extension breaks without GUI?

Using v2.13 of the viewer, the ZoomWindow extension relies on having the default GUI enabled. Is there a way around this? The load method is:
proto.load = function() {
var viewer = this.viewer;
var toolbar = viewer.getToolbar(true);
//var toolbar = viewer.getToolbar ? viewer.getToolbar(true) : undefined;
// Init & Register tool
this.tool = new namespace.ZoomWindowTool(viewer);
viewer.toolController.registerTool(this.tool);
// Add the ui to the viewer.
this.createUI(toolbar);
return true;
};
which fails because getToolbar is undefined.
It seems from the commented out line that this has been considered, but not implemented.
What is the best way to implement a work around - should I copy the entire extension with a new name, or can I replace the load method at runtime?
Edit: was looking to use the headless viewer, but it seems easiest just to hide the UI with css.
It's not clear to me if you are using the GuiViewer3D or want to use the Viewer3D, the viewer without Autodesk custom UI. If you use GuiViewer3D, you can simply wait for the toolbar to be loaded before loading the ZoomWindow extension, which requires the toolbar controls to be created in order to add a button to it.
viewer.addEventListener(Autodesk.Viewing.TOOLBAR_CREATED_EVENT, function () {
viewer.loadExtension('Autodesk.Viewing.ZoomWindow')
})
Here is a blogpost I wrote a while ago about using events in the viewer. It is not up-to-date with the current version but remains valid:
http://adndevblog.typepad.com/cloud_and_mobile/2015/10/event-watcher-extension-for-view-data.html
Now as Zhong mentioned, if you want to use the headless viewer with no UI and still use the extension, you may have to copy and customize it as you suggested. But an easier workaround could be to use GuiViewer3D and simply hide the existing toolbar with css, so the the js code remains valid. Set display:none on div id="guiviewer3d-toolbar", for example, or on the adsk-control class.
Hope that helps

StageWebView Flash's White when Displayed

StageWebView Flash's White when Displayed
So I've been working on a project using Adobe Animate to create a universal Air application that can be ported to multiple platforms i.e. Mac, Windows, and iOS.
It uses StageWebView to display videos embedded on HTML pages that have their own custom html5 video player and everything works well except for one simple but annoying thing.
Whenever I display a Stage Web View you'll see a flash of white before the page displays.
Now I originally thought this was an issue with checking for a URL load completion or a poorly formatted HTML document but that doesn't seem to be the case.
What I did notice after several attempts of trying to remove the issue is that it did go away if I used the embedded Air WebKit opposed to using the native WebKit from the desktop device.
(Code Below) Causes white flash on load:
var webView:StageWebView = new StageWebView(true);
(Code Below) This gets rid of the issue but my HTML tags like video and progress are not supported by the embedded WebKit and no longer function properly.
var webView:StageWebView = new StageWebView();
Information from about the setting from Adobe:
useNative:Boolean (default = false) — When useNative is false, a version of WebKit embedded within AIR is used as the source of the
StageWebView created. When useNative is true, then AIR will use the
the system's default web engine. Mobile platforms only support using
the system web engine, so useNative is ignored on mobile platforms.
The frustrating thing is that I've set a listener to check for load completion and that doesn't get rid of the issue. So as a workaround I've hidden the displayed StageWebView off the screen and then moved it's location to where I want it to be after a delay which is not great.
Other attempts to display it small as a pixel resize it in place cause the issue still.
/* Check for Stage Web View Errors */
webView.addEventListener(ErrorEvent.ERROR, onError);
function onError(e:ErrorEvent):void {
trace("Stage Web View error: " + e);
}
/* Function to not show Stage Web View until loaded. */
function onCompleteHandler(e:Event):void {
webView.assignFocus();
// Delay the Stage Web View to fix white flash issue.
setTimeout(callWebView,500);
webView.removeEventListener(Event.COMPLETE,onCompleteHandler);
}
/* Multi-Function Stage Web View Loader, Just add file path string to call */
function webviewFilePath(path:String):void {
webView.stage = this.stage;
// Prep filepath
filePath = new File(new File(path).nativePath).url;
// Load file path
webView.loadURL(filePath);
// Add listener for Complete URL Load then Show
webView.addEventListener(Event.COMPLETE,onCompleteHandler);
}
/* Function to call Stage Web View independantly so it can be delayed with a timer */
function callWebView() {
webView.viewPort = new Rectangle(posX(viewX), posY(viewY), viewWidth, viewHeight);
}
Any hints or tips on how I can alleviate or fix the issue would be great.
Of course if Adobe just actually updated the embedded Air WebKit that would probably fix the whole issue in the first place but I doubt that's happening anytime soon.
Partial Fix
So the issue still exists when I initially load up the Stage Web View but I've managed to minimize its appearance during app use.
One major part of the issue was how I reset the StageWebView in preparation for a new page I wanted to load or when I wanted to close the view.
I went a little overboard on resetting StageWebView because audio in StageWebView has been known to continue playing even when it's hidden.
/* Function to Reset Stage Web View */
function resetWebView():void {
webView.loadString("<!DOCTYPE HTML><html><body></body></html>");
//webView.viewPort = new Rectangle(0, 0, 0, 0);
webView.stage = null;
//webView.viewPort = null;
}
I realized I could just simply hide the StageWebView and load up a blank page while it was hidden from view to stop any audio playing. That was easy enough to accomplish with a simple string loaded into it.
Although from time to time I'll still see that white flash it's occurrence is minimal.
private var webView : StageWebView;
webView = new StageWebView( true );
webView.stage = this.stage;
webView.viewPort = new Rectangle( 0, 0, 1024, 768 );

FireFox Add-on: retrieve text from textbox in current tab gives no result

I am trying to create an add-on that gets the contents (textbox.value) from a textbox with ID = city from the current webpage and write it to a text file.
The file can be written without getting the textbox value. But, If I update the code then it writes nothing. Below is the code I used to get the textbox value.
var cityfromfield = window.content.document.getElementById('city').value;
var date = new Date();
var TimeStamp = date.toLocaleString();
var wstrtotext = TimeStamp + cityfromfield;
fos.write(wstrtotext, wstrtotext.length);
Any help would be appreciated.
Without more information, it is necessary to guess at what your problem is. The most likely issue is that you are attempting to find the textbox element with ID=city in the wrong document.
Firefox add-ons generally run in a scope where the global window object is not defined (if it is defined depends on how the portion of your code that is currently running was entered). Even if it is defined, it is often not defined as the window which you are expecting (the window of the current tab). You will probably need to obtain a reference to the window object for the most recently accessed window/tab.
If a browser window exists (in some instances you could be running where no browser window exists, yet, e.g. at start-up), you can obtain a reference to the most recent browser window, document, and gBrowser with:
if (window === null || typeof window !== "object") {
//If you do not already have a window reference, you need to obtain one:
// Add/remove a "/" to comment/un-comment the code appropriate for your add-on type.
/* Add-on SDK:
var window = require('sdk/window/utils').getMostRecentBrowserWindow();
//*/
//* Overlay and bootstrap (from almost any context/scope):
var window=Components.classes["#mozilla.org/appshell/window-mediator;1"]
.getService(Components.interfaces.nsIWindowMediator)
.getMostRecentWindow("navigator:browser");
//*/
}
if (typeof document === "undefined") {
//If there is no document defined, get it
var document = window.content.document;
}
if (typeof gBrowser === "undefined") {
//If there is no gBrowser defined, get it
var gBrowser = window.gBrowser;
}
If you are running the code in response to an event (e.g. a button command event), you can obtain the current window with:
var window = event.view
The lack of having the global window object available, or having it reference something other than what you are expecting, is something that many people encounter as a problem when writing Firefox add-ons.
Note: If you are wanting to be natively compatible with multi-process Firefox (Electrolysis, or e10s), then gaining access to the contents of the current document is more complex. There are shims in place which should make your code continue to work with multi-process Firefox for some time, but they may/will eventually go away.
References:
nsIWindowMediator
Working with windows in chrome code
SDK: window/utils
SDK: windows
Large portions of this were copied from my earlier answers, including this link.

printing support on chrome packaged apps

I can't seem to find any example of window.print() support in chrome packaged apps - can someone please post an example?
I'm using this
function clickHandler(e) {
window.print();
}
document.addEventListener('DOMContentLoaded', function () {
document.querySelector('button').addEventListener('click', clickHandler);
});
from "Hello World!" sample platform app, but I can't seem to get it working.
is there a special permission settings I should use?
Thanks!
Yes, window.print() works in Chrome Apps. You can find a sample in the official samples repo.
It is as simple as calling window.print() in any DOM window of your app:
// prints the content of the current window:
window.print();
// prints the content of another AppWindow:
anotherAppWindow.contentWindow.print()
AppWindow is the Chrome Apps object that encapsulates and extends the actual DOM window with app capabilities. This object can be obtained by either:
saving the parameter from the callback of chrome.app.window.create
calling chrome.app.window.current() on any code running in the context of the desired window

How do I access the popup page DOM from bg page in Chrome extension?

In Google Chrome's extension developer section, it says
The HTML pages inside an extension
have complete access to each other's
DOMs, and they can invoke functions on
each other. ... The popup's contents
are a web page defined by an HTML file
(popup.html). The popup doesn't need
to duplicate code that's in the
background page (background.html)
because the popup can invoke functions
on the background page
I've loaded and tested jQuery, and can access DOM elements in background.html with jQuery, but I cannot figure out how to get access to DOM elements in popup.html from background.html.
can you discuss why you would want to do that? A background page is a page that lives forever for the life time of your extension. While the popup page only lives when you click on the popup.
In my opinion, it should be refactored the other way around, your popup should request something from the background page. You just do this in the popup to access the background page:
chrome.extension.getBackgroundPage()
But if you insist, you can use simple communication with extension pages with sendRequest() and onRequest. Perhaps you can use chrome.extension.getViews
I understand why you want to do this as I have run into the problem myself.
The easiest thing I could think of was using Google's method of a callback - the sendRequest and onRequest methods work as well, but I find them to be clunky and less straightforward.
Popup.js
chrome.extension.getBackgroundPage().doMethod(function(params)
{
// Work with modified params
// Use local variables
});
Background.html
function doMethod(callback)
{
if(callback)
{
// Create/modify params if needed
var params;
// Invoke the callback
callback(params);
}
}
As other answers mention, you can call background.js functions from popup.js like so:
var _background = chrome.extension.getBackgroundPage();
_background.backgroundJsFunction();
But to access popup.js or popup.html from background.js, you're supposed to use the messages architecture like so:
// in background.js
chrome.runtime.sendMessage( { property: value } );
// in popup.js
chrome.runtime.onMessage.addListener(handleBackgroundMessages);
function handleBackgroundMessages(message)
{
if (message.property === value)
// do stuff
}
However, it seems that you can synchronously access popup.js from background.js, just like you can synchronously access the other way around. chrome.extension.getViews can get you the popup window object, and you can use that to call functions, access variables, and access the DOM.
var _popup = chrome.extension.getViews( { type: 'popup' } )[0];
_popup.popupJsFunction();
_popup.document.getElementById('element');
_popup.document.title = 'poop'
Note that getViews() will return [] if the popup is not open, so you have to handle that.
I'm not sure why no one else mentioned this. Perhaps there's some pitfalls or bad practices to this that I've overlooked? But in my limited testing in my own extension, it seems to work.