使用Blazor.BrowserExtension开发Chrome扩展时，向Gmail DOM注入Razor组件遇到的问题及相关疑问

我正在使用Blazor.BrowserExtension包开发Chrome扩展，目标是通过注入Razor组件并从自定义内容脚本custom.js调用C#方法来操作Gmail的DOM。以下是我实现中的相关部分：

相关代码实现 #

manifest.json #

{
  "manifest_version": 3,
  "name": "Test Extension",
  "description": "My browser extension built with Blazor WebAssembly",
  "version": "0.1",
  "background": {
    "service_worker": "content/BackgroundWorker.js",
    "type": "module"
  },
  "permissions": [
    "activeTab",
    "scripting",
    "storage"
  ],
  "host_permissions": [
    "https://mail.google.com/*"
  ],
  "action": {
    "default_popup": "popup.html"
  },
  "options_ui": {
    "page": "options.html",
    "open_in_tab": true
  },
  "content_security_policy": {
    "extension_pages": "script-src 'self' 'wasm-unsafe-eval'; object-src 'self'",
     "script-src": "'self' 'unsafe-inline' 'unsafe-eval'",
    "object-src": "'self'"
  },
  "content_scripts": [
    {
      "matches": ["https://mail.google.com/mail/*"],
      "js": ["framework/blazor.webassembly.js","content/custom.js"],
      "run_at": "document_idle"
    }
  ],
  "web_accessible_resources": [
    {
      "resources": [
        "framework/*",
        "content/*",
        "wwwroot/*"
      ],
      "matches": [ "https://mail.google.com/*" ]
    }
  ]
}

Program.cs #

using Blazor.BrowserExtension;
using System;
using System.Net.Http;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.DependencyInjection;
using Test.Components;

namespace Test
{
    public static class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            
            builder.UseBrowserExtension(browserExtension =>
            {
                if (browserExtension.Mode == BrowserExtensionMode.ContentScript)
                {
                    builder.RootComponents.RegisterForJavaScript<ButtonComponent>("CustomButton");
                }
                if (browserExtension.Mode == BrowserExtensionMode.Background)
                {
                    builder.RootComponents.AddBackgroundWorker<BackgroundWorker>();
                }
                else
                {
                    builder.RootComponents.Add<App>("#app");
                    builder.RootComponents.Add<HeadOutlet>("head::after");
                }
            });

            builder.Services.AddScoped<ITestService, TestService>();
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            await builder.Build().RunAsync();
        }
    }
}

ButtonComponent.razor #

@page "/button.html"
@inject IJSRuntime JSRuntime

 <button @onclick="HandleClick" class="gmail-button">
    @ButtonText
</button>

<style>
    .gmail-button { /* styling here */ }
</style>

@code {
    [Parameter]
    public string ButtonText { get; set; } = "Click Me";

    private async Task HandleClick()
    {
        await JSRuntime.InvokeVoidAsync("alert", "Blazor Button Clicked!");
    }
}

custom.js #

(async () => {
    const sendButtonContainer = document.querySelector(".dC");
    if (!sendButtonContainer) {
        console.error("Send button container not found.");
    }

    const blazorScript = document.createElement("script");
    blazorScript.src = chrome.runtime.getURL("framework/blazor.webassembly.js");
    blazorScript.type = "text/javascript";
    blazorScript.onload = async () => {
        console.log("Blazor WebAssembly script loaded.");
        await Blazor.start();

        const blazorContainer = document.createElement("div");
        blazorContainer.id = "blazor-custom-container";
        sendButtonContainer.appendChild(blazorContainer);

        Blazor.rootComponents.add(blazorContainer, 'CustomButton', {
            ButtonText: "Blazor Action"
        });

        console.log("Blazor component added.");
    };

    blazorScript.onerror = () => {
        console.error("Failed to load Blazor WebAssembly script.");
    };

    document.head.appendChild(blazorScript);
})();

遇到的错误 #

运行时我遇到了以下错误：

• blazor.webassembly.js:1 Refused to load the script 'https://mail.google.com/mail/u/0/framework/dotnet.js' because it violates the Content Security Policy directive: "script-src 'self' 'wasm-unsafe-eval' ..."
• Uncaught (in promise) Error: Failed to start platform. Reason: TypeError: Failed to fetch dynamically imported module: https://mail.google.com/mail/u/0/framework/dotnet.js
• Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html".
• blazor.webassembly.js:1 Uncaught (in promise) Error: Failed to start platform.

我的疑问 #

1. 是否可以使用Blazor.BrowserExtension将Razor组件注入到Gmail的DOM中？
2. 这些错误是否与Blazor.BrowserExtension在处理Gmail的CSP或资源限制方面的局限性有关？
3. 在这种情况下，我是否应该切换到纯JavaScript实现来进行DOM操作？

任何指导都将不胜感激。

备注：内容来源于stack exchange，提问作者otter otter