當前位置：首頁 > 编程语言 > C# >内容正文

C#

使用 C# 开发浏览器扩展

發布時間：2023/12/4 C# 30 豆豆

生活随笔收集整理的這篇文章主要介紹了使用 C# 开发浏览器扩展小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

使用 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