告别繁琐JS！Rust一键打造Chrome/Firefox插件的新时代

Oxichrome：纯 Rust 开发跨浏览器扩展，零 JS 手写超省心

各位技术小伙伴们，是不是还在为写浏览器扩展来回折腾 JavaScript，还要兼顾 Chrome 和 Firefox 的适配头大？今天给大家安利一个神仙工具 ——Oxichrome，直接用 Rust 语言开发浏览器扩展，编译成 WebAssembly，Chrome、Firefox 通吃，关键是全程不用手写一行 JS，开发效率直接拉满！

Oxichrome 是一款专为 Rust 开发者打造的浏览器扩展开发工具，核心就是让大家用熟悉的 Rust 语法，就能轻松开发出兼容 Chromium 系（Chrome、Edge、Brave）和 Firefox 的 Manifest V3 标准扩展，背后依托 wasm-bindgen 实现 Rust 到 Wasm 的编译，还结合了 Leptos 框架做响应式 UI，体验直接拉满。

用过的小伙伴都知道，它最香的地方就是把繁琐的开发流程全自动化了，不用再手动处理编译、生成清单、写 HTML/JS 垫片这些杂事，一行命令就能搞定所有，而且还能自动生成 Chromium 和 Firefox 的专属打包文件，跨端适配再也不用反复改代码。

五大过程宏，轻松实现扩展核心功能

Oxichrome 给大家准备了五个超实用的过程宏，直接注解就能实现扩展的各种核心功能，完全不用写复杂的底层代码，新手也能快速上手：

• #[oxichrome::extension]：给结构体加个注解，就能定义扩展的名称、版本、权限这些元信息，比如 storage、tabs 权限，一行配置就搞定；
• #[oxichrome::background]：标注一个异步函数，它就成了扩展的后台服务工作线程入口，扩展的后台逻辑全在这写；
• #[oxichrome::on]：用来注册 Chrome 事件监听器，比如扩展安装、运行时触发的事件，异步函数就能处理，还能拿到事件详情；
• #[oxichrome::popup]：把 Leptos 组件标注成扩展的弹窗 UI，用 Leptos 的响应式语法写界面，前端小伙伴也能快速适配；
• #[oxichrome::options_page]：和 popup 同理，标注后就是扩展的设置页面 UI，同样基于 Leptos，写起来超顺手。

这五个宏会自动把 Rust 代码转换成 wasm-bindgen 导出内容，底层逻辑全封装，咱们只管写业务就行。

强类型 Chrome API 绑定，告别类型错误

开发浏览器扩展，离不开 Chrome 的各种 API，Oxichrome 提供了chrome.storage、chrome.tabs、chrome.runtime这些核心 API 的强类型绑定，用 Rust 的强类型特性，写代码时就能避免类型错误，不用再在运行时踩坑。

比如操作存储，直接用 oxichrome::storage 的 get、set、remove 方法，异步调用还能直接 await，返回值都是强类型的；操作标签页的话，query 查询、create 创建、send_message 发消息，全程都是 Rust 语法，用起来特别丝滑，再也不用对着 JS 的弱类型 API 反复调试。

Leptos 加持，响应式 UI 开发超轻松

Oxichrome 把 Leptos 框架集成到了一起，用来开发扩展的弹窗和设置页面。Leptos 是基于 Rust 的现代 Web 框架，和 React、Solid 这些前端框架的思路很像，支持响应式数据、组件化开发，而且没有虚拟 DOM，渲染效率超高。

写 UI 的时候，用 Leptos 的 view! 宏就能写类似 JSX 的语法，组件返回 impl IntoView 就行，前端开发者几乎不用学新语法就能上手，后端 Rust 选手也能快速实现漂亮的响应式界面，不用再和 JS/CSS 死磕。

极简 CLI 命令，开发打包一键搞定

Oxichrome 的 CLI 工具设计得特别简洁，几个命令就能覆盖从项目初始化到打包发布的全流程，新手也能秒会：

• 新建项目：直接脚手架生成，项目里已经配好了 Oxichrome 依赖，不用手动改配置；
• 构建 Chromium 扩展：默认命令直接打包，生成的文件在 dist/chromium 目录，直接在 Chrome 扩展页面加载已解压的扩展就能用；
• 构建 Firefox 扩展：加个 --target firefox 参数，就会生成 Firefox 专属的打包文件，在 Firefox 的调试页面加载 manifest.json 即可；
• 发布优化：加 --release 参数就能生成优化后的发布版本，体积更小、运行更快；
• 清理文件：clean 命令一键删除 dist 目录，不用手动清理。

而且构建过程中，Oxichrome 会自动处理 Wasm 编译、清单生成、JS/HTML 垫片创建、静态资源复制，还支持可选的 wasm-opt 优化，把所有繁琐的步骤都包了，咱们只管专注写代码。

清晰的项目架构，易扩展易维护

Oxichrome 本身的项目架构设计得特别清晰，分成了多个核心模块，各司其职，也方便开发者理解和二次开发：

• oxichrome：对外的重导出 crate，开发者直接依赖这个就行；
• oxichrome-core：运行时核心，包含 Chrome API 绑定、错误类型、日志功能；
• oxichrome-macros：就是咱们用到的那些过程宏的实现；
• oxichrome-build：负责源码解析、清单和垫片生成；
• oxichrome-cli：就是咱们用的 cargo oxichrome 命令行工具；
• examples：还提供了计数器、颜色选择器这些示例扩展，直接参考就能写自己的项目。

Oxichrome 的打包输出目录结构特别规范，Chromium 和 Firefox 的文件分开存放，不会混淆，部署的时候直接对应加载就行：

• dist/chromium：Chromium 系扩展的所有文件，包含 manifest.json、后台 JS、弹窗 / 设置页的 HTML/JS，还有编译后的 Wasm 文件；
• dist/firefox：Firefox 扩展的文件，清单会适配 Firefox 的要求，比如加入 gecko ID、适配后台脚本，其他文件和 Chromium 保持一致，不用额外开发。

Oxichrome 采用 MIT 开源协议，不管是个人开发还是商业项目，都能自由使用、修改和分发，完全没有限制，而且项目还在持续更新，最近还新增了 Firefox 目标支持和清理命令，生态一直在完善。

对于 Rust 开发者来说，Oxichrome 直接把浏览器扩展开发的门槛拉低了，不用再学习 JS 生态的各种工具，用熟悉的 Rust 就能搞定跨浏览器的扩展开发；对于前端开发者来说，这也是一个接触 Rust+Wasm 开发的好机会，依托 Leptos 的熟悉语法，轻松实现技术栈升级。

目前 Oxichrome 已经能满足日常的浏览器扩展开发需求，不管是写简单的小工具，还是复杂的功能扩展，都能轻松应对，感兴趣的小伙伴可以直接去 GitHub 上看看，上手试试就知道有多香了！