TrayBrowser

TrayBrowser is a small system tray icon that displays a flyout containing anything you want – custom commands for launching apps, home automation, or even information like news and status updates. You can use standard HTML, CSS, and JavaScript to create any layout you want and even take advantage of Windows 11's Acrylic backdrops. The possibilities are endless!

This is the spiritual successor to TrayMenu, providing much of the same functionality but with far more customizability of the UI.

 

Suggested uses

Control external devices

Use EventGhost or a similar program to configure hardware commands – just use EventGhost's own Web Server plugin and send commands to it via AJAX.

in the example screenshot, EventGhost sends commands to an IR blaster which controls an audio receiver. You can just as easily configure commands for smart devices (such as lights) in your home. As long as the device in question can be controlled via a command line or URL, you can launch it from TrayBrowser's web page.

Extend Multiscreen Blank

Multiscreen Blank includes its own notification area icon with numerous useful commands. However, you may have more complicated configurations that are only accessible via command line or batch file (such as dimming a set of screens that aren't part of a group to a specific level). TrayBrowser allows you to apply this configuration with 2 clicks (1 click to open the menu, 1 click to choose the configuration).

Minimalist Start menu / taskbar pinning replacement

Use TrayBrowser to launch frequently-used programs while maintaining an uncluttered desktop, taskbar, and Start menu.

How to use

The download package contains two sample layouts – a custom layout demonstrating table placement to simulate a remote control, and a simpler menu layout if you're looking to replace TrayMenu with a more modern Windows 11 appearance. Use these samples as a guide to create your own menu.

The "home page" defaults to the Content\index.htm file. You can redirect to another page using <meta refresh> or JavaScript, and can store multiple files or even folders in this directory to create more complex menus.

System requirements

TrayBrowser relies on the WebView2 Runtime. Windows 11 includes this by default, but Windows 10 and below will require it to be installed.

Additionally, the cool blurbehind effects and rounded corners require Windows 11. The program will still work on Windows 10 and below but the flyout will have square corners and no transparency.

Setting size

The popup window's size is automatically determined by the contents of your HTML page. You can also force it to a specific size (which will cause scrollbars to appear if the content is too large).

<meta name="traybrowser-window-size" content="400,300">
<meta name="traybrowser-window-size" content="auto">

Setting backdrop color

You can enable Windows 11's "Acrylic" blurbehind effect by setting the appropriate tag in your web page. You can specify both a "dark" and "light" variant that will be automatically determined based on your system theme.

Blurbehind has two parameters. The "color" is a base color that roughly corresponds to what will appear if the window is displayed over a plain white (or black) background, and the "opacity" determines how translucent the effect is.

<meta name="traybrowser-blurbehind-color" content="#ffffff">
<meta name="traybrowser-blurbehind-color-dark" content="#000000">
<meta name="traybrowser-blurbehind-opacity" content="128">
<meta name="traybrowser-blurbehind-opacity-dark" content="192">

After enabling the blurbehind effect, you will need to use a transparent background color in your web page, otherwise the effect will be covered up by the contents of your page.

Launching local files

The primary purpose of TrayBrowser is launching various commands on your system. This is done by setting the href property of a link or using JavaScript to set window.location.

Local files can be run with the local: URL prefix. For example to run the Windows calculator, use the following code.

<a href="local:calc.exe">Calculator</a>

Launching HTTP commands

Being a web browser, you can also make standard HTTP requests to web services (including EventGhost running on your local system or a remote system).

One gotcha here is CORS. Modern web browsers forbid AJAX requests to endpoints that don't authorize it via an Access-Control-Allow-Origin header (and EventGhost does not provide a means to add this header). If you have access to the destination web server, simply add the appropriate header and things will work as expected.

If you can't modify the destination server, TrayBrowser provides an easy way around this via the ajax: prefix on your URL. Simply launch the URL as if was in the foreground, and TrayBrowser will run the request in the background. Note that this is only good for launching simple commands; you cannot actually retrieve data and act on it.

<a href="ajax:http://localhost:1337/?param">Web server command</a>

A more typical way to do this is to use a "proxy" server (controlled by you) that has the appropriate CORS headers and forwards your request to the actual destination. Setting this up is beyond the scope of this tutorial and is unnecessary for simple commands, but this method will work with TrayBrowser if you have a more complex home automation setup. (I use it for my own home automation to get around EventGhost's inability to set the header).

Closing the flyout after launching

The flyout will normally close when it loses focus, i.e. you click outside of it onto another program. In some cases you might want to close the flyout immediately after clicking a button (similar to how menus work); this requires adding a tiny bit of JavaScript.

<a href="local:calc.exe" onclick="trayMessage('close')">Calculator</a>

The trayMessage function is defined in the samples. Here it is for reference. Essentially you are posting a message to the underlying WebView2 instance which tells the flyout to close.

function trayMessage(msg,data) {
    if(window.chrome.webview) {
        window.chrome.webview.postMessage(msg + ":" + data);
    }
}

License

You are allowed to use TrayBrowser with virtually no restrictions. However, you may NOT use this software as part of your own projects or compilations without permission from the developer.