如何在Blazor扩展中使用Chrome API SidePanel？

我正尝试让我的浏览器扩展调用Chrome API的SidePanel功能，之前在React应用中实现过该功能，但在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": "使用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>" ]
    }
  ]
}

问题复现步骤 #

1. 安装dotnet的Blazor.BrowserExtension模板并创建新项目，执行以下dotnet CLI命令：

mkdir browserext
cd browserext
dotnet new install Blazor.BrowserExtension.Template::1.4.1
dotnet new browserext

2. 执行dotnet build编译项目；
3. 开启Chrome扩展开发者模式，加载已解压的扩展（路径为<项目目录>/bin/Debug/net8.0/browserextension）。

我期望实现标准SidePanel的展示效果——将扩展内容集成在浏览器侧边栏中。

要在Blazor WebAssembly浏览器扩展中实现Chrome SidePanel，需调整以下关键部分：

1. 修正Manifest配置 #

当前Manifest中action字段配置了default_popup，这会导致点击扩展图标时弹出弹窗而非侧边栏。需移除default_popup，并添加side_panel字段指定侧边栏页面：

{
  // ... 保留原有其他配置
  "action": {}, // 移除default_popup配置
  "side_panel": {
    "default_path": "SidePanel.html" // 指定侧边栏加载的页面
  },
  // ... 保留原有其他配置
}

2. 统一API命名空间 #

代码中混用了chrome和browser命名空间，在Chrome扩展中建议统一使用chrome：

chrome.runtime.onInstalled.addListener(() => {
  const indexPageUrl = chrome.runtime.getURL("index.html");
  chrome.tabs.create({
    url: indexPageUrl
  });
});

chrome.sidePanel
  .setPanelBehavior({ openPanelOnActionClick: true })
  .catch((error) => console.error(error));

3. 确保SidePanel.html正确加载Blazor组件 #

SidePanel.html需和项目的index.html结构一致，正确引入Blazor启动脚本，示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Blazor Side Panel</title>
    <base href="/" />
    <link href="css/app.css" rel="stylesheet" />
    <link href="blazorext.styles.css" rel="stylesheet" />
</head>
<body>
    <div id="app">Loading...</div>

    <script src="_framework/blazor.webassembly.js"></script>
</body>
</html>

4. 验证权限与资源访问 #

当前配置中permissions已包含sidePanel，web_accessible_resources也覆盖了Blazor所需的框架文件，无需额外调整。

5. 测试扩展 #

重新编译项目，在Chrome中重新加载扩展后，点击扩展图标即可打开集成在浏览器侧边栏的Blazor内容。

内容的提问来源于stack exchange，提问作者Casey Kawamura