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.
![](/images/traybrowser-full.png)
![](/images/traybrowser-menu.png)
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.
Launcher for Home Assistant
Home Assistant is a powerful tool for controlling all sorts of smart home devices and it comes with a convenient mobile app too. You can use TrayBrowser to display a mobile-style view of Home Assistant, easily accessible in your system tray.
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.
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>
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.
Comments (0)
Leave a comment