Electron应用加载浏览器扩展(Chrome Extension)

1,679 阅读1分钟

本文会介绍如何反编译Electron应用asar文件,在 app.whenReady() 时加载本地已解压的浏览器扩展(Chrome Extension)。

前置环境:Node.js

所用工具:asar

示例Electron应用:wolai

一、前期准备工作

1. 安装node环境

下载地址:nodejs.org/zh-cn/

2. 全局安装asar工具

npm install asar -g

3. 下载并解压浏览器扩展(Chrome Extension)

示例扩展:TurboGeekAnthony/wolai-plus: Chrome Extension example of wolai (github.com)

解压后得到扩展文件夹绝对路径, 示例:C:\xxx\wolai-plus

二、修改Electron应用启动脚本

1. 备份app.asar

复制一份app.asar,重命名为app_bak.asar

万一出现什么意外导致wolai客户端崩溃的话,你还可以还原app.asar文件,而不是顺着网线过来打我。

2. 解压app.asar

示例路径:C:\xxx\wolai

打开终端,执行以下命令

# xxx路径需要自己根据实际路径替换
cd C:\xxx\wolai\resources


# 解压app.asar
asar extract app.asar .\dist

3. 修改app.asar

找到main.js文件,该文件位于上一步骤解压出来的文件夹:.\dist\packages\main\dist\index.cjs

3.1 导入electron.session

在文件头部导入electron.session

const { session } = require("electron");

3.2 在electron app.whenReady() 时,加载Chrome Extension

在文件中查找mainExports$1.initialize(); 所在位置,并在下方插入以下内容:

require$$1$4.app.whenReady().then(() => {
  session.defaultSession
    .loadExtension(
      "C:\xxx\wolai-plus"
    )
    .then(({ id }) => {
      console.log("load extension!");
    });
});

注意:"C:\xxx\wolai-plus" 为扩展解压后的绝对路径,需要注意转义字符 \\ 等同于 \

示意图片

4. 打包app.asar

asar pack .\dist app.asar

打包完成后,重启wolai客户端,你将会看到扩展启动成功