# 多开浏览器

**Repository Path**: aiweline/multi-browser

## Basic Information

- **Project Name**: 多开浏览器
- **Description**: Electron + node + playwright 实现多内核浏览器启动和管理，支持自编拓展和无拓展js注入实现主控操作浏览器。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-11-22
- **Last Updated**: 2025-11-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Multi-Browser Controller

**多控浏览器 - 基于 Electron + Playwright 的多品牌浏览器实时页内翻译系统**

![license](https://img.shields.io/badge/license-MIT-green)
![node](https://img.shields.io/badge/node-%3E%3D18-blue)
![electron](https://img.shields.io/badge/electron-%3E%3D28-blue)

## 📖 项目简介

Multi-Browser Controller 是一个基于 Electron + Playwright 的桌面应用，支持多品牌浏览器（Chromium、Firefox、WebKit）的实时页内翻译功能。主要应用于社交媒体平台（Facebook、Twitter、Instagram 等）的聊天消息实时翻译。

### ✨ 核心特性

- **🌐 多浏览器支持**：Chromium、Firefox、WebKit，按需下载（首次自动）
- **🔄 实时翻译**：聊天页消息自动检测并翻译（DeepL API）
- **🔐 自动登录**：扩展自动填充登录表单
- **🌍 国际化**：中英双语，运行时切换
- **⚡ 一键开发**：`npm run dev` 全自动安装依赖+下载浏览器+启动
- **📦 一键打包**：`npm run build` 直接出安装包

## 🚀 快速开始

### 环境要求

- **Node.js**: >= 18.0.0
- **npm**: >= 9.0.0
- **操作系统**: Windows 10/11, macOS 10.15+, Linux (Ubuntu 20.04+)

### 安装依赖

```bash
# 克隆仓库
git clone https://gitee.com/aiweline/multi-browser.git
cd multi-browser

# 安装依赖（会自动安装根目录和 electron 目录的依赖）
npm install
```

### 开发模式

```bash
# 启动开发服务器（自动检查依赖、下载浏览器、启动应用）
npm run dev
```

**开发模式会自动执行：**
1. 检查并安装依赖
2. 检查并下载缺失的浏览器（首次运行）
3. 启动 Vite 开发服务器（端口 5173）
4. 启动 Electron 应用

### 构建应用

```bash
# 构建当前平台的安装包
npm run build

# 构建 Windows 安装包
npm run build:win

# 构建 macOS 安装包
npm run build:mac

# 构建 Linux 安装包
npm run build:linux
```

**构建流程：**
1. 构建 Vue 前端（`vite build`）
2. 使用 `electron-builder` 打包 Electron 应用
3. 输出安装包到 `dist/` 目录

**构建产物：**
- Windows: `多控浏览器 Setup x.x.x.exe` (NSIS 安装包)
- macOS: `多控浏览器-x.x.x.dmg`
- Linux: `多控浏览器-x.x.x.AppImage`

## 📁 项目结构

```
.
├── electron/                # Electron 主进程 + 渲染进程
│   ├── main.js              # 主进程入口
│   ├── index.html           # 渲染进程 UI
│   ├── lib/                 # 工具库
│   │   ├── launchBrowser.js # 浏览器启动逻辑（Playwright）
│   │   ├── transRelay.js    # 翻译中继服务（WebSocket）
│   │   └── browserMonitor.js # 浏览器监控进程
│   ├── handles/             # IPC 处理器
│   └── package.json         # Electron 依赖配置
├── extensions/              # Chrome 扩展
│   ├── manifest.json        # 扩展清单
│   ├── background.js        # 后台脚本
│   ├── inject.js            # 内容脚本（主入口）
│   └── channel/             # 各平台特定脚本
│       ├── facebook/        # Facebook 相关
│       ├── twitter/         # Twitter 相关
│       └── ...
├── src/                     # Vue3 前端源码（可选，当前使用 electron/index.html）
│   ├── components/          # Vue 组件
│   ├── stores/              # Pinia 状态管理
│   └── main.ts              # 入口文件
├── scripts/                  # 构建和工具脚本
│   ├── pre-start-check.js   # 启动前检查
│   ├── start-electron.js    # 启动 Electron
│   └── downloadBrowser.js   # 浏览器下载
├── browsers/                 # 浏览器下载目录（Git 忽略，仅保留 .gitkeep）
├── workspace/                # 浏览器实例运行目录（Git 忽略）
├── .browser-cache/           # Playwright 浏览器缓存（Git 忽略）
└── package.json              # 根目录依赖配置
```

## 🛠️ 技术栈

### 前端
- **Vue3** - 渐进式 JavaScript 框架
- **Vite** - 下一代前端构建工具
- **TypeScript** - 类型安全的 JavaScript
- **Naive UI** - Vue3 组件库
- **vue-i18n** - Vue 国际化插件

### 主进程
- **Electron 28** - 桌面应用框架
- **Node.js 18+** - JavaScript 运行时

### 浏览器控制
- **Playwright 1.40** - 浏览器自动化框架
  - Chromium 支持
  - Firefox 支持
  - WebKit 支持

### 翻译服务
- **DeepL API** - 主要翻译服务（需要 API Key）

### 打包工具
- **electron-builder** - Electron 应用打包工具

## 📝 使用说明

### 1. 配置浏览器账户

1. 点击 "添加浏览器账户"
2. 填写账户名称
3. 选择绑定的社媒账户
4. 选择浏览器内核（Chromium/Firefox/WebKit）
5. 配置 DeepL API Key 和目标语言
6. 保存

### 2. 配置社媒账户

1. 点击 "添加社媒账户"
2. 选择社媒类型（Facebook/Twitter/Instagram 等）
3. 填写用户名/邮箱和密码
4. 配置登录地址（可选，默认使用该类型的默认登录地址）
5. 保存

### 3. 启动浏览器

1. 在浏览器账户列表中，点击 "启动" 按钮
2. 系统会自动检查资源（浏览器、API Key 等）
3. 如果资源完整，浏览器会自动启动并导航到登录页面
4. 扩展会自动填充登录表单
5. 登录后，翻译功能会自动启用

### 4. 翻译功能

- 翻译功能会在聊天页面自动启用
- 新消息会自动检测并翻译
- 翻译结果会显示在消息下方（蓝色文字）

## 🔧 开发指南

### 添加新的社媒平台支持

1. 在 `extensions/channel/` 下创建新目录（如 `telegram/`）
2. 创建以下文件：
   - `auto-fill-{platform}.js` - 自动填充逻辑
   - `inject-{platform}.js` - 消息扫描和翻译逻辑
3. 在 `extensions/inject.js` 中注册新平台
4. 在 `electron/index.html` 中添加平台选项

### 自定义翻译服务

修改 `electron/lib/transRelay.js` 中的 `translateWithDeepL` 函数，替换为其他翻译 API。

## 🐛 常见问题

### Q: 浏览器启动失败？

**A:** 检查以下几点：
1. 浏览器是否已下载（可在内核管理中查看）
2. 系统资源是否充足
3. 查看控制台错误信息

### Q: 翻译功能不工作？

**A:** 检查以下几点：
1. DeepL API Key 是否正确配置
2. 网络连接是否正常
3. 是否在支持的社媒平台页面
4. 查看浏览器控制台是否有错误

### Q: 构建失败？

**A:** 确保：
1. Node.js 版本 >= 18
2. 所有依赖已正确安装
3. 有足够的磁盘空间
4. 检查构建日志中的错误信息

## 📄 许可证

MIT License

## 🤝 贡献

欢迎提交 Issue 和 Pull Request！

## 📮 联系方式

- **仓库地址**: https://gitee.com/aiweline/multi-browser
- **问题反馈**: 请在 Gitee 上提交 Issue

---

**注意**: 本项目使用 Playwright 架构，所有浏览器控制功能通过 Playwright 实现。首次运行会自动下载浏览器（约 250MB/品牌），请确保网络连接正常。