https://github.com/sitkoru/sitko.blazor.scriptinjector
Library for dynamic scripts injection to blazor page
https://github.com/sitkoru/sitko.blazor.scriptinjector
Last synced: 8 months ago
JSON representation
Library for dynamic scripts injection to blazor page
- Host: GitHub
- URL: https://github.com/sitkoru/sitko.blazor.scriptinjector
- Owner: sitkoru
- License: mit
- Created: 2021-07-28T07:24:24.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2025-05-30T10:36:06.000Z (about 1 year ago)
- Last Synced: 2025-09-10T14:50:46.630Z (9 months ago)
- Language: C#
- Size: 211 KB
- Stars: 2
- Watchers: 4
- Forks: 0
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Sitko.Blazor.ScriptInjector
 
Library for script and css injection to Blazor pages
# Installation
```
dotnet add package Sitko.Blazor.ScriptInjector
```
Register in DI and configure in `Startup.cs`
```c#
services.AddScriptInjector(Configuration);
```
# Usage
Inject `IScriptInjector`
```c#
@inject IScriptInjector _scriptInjector
```
## Inject inline script
```c#
await _scriptInjector.InjectAsync(ScriptInjectRequest.Inline("inline", "console.log('Inline script is executed');"));
```
## Inject script from url
```c#
await _scriptInjector.InjectAsync(ScriptInjectRequest.FromUrl("url", "/script.js"));
```
## Script from resource
Embed script as resource in your `.csproj`
```xml
```
Then inject
```c#
await _scriptInjector.InjectAsync(ScriptInjectRequest.FromResource("resource", GetType().Assembly, "assembly.js"));
```
## Inject inline css
```c#
await _scriptInjector.InjectAsync(CssInjectRequest.Inline("inlinecss", "body{background: blue;}"));
```
## Inject css from url
```c#
await _scriptInjector.InjectAsync(CssInjectRequest.FromUrl("urlcss", "/style.css"));
```
## Css from resource
Embed script as resource in your `.csproj`
```xml
```
Then inject
```c#
await _scriptInjector.InjectAsync(CssInjectRequest.FromResource("resourcecss", GetType().Assembly, "assembly.css"));
```
## Run code after script or css is loaded
Pass callback to `InjectAsync`. For example - chain script load:
```c#
private Task LoadInlineScriptAsync()
{
return _scriptInjector.InjectAsync(ScriptInjectRequest.Inline("inline", "console.log('Inline script is executed');"), LoadUrlScriptAsync);
}
private Task LoadUrlScriptAsync(CancellationToken cancellationToken)
{
return _scriptInjector.InjectAsync(ScriptInjectRequest.FromUrl("url", "/script.js"), LoadResourceScriptAsync, cancellationToken);
}
private Task LoadResourceScriptAsync(CancellationToken cancellationToken)
{
return _scriptInjector.InjectAsync(ScriptInjectRequest.FromResource("resource", GetType().Assembly, "assembly.js"), _ =>
{
// all scripts are loaded
return Task.CompletedTask;
}, cancellationToken);
}
});
```
## Multiple scripts and styles at once
```c#
await _scriptInjector.InjectAsync(new[]
{
ScriptInjectRequest.Inline("inline", "console.log('Inline script is executed');")
ScriptInjectRequest.FromUrl("url", "/script.js"),
ScriptInjectRequest.FromResource("resource", GetType().Assembly, "assembly.js"),
CssInjectRequest.Inline("inlinecss", "body{background: blue;}"),
CssInjectRequest.FromResource("resourcecss", GetType().Assembly, "assembly.css"),
CssInjectRequest.FromUrl("urlcss", "/style.css")
}, _ =>
{
// all scripts are loaded
return Task.CompletedTask;
});
```
## Scripts deduplication
All script requests with same id will be executed only once per scope
```c#
await _scriptInjector.InjectAsync(new[]
{
_scriptInjector.Inline("inline", "console.log('Inline script is executed');"),
_scriptInjector.Inline("inline", "console.log('Inline script 2 is executed');"),
_scriptInjector.Inline("inline", "console.log('Inline script 3 is executed');"),
});
```
In browser console will be only
```
Inline script is executed
```
# Demo
1. Clone repo
2. Go to `apps/Sitko.Blazor.ScriptInjector.Demo`
3. Run `dotnet run`
4. Open [https://localhost:5001/](https://localhost:5001/) in browser