Blazor扩展库中自动注入JavaScript实现alert方法复用的方案问询

嘿，我刚好做过类似的Blazor扩展库开发，完全懂你不想让用户手动加script标签的痛点！给你几个实用的自动注入方案，按推荐度排序：

这是Blazor官方针对类库开发设计的方案，能完美实现JS代码的隔离加载，不需要用户手动操作任何JS文件。

• 步骤1：在你的类库项目中创建wwwroot文件夹（如果没有的话），新建一个JS文件比如alert-utils.js，写入你的alert逻辑：

export function showAlert(message) {
    alert(message);
}

• 步骤2：在C#中封装一个服务，通过IJSRuntime导入该JS模块：

using Microsoft.JSInterop;
using System.Threading.Tasks;

public class AlertService
{
    private readonly IJSRuntime _jsRuntime;
    private IJSObjectReference? _jsModule;

    public AlertService(IJSRuntime jsRuntime)
    {
        _jsRuntime = jsRuntime;
    }

    public async Task ShowAlert(string message)
    {
        // 懒加载JS模块，避免重复加载
        _jsModule ??= await _jsRuntime.InvokeAsync<IJSObjectReference>(
            "import", "./_content/你的类库名称/alert-utils.js");
        
        await _jsModule.InvokeVoidAsync("showAlert", message);
    }
}

注意： 替换你的类库名称为你实际的NuGet包ID或类库项目名称，用户安装你的库后，Blazor会自动从类库的wwwroot资源中加载JS文件。

• 步骤3：让用户在他们的项目中注册你的服务（比如在Program.cs中）：

builder.Services.AddScoped<AlertService>();

之后用户只需要注入AlertService就能调用ShowAlert方法，完全不用管JS的事！

如果你的库是以组件形式提供的，可以在组件初始化时自动注入JS代码，避免全局污染：

using Microsoft.AspNetCore.Components;
using Microsoft.JSInterop;

public class AlertComponent : ComponentBase
{
    [Inject] private IJSRuntime JsRuntime { get; set; } = default!;
    private static bool _isJsRegistered;

    protected override async Task OnInitializedAsync()
    {
        // 只注册一次JS逻辑，避免重复执行
        if (!_isJsRegistered)
        {
            await JsRuntime.InvokeVoidAsync(@"
                window.blazorAlert = (message) => {
                    alert(message);
                };
            ");
            _isJsRegistered = true;
        }
        await base.OnInitializedAsync();
    }

    public async Task TriggerAlert(string message)
    {
        await JsRuntime.InvokeVoidAsync("blazorAlert", message);
    }
}

用户使用你的AlertComponent时，JS代码会在组件初始化时自动注入，无需额外操作。

如果不想依赖wwwroot，可以把JS文件嵌入到程序集，然后动态读取并执行：

• 步骤1：将JS文件设置为嵌入的资源（右键文件→属性→生成操作→嵌入的资源）
• 步骤2：编写扩展方法动态注入：

using Microsoft.JSInterop;
using System.IO;
using System.Reflection;
using System.Threading.Tasks;

public static class AlertJsExtensions
{
    private static bool _isRegistered;

    public static async Task RegisterAlertAsync(this IJSRuntime jsRuntime)
    {
        if (_isRegistered) return;

        var assembly = Assembly.GetExecutingAssembly();
        // 替换为你的嵌入资源名称，格式：命名空间.文件夹.文件名.js
        var resourceName = "YourLibraryName.Resources.alert-utils.js";

        using var stream = assembly.GetManifestResourceStream(resourceName);
        using var reader = new StreamReader(stream!);
        var jsCode = await reader.ReadToEndAsync();

        await jsRuntime.InvokeVoidAsync("eval", jsCode);
        _isRegistered = true;
    }

    public static async Task ShowAlertAsync(this IJSRuntime jsRuntime, string message)
    {
        await jsRuntime.InvokeVoidAsync("Alert", message);
    }
}

用户只需要在项目启动时调用一次await JSRuntime.RegisterAlertAsync()，之后就能通过扩展方法调用alert了。

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