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,实现异步的事件传递,那么就变相地兼容了这些扩展。

代码案例

【未完待续】

相关推荐
We་ct1 分钟前
LeetCode 14. 最长公共前缀:两种解法+优化思路全解析
前端·算法·leetcode·typescript
遗憾随她而去.5 分钟前
前端检查内存泄露
前端
HIT_Weston12 分钟前
109、【Ubuntu】【Hugo】搭建私人博客:搜索功能(五)
linux·javascript·ubuntu
一个处女座的程序猿O(∩_∩)O13 分钟前
Next.js 与 React 深度解析:为什么选择 Next.js?
开发语言·javascript·react.js
换日线°19 分钟前
微信小程序对接位置服务(腾讯、高德)完成路径规划
前端·微信小程序·vue
广州华水科技29 分钟前
如何通过单北斗变形监测系统提升水库安全监测效果?
前端
霍理迪38 分钟前
JS对象与函数初相识
开发语言·javascript·ecmascript
u13013041 分钟前
深入理解 M3U8 与 HLS 协议:从原理到实战解析
前端·音视频开发·流媒体·hls·m3u8
_OP_CHEN44 分钟前
【前端开发之CSS】(二)CSS 选择器终极指南:从基础到进阶,精准拿捏页面元素!
前端·css·html·网页开发·css选择器
ヤ鬧鬧o.1 小时前
HTML安全密码备忘录
前端·javascript·css·html·css3