|
|
|
- 操作系统: Windows 10 / Windows 11
- Firefox: 版本 60 及以上（支持
userContent.css） - Chrome/Edge: 最新版本
- 运行时: 📦 开箱即用，无需安装额外运行时
- 访问 Releases 页面
- 下载最新版本的
BrowserBgSwap_x.x.x_x64.msi - 双击安装包，按向导完成安装
- 从开始菜单或桌面快捷方式启动
点击查看源码构建步骤
# 1. 克隆仓库
git clone https://github.com/yourusername/browser-bg-swap.git
cd browser-bg-swap
# 2. 安装前端依赖
npm install
# 3. 安装 Tauri CLI (如未安装)
cargo install tauri-cli
# 4. 开发模式运行
cargo tauri dev
# 5. 构建发布版本
cargo tauri build💡 构建完成后，安装包将位于
src-tauri/target/release/bundle/msi/目录下。
提示： 修改完成后，必须完全关闭并重启 Firefox 才能使设置生效。
- 选择配置文件：打开应用后切换到 Firefox 选项卡，系统会自动检测已安装的 Firefox 及其配置文件（通常选择标记为“默认”的即可）。
- 检查前置条件：如果提示“需要配置 Firefox”，请点击 [自动配置] 按钮，工具会自动启用相关设置（
toolkit.legacyUserProfileCustomizations.stylesheets）。 - 设置背景图片：点击 [选择图片] 按钮，从本地选择一张喜欢的图片（支持 JPG, PNG, GIF, WebP 等）。
- 调整受支持的样式项：Firefox 目前支持背景图/背景色、适应方式、模糊、亮度、遮罩，以及“显示搜索框”“显示快捷方式”。
- 应用与重启：点击 [应用设置]，然后完全关闭 Firefox（确保任务管理器中没有 firefox.exe 进程），重新打开即可看到效果。
提示： Chrome/Edge 的修改基于生成本地扩展的方式实现，扩展文件默认保存在应用数据目录下的持久路径中。
- 配置背景：切换到 Chrome/Edge 选项卡，设置背景图片和显示选项。
- 生成扩展：选择一个扩展输出路径（可留空使用默认），点击 [生成扩展]。
- 安装扩展：
- 🔵 Chrome: 打开
chrome://extensions/➔ 开启右上角 [开发者模式] ➔ 点击 [加载已解压的扩展程序] ➔ 选择生成的BrowserBgSwap_Extension文件夹。 - 🟢 Edge: 打开
edge://extensions/➔ 开启左下角 [开发人员模式] ➔ 点击 [加载解压缩的扩展] ➔ 选择生成的BrowserBgSwap_Extension文件夹。
- 🔵 Chrome: 打开
| 分类 | 技术 | 说明 |
|---|---|---|
| 🚀 核心框架 | Tauri v2 | 跨平台桌面应用框架，提供高性能与小体积 |
| 🦀 后端 (Rust) | Rust, serde, thiserror, dirs, chrono | 高性能系统编程，处理文件系统、路径与配置 |
| ⚛️ 前端 (UI) | React 19, TypeScript | 提供现代化、类型安全的响应式交互界面 |
| 🎨 样式与状态 | Tailwind CSS, Zustand, Lucide React | 原子化 CSS 样式、轻量级状态管理与精美图标 |
| 📦 构建工具 | Vite, Cargo | 极速前端构建与 Rust 依赖管理 |
❓ 常见问题 (FAQ)
A: 请确保：
- 已完全关闭 Firefox（检查任务管理器中没有 firefox.exe 进程）。
toolkit.legacyUserProfileCustomizations.stylesheets已设置为 true（可使用软件内的自动配置功能）。- 选择了正确的配置文件。
A:
- 确保图片路径不包含特殊字符。
- 建议使用本地磁盘上的图片（不要直接使用网络图片链接）。
- 图片格式支持：JPG、PNG、GIF、WebP、BMP。
A: 两种方法：
- 使用工具中的"恢复备份"功能（如果之前创建过备份）。
- 手动进入 Firefox 配置文件目录，删除
chrome/userContent.css文件。
A: 这是正常现象，生成的扩展包含占位图标。扩展功能不受影响。如需自定义图标，可替换扩展目录 icons/ 下的 PNG 文件。
👨💻 开发指南
browser-bg-swap/
├── src-tauri/ # Rust 后端代码
│ ├── src/
│ │ ├── browsers/ # 浏览器适配逻辑
│ │ ├── commands/ # Tauri 命令
│ │ ├── core/ # 核心类型定义
│ │ └── utils/ # 工具函数
│ ├── Cargo.toml # Rust 依赖配置
│ └── tauri.conf.json # Tauri 配置
├── src/ # React 前端代码
│ ├── components/ # 组件
│ ├── stores/ # 状态管理
│ ├── types/ # TypeScript 类型
│ └── App.tsx # 应用入口
└── package.json # Node 依赖配置
npm run tauri dev # 启动开发模式（前端与后端热重载）
npm run build # 构建前端代码
npm run tauri build # 构建完整的桌面应用程序包
cd src-tauri && cargo check # 检查 Rust 代码
cd src-tauri && cargo fmt # 格式化 Rust 代码📝 更新日志 & 注意事项
- 平台范围: 当前版本以 Windows 桌面工具 为边界设计和验证。
- Firefox 配置: 修改
about:config设置后需要重启 Firefox；userContent.css仅对about:newtab和about:home页面生效。 - Firefox 能力边界: Firefox 目前只实现背景与基础显隐控制，不包含 Chrome/Edge 新标签页的完整高级样式能力。
- 扩展安全性: 本工具不会收集任何用户数据，所有操作均在本地完成。
- 🎉 初始版本发布
- ✨ 支持 Firefox 背景自定义及一键配置
- 🧩 支持 Chrome/Edge 扩展生成
- 🖼️ 可视化 GUI 界面，操作简便
- 💾 配置备份与恢复功能