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 browserext
cd browserext
dotnet new install Blazor.BrowserExtension.Template::1.4.1
dotnet 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