欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2021年07月09日 10:37:55   作者：WeihanLi  
做web開發(fā)的同學(xué),經(jīng)常會用到各種chrome瀏覽器插件,那么我們寄幾怎么開發(fā)一個插件呢（其實是瀏覽器擴(kuò)展）？這篇文章主要給大家介紹了關(guān)于利用C#開發(fā)瀏覽器擴(kuò)展的相關(guān)資料,需要的朋友可以參考下

Intro

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

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

BlazorBrowserExtension

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

Get Started

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

dotnet new --install Blazor.BrowserExtension.Template

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

dotnet new browserext --name <ProjectName>

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

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

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

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


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

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


VS demo

Structure

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


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

項目模板會自動生成幾個 Page，可以根據(jù)自己需要進(jìn)行修改

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

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

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


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

Further

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

如果要在代碼里使用瀏覽器擴(kuò)展的插件，只需要注入 IWebExtensionsApi 即可，這是在自動生成的 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

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


SparkTodo Web Extension

More

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

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

Justin 大佬最近在做的瀏覽器擴(kuò)展項目地址是 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

相關(guān)文章

  • C# 執(zhí)行CMD命令并接收返回結(jié)果的操作方式

    C# 執(zhí)行CMD命令并接收返回結(jié)果的操作方式

    這篇文章主要介紹了C# 執(zhí)行CMD命令并接收返回結(jié)果的操作方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2021-04-04
  • unity實現(xiàn)流光效果

    unity實現(xiàn)流光效果

    這篇文章主要為大家詳細(xì)介紹了unity實現(xiàn)流光效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2020-04-04
  • C#實現(xiàn)順序棧和鏈棧的代碼實例

    C#實現(xiàn)順序棧和鏈棧的代碼實例

    今天小編就為大家分享一篇關(guān)于的C#實現(xiàn)順序棧和鏈棧的代碼實例，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧
    2018-10-10
  • C#?VB.NET?將Html轉(zhuǎn)為Excel

    C#?VB.NET?將Html轉(zhuǎn)為Excel

    本文介紹通過C#和VB.NET代碼展示將Html轉(zhuǎn)為Excel文檔的方法。文中的示例代碼講解詳細(xì)，對我們學(xué)習(xí)C#有一定幫助，感興趣的小伙伴可以了解一下
    2022-03-03
  • c# 實現(xiàn)KMP算法的示例代碼

    c# 實現(xiàn)KMP算法的示例代碼

    這篇文章主要介紹了c# 實現(xiàn)KMP算法的示例代碼，幫助大家更好的理解和使用c#，感興趣的朋友可以了解下
    2020-11-11
  • C#多線程與異步的區(qū)別詳解

    C#多線程與異步的區(qū)別詳解

    多線程和異步操作兩者都可以達(dá)到避免調(diào)用線程阻塞的目的，從而提高軟件的可響應(yīng)性。甚至有些時候我們就認(rèn)為多線程和異步操作是等同的概念。但是，多線程和異步操作還是有一些區(qū)別的。而這些區(qū)別造成了使用多線程和異步操作的時機(jī)的區(qū)別
    2017-06-06
  • C#創(chuàng)建一個可快速重復(fù)使用的項目模板(詳細(xì)過程)

    C#創(chuàng)建一個可快速重復(fù)使用的項目模板(詳細(xì)過程)

    這篇文章主要介紹了C#如何創(chuàng)建一個可快速重復(fù)使用的項目模板今天給大家介紹的是基于官方的cli donet new 命令創(chuàng)建自己的項目模板,需要的朋友可以參考下
    2024-06-06
  • RabbitMQ的配置與安裝教程全紀(jì)錄

    RabbitMQ的配置與安裝教程全紀(jì)錄

    這篇文章主要給大家介紹了關(guān)于RabbitMQ的配置與安裝的相關(guān)資料，文中通過示例代碼以及圖文介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2018-07-07
  • 小菜編程成長記（一 面試受挫——代碼無錯就是好？）

    小菜編程成長記（一 面試受挫——代碼無錯就是好？）

    小菜編程成長記（一 面試受挫——代碼無錯就是好？）...
    2006-10-10
  • C#通過子窗體刷新父窗體的實現(xiàn)方法

    C#通過子窗體刷新父窗體的實現(xiàn)方法

    在一些軟件,比如,進(jìn)銷存管理系統(tǒng)中添加銷售單信息時,每個銷售單都可能對應(yīng)多種商品,而且在向銷售單中添加商品時,一般都是在新彈出的窗體中選擇商品,這時就涉及通過子窗體刷新父窗體的問題,本文給大家介紹了C#通過子窗體刷新父窗體的實現(xiàn)方法,需要的朋友可以參考下
    2024-04-04

最新評論