利用C#開發(fā)瀏覽器擴(kuò)展的全過程記錄

更新時(shí)間：2021年07月09日 10:37:55 作者：WeihanLi

做web開發(fā)的同學(xué),經(jīng)常會(huì)用到各種chrome瀏覽器插件,那么我們寄幾怎么開發(fā)一個(gè)插件呢（其實(shí)是瀏覽器擴(kuò)展）？這篇文章主要給大家介紹了關(guān)于利用C#開發(fā)瀏覽器擴(kuò)展的相關(guān)資料,需要的朋友可以參考下

Intro

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

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

BlazorBrowserExtension

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

Get Started

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

dotnet new --install Blazor.BrowserExtension.Template

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

dotnet new browserext --name <ProjectName>

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

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

之后我們切換到項(xiàng)目目錄下，使用 dotnet build 來構(gòu)建項(xiàng)目，build 成功之后就可以在項(xiàng)目的 bin 目錄下看到一個(gè) wwwroot 目錄了，這個(gè)目錄就包含了瀏覽器插件所需的所有文件，此時(shí)我們的瀏覽器插件已經(jīng)完成了。

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

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

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

VS demo

Structure

項(xiàng)目結(jié)構(gòu)如下：

可以看到這就是一個(gè) Blazor 項(xiàng)目的項(xiàng)目結(jié)構(gòu)，和普通的 Blazor 項(xiàng)目并沒有太大的差別

項(xiàng)目模板會(huì)自動(dòng)生成幾個(gè) Page，可以根據(jù)自己需要進(jìn)行修改

background(后臺頁面，通常是后臺邏輯)
index(默認(rèn)入口)
options（插件上右鍵時(shí)的“選項(xiàng)”對應(yīng)的頁面）
popup（插件單擊時(shí)顯示的 Popup 內(nèi)容）

然后就是 wwwroot 目錄下的 manifest.json 文件，這個(gè)文件定義了插件的名稱、介紹以及插件所需要的權(quán)限以及頁面配置等信息，關(guān)于 manifest.json 的詳細(xì)信息可以參考文檔：https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json

運(yùn)行 dotnet build 之后的結(jié)構(gòu)下：

BrowserExtensionScripts: 和瀏覽器擴(kuò)展交互的一些 js
WebExtensionsScripts：WebExtensions 用來和 js 交互的一些 js
framework：Blazor 項(xiàng)目依賴，包括依賴的dotnet webassembly 環(huán)境和一些程序集

Further

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

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

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

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

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

SparkTodo Web Extension

可以關(guān)注支持一下這個(gè)基于 Blazor 的瀏覽器擴(kuò)展項(xiàng)目 https://github.com/mingyaulee/Blazor.BrowserExtension

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

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

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

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