邯郸制作网站的公司,公司起名大全免费版,网站推广服务网址,别人做的网站使用 C# Blazor 开发浏览器扩展Intro前段时间听了 Justin 大佬分享的 Blazor 开发浏览器扩展#xff0c;觉得很不错#xff0c;C# 可以做更多有趣的事情了#xff0c;很多需要在服务器端做的事情可能就可以在客户端里实现了#xff0c;而且高度可以复用已有的 C# 代码 Blazor 开发浏览器扩展Intro前段时间听了 Justin 大佬分享的 Blazor 开发浏览器扩展觉得很不错C# 可以做更多有趣的事情了很多需要在服务器端做的事情可能就可以在客户端里实现了而且高度可以复用已有的 C# 代码而且在浏览器里做很多有趣的事情所以想写一篇文章和大家分享一下让大家知道 C# 也是可以开发浏览器扩展的BlazorBrowserExtensionBlazor.BrowserExtension 是一个使用 Blazor 来开发浏览器扩展的开源项目也是我们要介绍的主角项目地址是: https://github.com/mingyaulee/Blazor.BrowserExtension其工作方式是 Blazor WebAssembly 模式来代替 JavaScript 来工作这个项目依托于作者的另外一个项目 https://github.com/mingyaulee/WebExtensions.NetWebExtensions.Net 这个项目主要是提供了浏览器扩展和浏览器进行交互的 C# API而 Blazor.BrowserExtension 项目则是在其基础之上将浏览器扩展的开发模式和 Blazor 相结合并且借助于 MS Build 自动化地生成浏览器扩展所必需的资源文件进一步简化 C# 开发浏览器扩展的上手难度Get Started如果想要开始一个创建一个浏览器扩展可以基于项目模板来创建首先需要安装一下项目模板通过下面的命令来安装模板dotnet new --install Blazor.BrowserExtension.Template
然后就可以创建项目了可以使用下面的命令来基于模板创建项目替换下面的 ProjectName 为自己想要使用的项目名称dotnet new browserext --name ProjectName
我创建了一个示例项目名字是 BlazoreWebExtensionDemo目前项目模板有一个模板参数可以通过 -F 来指定项目的 TargetFramework默认是 net5.0可以指定为 net6.0 来创建 .NET 6 的项目之后我们切换到项目目录下使用 dotnet build 来构建项目build 成功之后就可以在项目的 bin 目录下看到一个 wwwroot 目录了这个目录就包含了浏览器插件所需的所有文件此时我们的浏览器插件已经完成了。接着我们来使用一下我们的浏览器扩展我们需要在浏览器扩展程序页面(chrome 可以直接访问chrome://extensions/)启用开发者模式才能直接加载本地的浏览器插件然后点击 “加载已解压的扩展程序”然后选择我们上面的 wwwroot 目录就可以加载我们的插件了BlazoreWebExtensionDemo 就是我们前面创建的浏览器插件项目加载好之后默认项目的行为是会打开一个 Tab ,如下图所示我们也可以通过 VS 来创建项目可以参考作者提供一个 Gif 演示VS demoStructure项目结构如下可以看到这就是一个 Blazor 项目的项目结构和普通的 Blazor 项目并没有太大的差别项目模板会自动生成几个 Page可以根据自己需要进行修改background(后台页面通常是后台逻辑)index(默认入口)options插件上右键时的“选项”对应的页面popup插件单击时显示的 Popup 内容然后就是 wwwroot 目录下的 manifest.json 文件这个文件定义了插件的名称、介绍以及插件所需要的权限以及页面配置等信息关于 manifest.json 的详细信息可以参考文档https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json运行 dotnet build 之后的结构下BrowserExtensionScripts: 和浏览器扩展交互的一些 jsWebExtensionsScriptsWebExtensions 用来和 js 交互的一些 jsframeworkBlazor 项目依赖包括依赖的dotnet webassembly 环境和一些程序集Further如果想要做进一步的开发需要怎么做呢如果要在代码里使用浏览器扩展的插件只需要注入 IWebExtensionsApi 即可这是在自动生成的 Program.cs 中 AddBrowserExtensionService 方法中注册的详细可以参考: https://github.com/mingyaulee/Blazor.BrowserExtension/blob/main/src/Blazor.BrowserExtension/Extensions/ServiceCollectionExtensions.cs#L25builder.Services.AddBrowserExtensionServices(options
{options.ProjectNamespace typeof(Program).Namespace;
});
具体的浏览器扩展 API 可以参考 MDN 和 Chrome 浏览器扩展的 API 文档以及 Google 提供的 samples https://github.com/GoogleChrome/chrome-extensions-samples我也尝试做了一个简单的浏览器插件做了一个简单的 todo 提醒只用到了一个 notification 的 API数据的管理是基于 EF Core In Memory 来实现的和之前的 API 实现了一些简单的代码共享有需要的可以参考 https://github.com/WeihanLi/SparkTodo/tree/master/SparkTodo.WebExtension功能演示可以参考下图SparkTodo Web ExtensionMore可以关注支持一下这个基于 Blazor 的浏览器扩展项目 https://github.com/mingyaulee/Blazor.BrowserExtension如果想要开发一个自己的浏览器插件很多时候可能只是要熟悉一下浏览器扩展的 API 怎么用可以参考 Google 提供的一系列 chrome extension 的示例API 基本上应该都是一样的而且 C# 的 API 是强类型的可能会更加友好和方便维护一些在服务器端做的事情可以转移到客户端去做了可以使用 C# 在浏览器端实现更多有趣的事情了。快去用 C# 开发浏览器扩展吧~Justin 大佬最近在做的浏览器扩展项目地址是 https://github.com/newbe36524/Amazing-Favorites感兴趣的可以关注一下另外大佬之前的分享示例代码可以参考https://github.com/newbe36524/Newbe.Demo/tree/master/src/BlogDemos/Newbe.Blazor。Referenceshttps://github.com/mingyaulee/Blazor.BrowserExtensionhttps://github.com/newbe36524/Amazing-Favoriteshttps://github.com/mingyaulee/WebExtensions.Nethttps://github.com/WeihanLi/SparkTodo/tree/master/SparkTodo.WebExtensionhttps://github.com/WeihanLi/SamplesInPractice/tree/master/BlazorSample/BlazorWebExtensionDemohttps://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Build_a_cross_browser_extensionhttps://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensionsChrome Extensions API Referencehttps://github.com/GoogleChrome/chrome-extensions-samples
