Standalone Javascript Application With Chromium

JavaScript is becoming more and more popular every day and I was wondering if I could make a standalone javaScript App. I knew that a Chromium (http://www.chromium.org/) portable package has a “kiosk” mode which disables many of the integrated UI.

Next I decided to use a Chrome App together with Chromium (Portable version) and managed (after several fails and testing) to make it run locally (without a custom build) with full NaCl (Native Client) support.

The generated app can also be published on Chrome Web store and many UI functionality can easily be programmed using Javascript like developing a web page. NaCl opens the possibility of using low level stuff when needed. The Chromium App allows some customizations via a “.ini” file named exactly as the main executable (mine was in App\AppInfo\Launcher) and mine looks something like this; (Documented at portableapps.com)

[Launch]
ProgramExecutable=Chromium\32\Chrome.exe
DirectoryMoveOK=yes
MinOS=XP
SingleAppInstance=false
CommandLineArguments=--enable-local-file-accesses "../../../start.html" --load-extension="../../../Main"
SplashTime=0

There is a folder named “Main” alongside the main executable. Above commands disable the splash screen, enable local (file:\\\) accesses, load the application who’s manifest is in Main folder and starts the browser from “start.html”.

The manifest is;

{
    "key": "***",
    "name": "Test App",
    "description": "",
    "version": "0.1",
    "manifest_version": 2,
    "app": {
        "launch": {
            "local_path": "index.html"
        }
     },
    "permissions": [
        "tabs"
    ]
}

We need tabs access to be able to close the application. “start.html” is there to be able to start our Chrome App in the first tab opened by Chromium and reads:

window.location = "chrome-extension://apdfllckaahabafndbhieahigkjlhalf/index.html";

Here, apdfllckaahabafndbhieahigkjlhalf is the AppId corresponding to the key in the App’s manifest.

In “index.html”, I have;

//disable context menu
document.addEventListener("contextmenu", function(e) {
    e.preventDefault();
});
//close new tabs
chrome.tabs.query({},function(a) {
    if(a.length > 1)
        chrome.tabs.remove(a[a.length-1].id);
});
//exit button
document.getElementById('exit_btn').onclick = function () {
chrome.tabs.getCurrent(function(a){
    chrome.tabs.remove(a.id);
})};

“exit_btn” successfully exits the app by closing the single available tab and the above code block prevents opening of new tabs when the application is re-executed while running.

Chromium shows the API key warning if none set and to prevent this I use an AutoHotKey script to set some Environment variables and start the application;

EnvSet, GOOGLE_API_KEY, no
EnvSet, GOOGLE_DEFAULT_CLIENT_ID, no
EnvSet, GOOGLE_DEFAULT_CLIENT_SECRET, no
Run App.exe

Finally, to disable developer tools, the “Preferences” file that is located under “Data\Profiles\Default” is edited and

"devtools": {
    "disabled": true,
    "split_location": 256
}

is added if not existant.

With these configuration, I’m able to start a custom web app fullscreen without any pre-installed software on Windows. I did not have time to test the same concept on any other operating system but I’m pretty sure that it’ll work similarly. Whit this tool at hand, using naCl and WebGl, even high (relatively) performance games can be made… Currently the only drawback is that chromium continues to run in the background indefinitely. Dev channel have a processes API to solve this problem here.

Edit: Use electron instead.