告別繁瑣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 上看看，上手試試就知道有多香了！