解锁微信新玩法：Electronic WeChat插件开发实战指南

云云乐Lynn

1019人浏览 · 2025-09-13 00:17:32

云云乐Lynn · 2025-09-13 00:17:32 发布

解锁微信新玩法：Electronic WeChat插件开发实战指南

【免费下载链接】electronic-wechat :speech_balloon: A better WeChat on macOS and Linux. Built with Electron by Zhongyi Tong. 项目地址: https://gitcode.com/gh_mirrors/el/electronic-wechat

你是否曾因微信客户端功能有限而感到束手束脚？想阻止消息撤回却找不到设置入口？希望一键分享文章到更多平台？Electronic WeChat（基于Electron构建的第三方微信客户端）为你打开了自定义大门。本文将带你从零开始开发插件，30分钟内打造专属功能，让微信体验彻底升级。

为什么选择Electronic WeChat插件开发

Electronic WeChat作为开源项目，通过模块化架构提供了丰富的扩展可能。不同于官方客户端的封闭性，其插件系统允许你：

深度定制交互逻辑：如阻止消息撤回功能通过拦截API请求实现
扩展界面元素：参考@提及功能添加自定义交互组件
整合第三方服务：类似分享菜单对接外部平台

项目核心优势在于Electron框架的跨平台特性和Node.js生态的丰富资源。通过分析项目架构，我们可以看到插件系统已内置基础支持：

// 微信窗口配置中的插件支持
webPreferences: {
  javascript: true,
  plugins: true,  // 启用插件支持
  nodeIntegration: false,
  preload: path.join(__dirname, '../../inject/preload.js')
}

开发环境搭建

准备工作

首先克隆项目仓库并安装依赖：

# 克隆代码仓库
git clone https://gitcode.com/gh_mirrors/el/electronic-wechat.git
cd electronic-wechat

# 安装依赖
npm install

项目结构中与插件开发相关的核心目录：

注入脚本：src/inject/ - 包含DOM操作和API拦截逻辑
窗口控制器：src/windows/controllers/ - 管理窗口生命周期
配置文件：config.json - 存储插件相关设置

开发工具链

代码编辑器：VS Code配合Electron插件
调试工具：启用开发者模式后可使用Chrome DevTools
构建工具：内置npm脚本支持插件打包

插件开发核心技术

注入机制解析

Electronic WeChat通过预加载脚本实现插件功能注入，关键文件src/inject/preload.js定义了Injector类，其核心工作流程：

class Injector {
  init() {
    this.initInjectBundle();      // 初始化注入模块
    this.initAngularInjection();  // 拦截AngularJS应用
    this.initIPC();               // 建立进程间通信
  }
  
  // 转换API响应，实现消息拦截等功能
  transformResponse(value, constants) {
    // 处理消息撤回、表情解析等逻辑
  }
}

通过重写AngularJS的$httpProvider，插件可以拦截所有API请求和响应，这是实现消息处理类插件的基础。

插件开发三要素

DOM操作：参考CSS注入器添加自定义样式

class CSSInjector {
  static get commonCSS() {
    return `/* 自定义样式内容 */`;
  }
}

事件监听：仿照徽章计数组件监控界面变化
进程通信：通过Electron的IPC机制实现主进程与渲染进程交互

实战：开发你的第一个插件

步骤1：创建插件目录结构

在项目中建立标准插件目录：

src/plugins/
└── anti-recall/
    ├── main.js        # 插件主逻辑
    ├── styles.css     # 自定义样式
    └── manifest.json  # 插件配置

步骤2：实现消息防撤回功能

修改src/inject/preload.js中的消息处理逻辑：

// 在transformResponse方法中添加
case constants.MSGTYPE_RECALLED:
  if (AppConfig.readSettings('prevent-recall') === 'on') {
    // 锁定消息类型为系统消息
    Injector.lock(msg, 'MsgType', constants.MSGTYPE_SYS);
    // 修改消息内容为撤回提示
    Injector.lock(msg, 'MMActualContent', '【消息已阻止撤回】');
  }
  break;

步骤3：注册插件配置项

在设置窗口中添加插件开关：

class SettingsWindow {
  constructor() {
    // 添加防撤回设置项
    this.addSettingItem('prevent-recall', '阻止消息撤回', 'checkbox');
  }
}

步骤4：测试与调试

使用以下命令启动带调试工具的应用：

npm start -- --debug

通过Chrome DevTools的Elements面板可以实时调试插件DOM操作效果。

插件打包与分发

打包插件

执行构建命令将插件打包为asar文件：

npm run build-plugin -- --name=anti-recall

生成的插件包位于dist/plugins/目录下。

安装与管理

手动安装：将插件asar文件复制到用户目录的.electronic-wechat/plugins文件夹

cp anti-recall.asar ~/.electronic-wechat/plugins/

插件管理界面可通过设置窗口访问，支持启用/禁用已安装插件。

高级插件开发技巧

界面组件开发

参考提及菜单实现复杂交互组件：

class MentionMenu {
  static init() {
    // 创建DOM元素
    const $box = $('<div id="userSelectionBox"/>');
    // 添加事件监听
    $select.change(() => { /* 处理选择事件 */ });
  }
}