searchusermenu
  • 发布文章
  • 消息中心
点赞
收藏
评论
分享
原创

在使用Electron开发时巧用浏览器插件

2024-06-12 08:11:38
32
0

1、概述

在网页应用开发过程中,不少开发者会借助浏览器提供的插件进行应用的调试,以提高软件开发效率。而集成了Chromium内核的Electron框架,也可以通过下述步骤,在开始时启用浏览器插件,帮助开发者获得跟网页应用开发相同的开发体验。

2、步骤

Electron 只支持加载未打包的扩展 ,即不能使用 .crx 文件,所以需要找到浏览器中插件的安装位置。

以Windows操作系统为例,谷歌浏览器会将扩展程序安装在以下目录:

%LOCALAPPDATA%\\Google\\Chrome\\User Data\\Default\\Extensions

在这个文件夹下,是以扩展程序ID命名的子文件夹,如下图
屏幕截图 2024-06-11 180738.png

Electron移除了以下API:
BrowserWindow.addDevToolsExtension(path)
但是新增了以下API:
ses.loadextension
可以让开发者启用插件

官方文档中提供了以下调用实例:
const { session } = require('electron') session.defaultSession.loadExtension('path/to/unpacked/extension').then(({ id }) => { // ... })

在开发过程中,建议使用NodeJs的能力,对插件文件夹进行遍历操作,对遍历的结果进行loadExtension的调用。

3、MacOS操作系统的支持

针对MacOs平台:在该操作系统上,谷歌浏览器会将扩展程序安装在以下目录:

~/Library/Application Support/Google/Chrome/Default/Extensions
可以使用步骤二所述的方法,加载浏览器插件用于开发调试

0条评论
作者已关闭评论
练****东
1文章数
0粉丝数
练****东
1 文章 | 0 粉丝
练****东
1文章数
0粉丝数
练****东
1 文章 | 0 粉丝
原创

在使用Electron开发时巧用浏览器插件

2024-06-12 08:11:38
32
0

1、概述

在网页应用开发过程中,不少开发者会借助浏览器提供的插件进行应用的调试,以提高软件开发效率。而集成了Chromium内核的Electron框架,也可以通过下述步骤,在开始时启用浏览器插件,帮助开发者获得跟网页应用开发相同的开发体验。

2、步骤

Electron 只支持加载未打包的扩展 ,即不能使用 .crx 文件,所以需要找到浏览器中插件的安装位置。

以Windows操作系统为例,谷歌浏览器会将扩展程序安装在以下目录:

%LOCALAPPDATA%\\Google\\Chrome\\User Data\\Default\\Extensions

在这个文件夹下,是以扩展程序ID命名的子文件夹,如下图
屏幕截图 2024-06-11 180738.png

Electron移除了以下API:
BrowserWindow.addDevToolsExtension(path)
但是新增了以下API:
ses.loadextension
可以让开发者启用插件

官方文档中提供了以下调用实例:
const { session } = require('electron') session.defaultSession.loadExtension('path/to/unpacked/extension').then(({ id }) => { // ... })

在开发过程中,建议使用NodeJs的能力,对插件文件夹进行遍历操作,对遍历的结果进行loadExtension的调用。

3、MacOS操作系统的支持

针对MacOs平台:在该操作系统上,谷歌浏览器会将扩展程序安装在以下目录:

~/Library/Application Support/Google/Chrome/Default/Extensions
可以使用步骤二所述的方法,加载浏览器插件用于开发调试

文章来自个人专栏
Electron开发
1 文章 | 1 订阅
0条评论
作者已关闭评论
作者已关闭评论
0
0