How do I use Chrome API Sidepanel in a Blazor extension?

Currently I am trying to get my browser extension to utilize the Chrome API's SidePanel.

I have used this method in a react application, but I am stumped getting it to work in Blazor.

BackgroundWorker.js

chrome.runtime.onInstalled.addListener(() => {  const indexPageUrl = browser.runtime.getURL("index.html");  browser.tabs.create({    url: indexPageUrl  });});chrome.sidePanel  .setPanelBehavior({ openPanelOnActionClick: true })  .catch((error) => console.error(error));

Manifest.json

{"manifest_version": 3,"name": "blazorext Extension","description": "My browser extension built with Blazor WebAssembly","version": "0.1","background": {"service_worker": "BackgroundWorker.js","type": "module"  },"action": {"default_popup": "SidePanel.html"  },"options_ui": {"page": "options.html","open_in_tab": true  },"content_security_policy": {"extension_pages": "script-src 'self''wasm-unsafe-eval'; object-src 'self'"  },"permissions": ["sidePanel"  ],"web_accessible_resources": [    {"resources": ["framework/*","content/*"      ],"matches": [ "<all_urls>" ]    }  ]}

The problem can be reproduced by installing the Blazor.BrowserExtension template for dotnet, and creating a new project from a template.

dotnet CLI

mkdir browserextcd browserextdotnet new install Blazor.BrowserExtension.Template::1.4.1dotnet new browserext

For more info about the BrowserExtension template

If you've never built a chrome extension before

dotnet build

then you need to turn on developer mode in chrome extensions and "load unpacked" -> <.csprojdirectory>/bin/Debug/net8.0/browserextension

The result I am looking for should end up something like this:SidePanel example