Intro

前段時間聽了 Justin 大佬分享的 Blazor 開發(fā)瀏覽器擴展，覺得很不錯，C# 可以做更多有趣的事情了，

很多需要在服務器端做的事情可能就可以在客戶端里實現(xiàn)了，而且高度可以復用已有的 C# 代碼，而且在瀏覽器里做很多有趣的事情，所以想寫一篇文章和大家分享一下，讓大家知道 C# 也是可以開發(fā)瀏覽器擴展的

BlazorBrowserExtension

Blazor.BrowserExtension 是一個使用 Blazor 來開發(fā)瀏覽器擴展的開源項目，也是我們要介紹的主角，項目地址是: https://github.com/mingyaulee/Blazor.BrowserExtension，其工作方式是 Blazor WebAssembly 模式來代替 JavaScript 來工作，這個項目依托于作者的另外一個項目 https://github.com/mingyaulee/WebExtensions.Net，WebExtensions.Net 這個項目主要是提供了瀏覽器擴展和瀏覽器進行交互的 C# API，而 Blazor.BrowserExtension 項目則是在其基礎之上將瀏覽器擴展的開發(fā)模式和 Blazor 相結合，并且借助于 MS Build 自動化地生成瀏覽器擴展所必需的資源文件，進一步簡化 C# 開發(fā)瀏覽器擴展的上手難度

Get Started

如果想要開始一個創(chuàng)建一個瀏覽器擴展，可以基于項目模板來創(chuàng)建，首先需要安裝一下項目模板，通過下面的命令來安裝模板

dotnet new --install Blazor.BrowserExtension.Template

然后就可以創(chuàng)建項目了，可以使用下面的命令來基于模板創(chuàng)建項目（替換下面的 <ProjectName> 為自己想要使用的項目名稱）

dotnet new browserext --name <ProjectName>

我創(chuàng)建了一個示例項目，名字是 BlazoreWebExtensionDemo

目前項目模板有一個模板參數(shù)，可以通過 -F 來指定項目的 TargetFramework，默認是 net5.0，可以指定為 net6.0 來創(chuàng)建 .NET 6 的項目

之后我們切換到項目目錄下，使用 dotnet build 來構建項目，build 成功之后就可以在項目的 bin 目錄下看到一個 wwwroot 目錄了，這個目錄就包含了瀏覽器插件所需的所有文件，此時我們的瀏覽器插件已經完成了。

接著我們來使用一下我們的瀏覽器擴展，我們需要在瀏覽器擴展程序頁面(chrome 可以直接訪問chrome://extensions/)啟用開發(fā)者模式才能直接加載本地的瀏覽器插件，然后點擊 “加載已解壓的擴展程序”，然后選擇我們上面的 wwwroot 目錄就可以加載我們的插件了

BlazoreWebExtensionDemo 就是我們前面創(chuàng)建的瀏覽器插件項目，加載好之后，默認項目的行為是會打開一個 Tab ,如下圖所示：

我們也可以通過 VS 來創(chuàng)建項目，可以參考作者提供一個 Gif 演示：

VS demo

Structure

項目結構如下：

可以看到這就是一個 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: 和瀏覽器擴展交互的一些 js
• WebExtensionsScripts：WebExtensions 用來和 js 交互的一些 js
• framework：Blazor 項目依賴，包括依賴的dotnet webassembly 環(huán)境和一些程序集
  

Further

如果想要做進一步的開發(fā)，需要怎么做呢？

如果要在代碼里使用瀏覽器擴展的插件，只需要注入 IWebExtensionsApi 即可，這是在自動生成的 Program.cs 中 AddBrowserExtensionService 方法中注冊的，詳細可以參考: https://github.com/mingyaulee/Blazor.BrowserExtension/blob/main/src/Blazor.BrowserExtension/Extensions/ServiceCollectionExtensions.cs#L25

builder.Services.AddBrowserExtensionServices(options =>
{
    options.ProjectNamespace = typeof(Program).Namespace;
});

具體的瀏覽器擴展 API 可以參考 MDN 和 Chrome 瀏覽器擴展的 API 文檔以及 Google 提供的 samples https://github.com/GoogleChrome/chrome-extensions-samples

我也嘗試做了一個簡單的瀏覽器插件，做了一個簡單的 todo 提醒，只用到了一個 notification 的 API，數(shù)據的管理是基于 EF Core In Memory 來實現(xiàn)的，和之前的 API 實現(xiàn)了一些簡單的代碼共享，有需要的可以參考 https://github.com/WeihanLi/SparkTodo/tree/master/SparkTodo.WebExtension，功能演示可以參考下圖：

SparkTodo Web Extension

More

可以關注支持一下這個基于 Blazor 的瀏覽器擴展項目 https://github.com/mingyaulee/Blazor.BrowserExtension

如果想要開發(fā)一個自己的瀏覽器插件，很多時候可能只是要熟悉一下瀏覽器擴展的 API 怎么用，可以參考 Google 提供的一系列 chrome extension 的示例，API 基本上應該都是一樣的，而且 C# 的 API 是強類型的，可能會更加友好和方便維護，一些在服務器端做的事情可以轉移到客戶端去做了，可以使用 C# 在瀏覽器端實現(xiàn)更多有趣的事情了。快去用 C# 開發(fā)瀏覽器擴展吧~

Justin 大佬最近在做的瀏覽器擴展項目地址是 https://github.com/newbe36524/Amazing-Favorites，感興趣的可以關注一下，另外大佬之前的分享示例代碼可以參考https://github.com/newbe36524/Newbe.Demo/tree/master/src/BlogDemos/Newbe.Blazor。

到此這篇關于利用C#開發(fā)瀏覽器擴展的文章就介紹到這了,更多相關C#開發(fā)瀏覽器擴展內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

References

• https://github.com/mingyaulee/Blazor.BrowserExtension
• https://github.com/newbe36524/Amazing-Favorites
• https://github.com/mingyaulee/WebExtensions.Net
• https://github.com/WeihanLi/SparkTodo/tree/master/SparkTodo.WebExtension
• https://github.com/WeihanLi/SamplesInPractice/tree/master/BlazorSample/BlazorWebExtensionDemo
• https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Build_a_cross_browser_extension
• https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions
• Chrome Extensions API Reference
• https://github.com/GoogleChrome/chrome-extensions-samples

最新評論