利用C#开发浏览器扩展的全过程记录

 更新时间:2021年07月09日 10:37:55   作者:WeihanLi  
做web开发的同学,经常会用到各种chrome浏览器插件,那么我们寄几怎么开发一个插件呢(其实是浏览器扩展)?这篇文章主要给大家介绍了关于利用C#开发浏览器扩展的相关资料,需要的朋友可以参考下

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#开发浏览器扩展内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

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

相关文章

  • C#常用知识点简单回顾(有图有真相)

    C#常用知识点简单回顾(有图有真相)

    C#知识点记录编程的点点滴滴,本文整理了一些(传值调用与引用调用/打印三角形/递归求阶乘/多态性..等等),感兴趣的朋友可以了解下的,不要走开(有图有真相)
    2013-01-01
  • WinForm实现页面按钮定时隐藏功能

    WinForm实现页面按钮定时隐藏功能

    这篇文章主要介绍了WinForm实现页面按钮定时隐藏功能,结合实例形式分析了WinForm基于定时器的页面控件属性动态操作相关实现技巧,需要的朋友可以参考下
    2017-05-05
  • C#中StringBuilder类的使用总结

    C#中StringBuilder类的使用总结

    本篇文章主要是对C#中StringBuilder类的使用方法进行了详细的总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-01-01
  • 如何使用C#扫描并读取图片中的文字

    如何使用C#扫描并读取图片中的文字

    本文介绍如何通过C# 程序来扫描并读取图片中的文字,这里以创建一个.Net Core程序为例。下面是具体步骤,供参考。有此需求的朋友可以了解下
    2021-06-06
  • DataGridView自定义单元格表示值、Error图标显示的方法介绍

    DataGridView自定义单元格表示值、Error图标显示的方法介绍

    这篇文章介绍了DataGridView自定义单元格表示值、Error图标显示的方法,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-02-02
  • C#中多态性的实现

    C#中多态性的实现

    这篇文章主要介绍了C#中多态性的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-02-02
  • C# 6.0的属性(Property)的语法与初始值详解

    C# 6.0的属性(Property)的语法与初始值详解

    下面小编就为大家带来一篇C# 6.0的属性(Property)的语法与初始值详解。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • .NET垃圾回收器(GC)原理浅析

    .NET垃圾回收器(GC)原理浅析

    这篇文章主要介绍了.NET垃圾回收器(GC)原理浅析,本文先是讲解了一些基础知识如托管堆(Managed Heap)、CPU寄存器(CPU Register)、根(Roots)等,然后讲解了垃圾回收的基本原理、算法等,需要的朋友可以参考下
    2015-01-01
  • win7中C#的winForm编程使用savefiledialog不能弹出保存窗体的解决方法

    win7中C#的winForm编程使用savefiledialog不能弹出保存窗体的解决方法

    这篇文章主要介绍了win7中C#的winForm编程使用savefiledialog不能弹出保存窗体的解决方法,涉及针对线程的调用问题,是比较实用的技巧,需要的朋友可以参考下
    2014-12-12
  • Unity后处理效果之边角压暗

    Unity后处理效果之边角压暗

    这篇文章主要为大家详细介绍了Unity后处理效果之边角压暗,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-03-03

最新评论