Electron 集成谷歌扩展实现原理

背景

目前谷歌扩展有 50W 之多,覆盖面比较广,而 Electron 又是基于谷歌浏览器内核开发的,如果将两者结合,那么就能大大节省很多开发时间,开发出来的客户端功能却更加丰富,不过 Electron 并没有完美支持谷歌扩展,尤其是谷歌扩展 MV3 版本中提供的大量的 API,Electron 本身都是不支持的,这就给开发者一种误导,Electron 不支持 MV3 的扩展。

原理分析

  1. 谷歌扩展的 API 就是一些权限,这些权限就是客户端的权限,然后再把这些权限转移给扩展开发者;

  2. 再来看小程序的实现,就是将微信能够获取到的相册,图片,视频,摄像头等手机所能获取到的权限转移给 html5 网页,通过注入一个变量 wx.xxx 的方式,提供了大量 api,而底层通过进程间通信,例如 postmessage 来实现数据的传递以及事件的传递;

  3. 再看,如果我们自己想用 html5 开发安卓 APP,并且想让 html5 按钮调用手机相册,那么我们就提供一个对象,该对象有一个函数可以拉起手机相册,并获取手机相册的照片并返回 base64 数据,那么我们把这个对象注入到 webview 里面去,webview 调用这个对象的这个函数时,就等同于调用安卓下的 api 接口,实现微信小程序的功能。

  4. 综上所述,谷歌扩展,就是用谷歌浏览器操作 windows 或者 mac,本身已经获得了一些权限,同时还把这些权限暴露给谷歌扩展,实现了更丰富的网页操作过程。

实现原理

  1. Electron 本身就是一个客户端,本身就能拿到各种桌面端权限,同时又能与网页之间通信,如使用 preload.js 进行通信,这就完成了网页与 Electron 进程之间的事件传递和数据传递,于是当扩展在网页中调用一些 API,例如 tabs,storage,cookie,download,notifications 时,你只需要重写这些对象里面的函数,并且将这些函数的动作和行为传递给 Electron,实现异步的事件传递,那么就变相地兼容了这些扩展。

代码案例

【未完待续】

相关推荐
爱敲点代码的小哥几秒前
C#视觉模板匹配与动态绘制实战(绘制和保存,加载tb块,处理vpp脚本的方式)
前端·javascript·信息可视化
南风知我意95720 分钟前
【前端面试3】初中级难度
前端·javascript·面试
霍理迪24 分钟前
JS作用域与预解析
开发语言·前端·javascript
切糕师学AI28 分钟前
.NET Core Web 中的健康检查端点(Health Check Endpoint)
前端·kubernetes·.netcore
蓉妹妹33 分钟前
在React中使用Scroll嵌套Scroll,出现里面Scroll滚动条超出高度却滚动没反应的问题,解决方案添加nestedScrollEnabled
javascript·react native·react.js
rosmis1 小时前
地铁病害检测系统软件改进记录-2-02
开发语言·前端·javascript
css趣多多1 小时前
解决ui组件flex1容器底部被撑开的问题
前端
乔江seven1 小时前
【python轻量级Web框架 Flask 】2 构建稳健 API:集成 MySQL 参数化查询与 DBUtils 连接池
前端·python·mysql·flask·web
Alaaaaaaan1 小时前
[DevOps]使用github-action工具部署docker容器(实现提交代码一键推送部署到服务器)
服务器·前端·docker·容器·github
摘星编程2 小时前
在OpenHarmony上用React Native:Spinner自定义样式
javascript·react native·react.js