Blazor.BrowserExtension: проблемы с добавлением компонентов Razor в Gmail DOM в расширении Chrome ⇐ Javascript

[Anonymous]

Я разрабатываю расширение Chrome, используя пакет Blazor.BrowserExtension. Цель состоит в том, чтобы манипулировать DOM Gmail, внедряя компоненты Razor и вызывая методы C# из custom.js (скрипт контента). Ниже приведены соответствующие части моей реализации:
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("CustomButton");
}
if (browserExtension.Mode == BrowserExtensionMode.Background)
{
builder.RootComponents.AddBackgroundWorker();
}
else
{
builder.RootComponents.Add("#app");
builder.RootComponents.Add("head::after");
}
});

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

ButtonComponent.razor:

Код: Выделить всё

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


@ButtonText



.gmail-button { /* styling here */ }


@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 Отказано в загрузке сценарий «https://mail.google.com/mail/u/0/framework/dotnet.js», поскольку он нарушает директиву Политики безопасности контента: «script-src 'self' 'wasm-unsafe-eval' .. ."
• Необнаружено (в обещании) Ошибка: не удалось запустить платформу. Причина: TypeError: Не удалось получить динамически импортированный модуль: https://mail.google.com/mail/u/0/framework/dotnet.js
• Не удалось загрузить скрипт модуля: Ожидается. сценарий модуля JavaScript, но сервер ответил MIME-типом «text/html».
• blazor.webassembly.js:1 Uncaught (в обещании) Ошибка: не удалось запустить платформе.

Мой вопрос:

• Можно ли использовать Blazor.BrowserExtension внедрить компоненты Razor в DOM Gmail?
• Связаны ли эти ошибки с ограничениями Blazor.BrowserExtension при обработке CSP Gmail или ограничениями ресурсов?
• Должен ли я перейти на чистый JavaScript реализация манипулирования DOM в этом случае?

Будем признательны за любые рекомендации.

Подробнее здесь: https://stackoverflow.com/questions/793 ... n-chrome-e