利用C#開發瀏覽器擴展的全過程記錄

Posted on by

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

More

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

到此這篇關於利用C#開發瀏覽器擴展的文章就介紹到這瞭,更多相關C#開發瀏覽器擴展內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

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

推薦閱讀：