关注【索引目录】服务号，更多精彩内容等你来探索！
构建 Chrome 扩展程序起初可能会让人不知所措，尤其是在不确定使用哪些工具的情况下。在参与过几个自由职业项目并构建过自己的扩展程序之后，我找到了一套可靠的工具，它们可以让开发过程更快、更轻松，也更省心。在这篇文章中，我将分享我个人用于为客户和个人项目构建 Chrome 扩展程序的工具。
1. WXT – 下一代 Web 扩展框架
如果您仍在使用 crxjs 或手动设置清单，那么是时候了解一下 WXT 了。它是一个专为 Chrome 扩展程序开发构建的现代框架，并且提供了您所需的一切开箱即用功能。它支持热模块重新加载、清单 v3 支持、Vite 集成以及智能默认值。
WXT 删除了很多样板代码，让我可以专注于实际的扩展构建。它与 React 配合得很好，让开发体验更加流畅，尤其是在处理不同的扩展上下文（例如背景、内容脚本和弹出窗口）时。
2. React + Vite
我通常使用 React + Vite 自带的 WXT 模板。React 帮助我更好地构建 UI，尤其是对于带有弹出窗口或选项页面的复杂扩展。而 Vite 则能快速加载所有内容——这简直是完美的组合。
例如，在我为一位自由职业客户开发的扩展中，我使用 React 来管理弹出窗口中的多步骤表单。如果没有它，管理状态和 UI 更新将会非常混乱。
3. Tailwind CSS
Tailwind 是我几乎所有构建项目（包括 Chrome 扩展程序）的首选样式解决方案。它帮助我快速开发，并保持设计的一致性，而无需从头编写自定义 CSS。
即使它只是一个扩展 UI，我仍然希望它看起来简洁专业。Tailwind 通过实用优先的类实现了这一点，而且无需打开单独的 CSS 文件。它还能与 React 和 WXT 完美兼容，这是一个很大的优势。
4. @webext-core/消息
在 Chrome 扩展程序中，在后台脚本、内容脚本和弹出窗口之间发送消息曾经让我抓狂。我浪费了大量时间调试 chrome.runtime.sendMessage，并琢磨着为什么监听器没有触发。
然后我发现了@webext-core/messaging，它改变了一切。
这个库让消息传递感觉就像调用函数一样——超级简洁易读。它开箱即用地支持 TypeScript，因此您可以获得自动完成和类型安全。安装非常简单，一旦使用，您就再也不需要使用原生的消息传递 API 了。
5. Supabase – 用于身份验证和数据库
我的很多自由职业项目都需要某种后端——通常用于用户身份验证、保存设置或存储用户数据。Supabase 是我的首选。
它类似于 Firebase，但拥有基于 SQL 的数据库（PostgreSQL），并且开发体验更好。我使用 Supabase 来处理用户身份验证（使用魔法链接或 OAuth）以及安全地存储任何与扩展程序相关的数据。
由于自由职业通常面临紧迫的截止日期，我需要快速设置、可靠且安全的工具。Supabase 满足了所有这些要求。
这些是我为自己和自由职业客户构建 Chrome 扩展程序时所依赖的核心工具。它们帮助我更快地构建，避免常见的错误，并创建出运行良好、外观精美的扩展程序。
关注【索引目录】服务号，更多精彩内容等你来探索！