Blazor.BrowserExtension: Probleme beim Hinzufügen von Razor-Komponenten zum Gmail-DOM in der Chrome-Erweiterung ⇐ C#

[Guest]

Ich entwickle eine Chrome-Erweiterung mit dem Blazor.BrowserExtension-Paket. Das Ziel besteht darin, das DOM von Gmail zu manipulieren, indem Razor-Komponenten eingefügt und C#-Methoden aus custom.js (Inhaltsskript) aufgerufen werden. Unten sind die relevanten Teile meiner Implementierung:
manifest.json:

Code: Select all

{
"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:

Code: Select all

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:

Code: Select all

@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:

Code: Select all

(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);
})();

Wenn ich das ausführe, treten die folgenden Fehler auf:

• blazor.webassembly.js:1 Das Laden wurde abgelehnt das Skript 'https://mail.google.com/mail/u/0/framework/dotnet.js', weil es gegen die Richtlinie zur Inhaltssicherheit verstößt: "script-src 'self' 'wasm-unsafe-eval' .. ."
• Ungefangen (versprochen) Fehler: Plattform konnte nicht gestartet werden. Grund: TypeError: Das dynamisch importierte Modul konnte nicht abgerufen werden: https://mail.google.com/mail/u/0/framework/dotnet.js
• Modulskript konnte nicht geladen werden: Erwartet ein JavaScript-Modulskript, aber der Server hat mit dem MIME-Typ „text/html“ geantwortet.
• blazor.webassembly.js:1 Nicht abgefangen (in Versprechen) Fehler: Start fehlgeschlagen Plattform.

Meine Frage:

• Ist es möglich, Blazor.BrowserExtension zu verwenden? Razor-Komponenten in das DOM von Gmail einfügen?
• Sind diese Fehler auf Einschränkungen mit Blazor.BrowserExtension bei der Handhabung des CSP von Gmail oder auf Ressourcenbeschränkungen zurückzuführen?
• Sollte ich Wechseln Sie zu einer reinen JavaScript-Implementierung für die DOM-Manipulation in In diesem Fall?

Jede Anleitung wäre willkommen.