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

目录
  • Intro
  • BlazorBrowserExtension
  • Get Started
  • Structure
  • Further
  • More
  • References

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
(0)

相关推荐

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

    目录 Intro BlazorBrowserExtension Get Started Structure Further More References Intro 前段时间听了 Justin 大佬分享的 Blazor 开发浏览器扩展,觉得很不错,C# 可以做更多有趣的事情了, 很多需要在服务器端做的事情可能就可以在客户端里实现了,而且高度可以复用已有的 C# 代码,而且在浏览器里做很多有趣的事情,所以想写一篇文章和大家分享一下,让大家知道 C# 也是可以开发浏览器扩展的 BlazorBrow

  • Python利用splinter实现浏览器自动化操作方法

    利用Splinter开发浏览器自动化操作,编写代码比较简单. 案例一: from splinter import Browser with Browser() as browser: # Visit URL url = "http://www.google.com" browser.visit(url) browser.fill('q', 'splinter - python acceptance testing for web applications') # Find and cl

  • 谷歌Chrome浏览器扩展程序开发小记

    根据公司的规定,每月八小时,弹性工作制.所以大家平时来的不太准时,如果有事,下班也就早些回去了.所以一个月下来工作时间可能不够,但是公司的考勤日历是这样的: 除了请假和法定节假日外,其他样式显示都是一样的,每次都要一个个估算这个月的大概工作时间,十分不方便.后来看到公司有人在用一个Chrome扩展程序,可以计算出一个月的工作时间,但是我觉得还是没有看到我想看的东西,因为除了每个月的累计工作时间外,我还想看到:平均每天工作时长.每一天的工作时长.20点以后的天数(20点以后下班的可以报销晚饭的,哈

  • C# 利用Selenium实现浏览器自动化操作的示例代码

    概述 Selenium是一款免费的分布式的自动化测试工具,支持多种开发语言,无论是C. java.ruby.python.或是C# ,你都可以通过selenium完成自动化测试.本文以一个简单的小例子,简述C# 利用Selenium进行浏览器的模拟操作,仅供学习分享使用,如有不足之处,还请指正. 涉及知识点 要实现本例的功能,除了要掌握Html ,JavaScript,CSS等基础知识,还涉及以下知识点: log4net:主要用于日志的记录和存储,本例采用log4net进行日志记录,便于过程跟踪

  • 微信小程序开发篇之踩坑记录

    最近参与开发了公司的第一款小程序,开发体验基本类似于基于webview的混合式开发,可以调用官方强大的api,但也有一些坑或者说不习惯的地方.这篇文章从实用性出发,记录了开发过程中的一些问题: 1. 样式优先级混乱 在使用button组件时,发现在class中设置width不生效,下面贴上代码: .my-button{ width: 140rpx; height: 60rpx; line-height: 60rpx; padding: 0; } 经过微信调试工具排查后,发现user agent的

  • 利用iOS开发实现翻转扑克牌动画的方法

    前言 本文主要给大家介绍的关于利用iOS开发实现翻转扑克牌动画的方法,分享出来供大家参考学习,下面话不多说,来一起看看详细的介绍吧. 动画效果 实现原理 实现原理就是创建三个扑克牌pockerView , 先在扑克牌上添加一个imageview,作为牌的背面.然后实现翻转动画,在翻转的时候将imageview移除,添加另一个imageview作为正面. 核心代码: 方法一: 翻转动画,内部实现还是方法二 + (void)transitionWithView:(UIView *)view dura

  • 利用XML开发留言板简单的例子

    XML是一种基于文本格式的元标记语言,它注重对数据结构和数据意义的描述,实现了数据内容和显示样式的分离(xml+xsl),而且是与平台无关的. 由于XML注重数据内容的描述,因而,对于数据的检索非常有意义,我们不会再象HTML那样,检索出与我们要求无关的信息. 另一方面,XML文件是数据的载体,利用XML作为数据库,不需要访问任何数据库系统,我们可以使用任意WEB技术来显示我们的数据,比如HTML,FlashMX 等. 由于世界各大计算机公司的积极参与,XML正日益成为基于互联网的数据格式新一代

  • 最锋利的Visual Studio Web开发工具扩展:Web Essentials使用详解

    首先,从Extension Manager里安装:最新版本是19号发布的2.5版 然后重启你的VS开发环境,就可以使用它提供的方便功能了. Web Essentials对CSS.JavaScript和HTML都提供了很多快捷的功能支持,具体列表如下: CSS 即时预览Live Web Preview 每次修改的时候,都可以使用CTRL+ALT+Enter快捷键或者点击方案右键上的Live Web Preview选项来即时预览你修改的页面,每次修改完 HTML或者相应的CSS, Ctrl+S保存以

  • Go语言开发浏览器视频流rtsp转webrtc播放

    目录 1. 前言 2. rtsp转webRTC 3. 初步测试结果 4. 结合我们之前的onvif+gSoap+cgo的方案做修改 4.1 go后端修改 4.2 前端修改 4.3 项目结构和编译运行 4.4 结果展示 5. 最后 1. 前言 前面我们测试了rtsp转hls方式,发现延迟比较大,不太适合我们的使用需求.接下来我们试一下webrtc的方式看下使用情况. 综合考虑下来,我们最好能找到一个go作为后端,前端兼容性较好的前后端方案来处理webrtc,这样我们就可以结合我们之前的cgo+on

  • 利用uniapp开发APP时的调试/安卓打包等详解

    目录 一.调试 二.打包 总结 一.调试 1.先用数据线连接电脑和手机,选择“文件传输”, 2.打开开发者模式,华为手机举列-->设置-->关于手机-->版本号,多次连续点击“版本号”,就会提示已打开 开发者模式 3.华为手机举列-->设置-->系统和更新-->开发人员选项-->打开 USB调试,进入调试模式 4.在Hbuild中打开项目,选择 运行-->运行到手机或模拟器,当前使用uniapp开发的APP就可以运行到手机了 注:第一次运行时会自动给手机下载

随机推荐