使用 C Sharp 開發瀏覽器擴展

使用 C# + Blazor 開發瀏覽器擴展

Intro

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

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

BlazorBrowserExtension

Blazor.BrowserExtension 是一個使用 Blazor 來開發瀏覽器擴展的開源項目，也是我們要介紹的主角，項目地址是: https://github.com/mingyaulee/Blazor.BrowserExtension，其工作方式是 Blazor WebAssembly 模式來代替 JavaScript 來工作，這個項目依託於作者的另外一個項目 https://github.com/mingyaulee/WebExtensions.Net，WebExtensions.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 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 環境和一些程序集

Further

如果想要做進一步的開發，需要怎麼做呢？

如果要在代碼裏使用瀏覽器擴展的插件，只需要注入 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，數據的管理是基於 EF Core In Memory 來實現的，和之前的 API 實現了一些簡單的代碼共享，有需要的可以參考 https://github.com/WeihanLi/SparkTodo/tree/master/SparkTodo.WebExtension，功能演示可以參考下圖：

SparkTodo Web Extension

可以關注支持一下這個基於 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。

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

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/lL-Tdj_Ou_EP0tV3xjrW7g