WebView2 Component for foobar2000

foo_webview2 is a foobar2000 component that exposes the Microsoft Edge WebView2 control as a UI element or panel. The component started as foo_vis_text and this is a fork of foo_uie_webview.

It takes an HTML file that receives notifications from and can interact with foobar2000. The panel can react to those notifications and adjust its output using JavaScript. In addition, a host object provides a number of methods and properties to interact with foobar2000 and the visualization stream can be accessed through a shared buffer.

Features

• Supports the Default User Interface (DUI) and the Columns User Interface (CUI).
• Supports dark mode.
• Supports foobar2000 2.0 and later (x86 32-bit and 64-bit versions).

Requirements

• foobar2000 v2.0 or later (32 or 64-bit).
• Microsoft Edge WebView2 Runtime (preinstalled in Windows 10 and 11).

Validation

• Tested with foobar2000 2.25.6.
• Tested with Columns UI 3.2.3.
• Tested with WebView2 144.0.3719.82.
• Tested on Microsoft Windows 11 (Build 26200).

Getting started

• Double-click foo_webview2.fbk2-component.

or

• Import foo_webview2.fbk2-component into foobar2000 using the "File / Preferences / Components / Install..." menu item.

First-run

When you add a WebView panel to the foobar2000 user interface the following things happen:

• The component tries to enable a supported WebView2 control. If no compatible WebView2 can be found the component will fail gracefully and report the error in the foobar2000 console.
• A subdirectory called foo_uie_webview gets created in the foobar2000 profile directory. It will contain various state information used by WebView2.
• By default, the component looks for the HTML file foo_webview2\Template.html in the foobar2000 profile directory. The location of the template can be changed in the preference page of the component.
  • A copy of the default template will be created in that location on first run or if the specified file does not exist when the component starts.
• A WebView2 preferences page is added to Preferences dialog under the Display category.

Preferences

The preferences page allows you to specify the path of the template file that should be used. The path can contain environment variables e.g. "%UserProfile%\Documents\Template.html".

The panel automatically rereads the template file when the file path or the contents changes.

The Edit button launches the editor that has been associated with the file type of the template in Windows.

Tips

• The directory where the component is installed contains an example template file called Default-Template.html. Do not store your customized template file in this directory because it will be overwritten or removed when the component gets upgraded.
• The context menu of the WebView contains a WebView submenu that can take you directly to the preferences page.
• Check the foobar2000 console for lines marked with foo_webview2 in case you encounter problems with the component.

Developing

Prerequisites

To build the component:

• Microsoft Visual Studio 2026
• foobar2000 SDK 2025-03-07
• Windows Template Library (WTL) 10.0.10320
• Columns UI SDK 8.0.0
• WebView2 SDK 1.0.3650.58
• Windows Implementation Libraries (WIL) 1.0.250325.1

To create the deployment package:

• PowerShell 7.2 or later

Setup

Create the following directory structure:

foo_uie_webview
    Packages
        columns_ui-sdk.8.0.0
        foobar2000.2.0.250307.0
        Microsoft.Web.WebView2.1.0.3650.58
        Microsoft.Windows.ImplementationLibrary.1.0.250325.1
        wtl.10.0.10320
    Bin
        Win32
        x64
        ARM64EC
    Obj
        Win32
        x64
        ARM64EC

• foo_uie_webview contains the Git repository.
• Packages/columns_ui-sdk* contains the Columns UI SDK.
• Packages/foobar2000* contains the foobar2000 SDK.
• Packages/Microsoft.Web.WebView2* contains the WebView2 SDK.
• Packages/Microsoft.Windows.ImplementationLibrary* contains the WIL.
• Packages/wtl* contains the WTL.
• Bin/**/Debug contains a debug version of the component.
• Bin/**/Release contains a release version of the component.

Building

Open foo_uie_webview.slnx with Visual Studio and build the solution.

Packaging

Run the build-fb2k_component.ps1 script.

Change Log

See CHANGELOG.

Reference Material

• https://learn.microsoft.com/en-us/microsoft-edge/webview2/get-started/win32
• https://learn.microsoft.com/en-us/microsoft-edge/webview2/how-to/javascript
• https://learn.microsoft.com/en-us/microsoft-edge/webview2/how-to/hostobject?tabs=win32
• https://learn.microsoft.com/en-us/microsoft-edge/webview2/concepts/user-data-folder?tabs=win32
• https://learn.microsoft.com/en-us/microsoft-edge/webview2/webview2-api-reference?tabs=win32cpp

Links

• Repository: https://github.com/jecassis/foo_uie_webview
• Issue tracker: https://github.com/stuerp/foo_uie_webview/issues
• Wiki: https://wiki.hydrogenaud.io/index.php?title=Foobar2000:Components/WebView_(foo_uie_webview).

License