Running JavaScript app outside of the browser [closed]

Question

I have a couple of little widgets that I have made to run in the browser, just basic JavaScript and HTML. They are little tools that have blank backgrounds and things like CPU usage, and just little toys like that.

I originally developed these tools to live on a web page as components of a view on a web site. Is there a way that I can bring these outside the browser such as Chrome, and just have my CPU usage app overlay my desktop so I can still see stuff behind it such as when a movie is playing, or playing a video game? Perhaps even launch a javascript only program that runs AS A DESKTOP application?

It is fine to depend on the browser as long as I can have this app over my desktop or run as a stand alone Node.js application. How is this done? I recently heard that desktop applications such as Discord do things much like this with voice comms and have overlays in games.

Matthias

just curious... how do you get cpu usage statistics with javascript? – Mcconaghy

threadpooling, its more of an estimated calculation rather than a true value. – Matthias

So many duplicates that are easy to find with a google search: Executing JavaScript Outside of the Browser - Cross Platform, Javascript outside the browser, Executing Javascript without a browser?, Execute Javascript without using a browser, GUI apps in javascript without a browser?... – Talithatalk

Why not just minimise those Browser Windows ? – Mchail

Answer 1

As a website, the answer is no. However you can create a Node app, and that can run as a normal executable.

I believe Spotify, and Slack (at the time of writing) are good examples of a Node wrapped application.

A few options:

These project have some serious star counts on github.

Electron

The Electron framework lets you write cross-platform desktop applications using JavaScript, HTML and CSS. It is based on Node.js and Chromium.

Github's Atom editor is built using Electron.

Slack uses Electron as well.

Electron's official site

node-webkit

NW.js is an app runtime based on Chromium and node.js. You can write native apps in HTML and JavaScript with NW.js. It also lets you call Node.js modules directly from the DOM and enables a new way of writing native applications with all Web technologies.

The unofficial Facebook Messenger for Desktop is built using node-webkit.

Other cool projects:

• AppJS
• Sciter
• TideSDK

Squashy

I wonder if either of those support transparent backgrounds though? Edit: The answer is yes – Nyberg

Hmm...Very interesting...I downloaded and ran Electron, Pretty sweet little tool. One cool Idea is because the smart tv apps are just little web apps and you can make apps that overlay the tv (by just simply having transparent backgrounds) Is it to accomplish this same thing with electron? – Matthias

@TravisTubbs That would be a very interesting use case, if you blog about doing it, I'd be interested in perusing. I'm not sure how it would work though, I've never done any TV related development. – Squashy

The problem with the tv development is a lack of a common platform making it a HUGE headache. With the deregulation of cable boxes coming up, I am working on a prototype little linux box to have a common development environment for using web apps on the tv. I love the hardware end of the electronics like that. – Matthias

Just to follow up on this topic a couple of years later. Electron has REALLY matured a lot. It is made by Github and several applications use this, one included is Discord (the VOIP program). I now use Electron and it is awesome for doing just this problem that I asked! – Matthias

Answer 2

Check Sciter, it was designed specifically as an embeddable HTML/CSS UI engine of desktop applications.

Yet it supports transparent HTML windows and windowed HTML popup elements:

And check Sciter technology introductory article

Monkhood