天天看点

blazor wasm开发chrome插件

用blazor(Wasm)开发了一个chrome插件感觉效率挺高的,分享给大家

“WebAssembly是一种用于基于堆栈的虚拟机的二进制指令格式”

blazor wasm开发chrome插件

image

如上图,浏览器在执行js时是会经历 Parser转成语法树->Compiler转成字节码->JIT即时字节码解释执行

因为WebAssembly 模块已经被编译成一种 JavaScript 字节码形式,现代支持 WebAssembly 的 JavaScript 引擎可以在其 JIT 组件中可以直接解释执行!

mono团队把开源跨平台.NET运行时Mono(也是unity3d的运行时)编译成了WebAssembly ,那么开发的.net程序就可以通过这个运行时在浏览器中加载net程序执行。

近日vs2022发布了,blazor的功能得到进一步提升,

支持AOT将.NET代码直接编译为WebAssembly字节码

支持NativeFileReference添加c语言和rust等原生依赖

开发浏览器插件,常见的就是按照插件的这几块api来进行扩展

右键菜单扩展

Backgroud(可以理解为每个插件都有一个后台一直运行的模块)

popup(浏览器右上角点击插件弹出的窗口模块)

contentScript(嵌入到你想要嵌入的网站内执行)

devtools(开发面板扩展模块)

首先基于这个大佬的模板搭建工程

https://github.com/mingyaulee/Blazor.BrowserExtension

基于模板的话会帮你引入哪些包

blazor wasm开发chrome插件

我也躺了很多坑,看看我给大佬提的issue,和大佬一起成长

blazor wasm开发chrome插件
blazor wasm开发chrome插件
blazor wasm开发chrome插件

这里我总结一套非常高效的方案给大家:

Backgroud用csharp写

popup,option等的html不要用balzor写,balzor加载html没有任何优势

contentScript用js写,内嵌到网站的,如果是balzor的话会初始化的时候卡1~2s左右,这个会严重影响体验

这里把BackGround(csharp开发)作为插件后端 html和js作为插件的前端的方式

在BackGround里面写,包括响应事件

用js写,有2种方式来和Backgroud通讯

contentScript中发送消息给BackGround

BackGround注册事件用来接收js发过来的消息

js端

csharp端

目前这种方式有一个需要优化,就是无法在csharp端主动推送消息给js端 给大佬提了issue了,相信很快可以fix https://github.com/mingyaulee/WebExtensions.Net/issues/14

有两种方法:

这里我封装了一个类专门操作

需要用到native的库 https://github.com/SteveSandersonMS/BlazeOrbital/blob/main/BlazeOrbital/ManufacturingHub/Data/e_sqlite3.o

下载下来后放入工程中,然后引入

blazor wasm开发chrome插件

这里还有一个关键

https://github.com/SteveSandersonMS/BlazeOrbital/blob/main/BlazeOrbital/ManufacturingHub/wwwroot/dbstorage.js

下载这个js后放入工程中,这个js是将sqlite和本地的indexdb进行同步的

blazor wasm开发chrome插件

在Program.cs进行注册

blazor wasm开发chrome插件

那么你就可以在Backgroud里面注入并在初始化方法中拿到db上下文

推荐用新的方式,EF写起来更爽更高效,拿到db上下文 就可以很简单的操作插件里面所有用到存储配置等!

这种方式比较适合了解.net生态的人,结合.net的一些库还可以实现很多好玩的功能

excel导出

二维码生成

ajax拦截,转发等

关注公众号一起学习

blazor wasm开发chrome插件

如果您觉得阅读本文对您有帮助,请点一下“推荐”按钮,您的“推荐”将是我最大的写作动力!欢迎各位转载,转载文章之后须在文章页面明显位置给出作者和原文连接,谢谢。