BrowseryTools:免费浏览器级生产力工具包

BrowseryTools 是什么?

BrowseryTools (https://browserytools.com) 是一套完全基于浏览器的开源生产力工具集合。目标很简单:为您提供一站式的通用任务平台——图像编辑、文件转换、编码辅助等——同时将所有数据保存在浏览器本地。无服务器端处理意味着文件永不离开您的电脑,完全保障隐私并提供闪电般的响应速度。

类别 示例
图像工具 背景移除、压缩、格式转换、色彩校正
文件工具 PDF 合并/拆分、Zip 压缩、CSV 浏览器、通用文件转换器
媒体工具 视频剪辑、音频剪辑、摄像头/麦克风测试器
文本工具 大小写转换、计数器、格式化器、Lorem ipsum 生成器
数据工具 JSON↔CSV、Base64 编码/解码、二维码 & 条形码生成/扫描
数学与财务 发票 & 单位生成器、计算器、货币转换器
生产力 待办清单、计时器、倒计时
安全 UUID、JWT 解码器、哈希生成器、密码生成器

该工具包基于现代 JavaScript 堆栈构建:Next.js 15(配合 App Router)、TypeScriptTailwind CSS,以及用于组件的 Shadcn + Radix UI。状态使用 Zustand 管理,图标来自 Lucide React,动画使用 Framer Motion。开发流程完全自动化,采用 GitHub Actions,项目通过 Vercel 部署,支持即时预览。


为什么只使用浏览器?

  1. 隐私 – 所有文件保存在您的设备上;无需上传到云端。

  2. 速度 – 浏览器端处理降低往返延迟。

  3. 简单 – 无需服务器维护、无需费用,也不依赖外部服务。

  4. 可靠性 – 如果文件类型被支持,即使在网络不佳的情况下也能正常工作。


开始使用

# 克隆仓库
git clone https://github.com/aghyad97/browserytools.git
cd browserytools

# 安装依赖(任何包管理器都可)
npm install   # 或 yarn, pnpm, bun

# 本地运行
npm run dev

# 打开浏览器
http://localhost:3000

打开后,您会看到一个简洁的仪表盘,左侧栏列出所有工具。点击其中一个会加载一个专属页面,提供交互式界面。


贡献

BrowseryTools 欢迎贡献——从新工具到 UI 微调。以下为快速指南:

  1. Fork 仓库。
  2. 创建功能分支:git checkout -b feature/<tool‑name>
  3. 将工具组件添加至 src/components/<ToolName>.tsx
  4. src/app/tools/<tool‑name>/page.tsx 创建路由。
  5. 必要时更新导航和任何共享状态(Zustand stores)。
  6. 提交、推送并打开 Pull Request。

提交前,请先运行 lint 和测试脚本:

npm run lint
npm test

用例

  • 自由职业者:使用发票生成器生成发票,并在发送前压缩图像。
  • 开发者:快速格式化 JSON,将代码转换为美化片段,并在调试时使用 JWT 解码器。
  • 设计师:创建手机原型,调整配色方案,并为作品集生成二维码。
  • 教育工作者:为学生提供安全、无服务器的编码练习环境。

由于所有工具均在本地运行,您可以信任敏感数据(如密码、令牌或 PDF)始终保持私密。


未来路线图

该项目正积极扩展。即将推出的功能包括:

  • SVG 编辑器 – 完整的矢量编辑功能。
  • 文件转换器 – 转换文档、音频和视频。
  • 电子表格查看器 – 提升的 CSV/Excel 功能。
  • AI 助手 – 可选的服务器端插件,用于高级图像或文本处理。

欢迎您的想法与 pull request。


资源与社区

  • 文档 – 仓库的 README 及时更新,包含安装说明和工具列表。
  • Issues – 反馈错误或请求功能。
  • Pull Request – 提交代码修复或新增工具。
  • 社交 – 在 Twitter 上关注 @aghyadev 获取更新。
  • 赞助 – GitHub Sponsors 支持持续维护。

结论

BrowseryTools 不仅仅是一系列工具的集合;它是一个以隐私为先、开源的实验平台,帮助任何人只需在浏览器中就能大幅提升工作效率。无论您是在调节图像、处理数据,还是格式化代码,项目都提供了可靠且零成本的替代方案,取代重量级桌面应用。自己打开工具,加入社区,或贡献新功能——您的浏览器有可能成为最强大的工具。


准备好深入了解了吗?

访问在线演示: https://browserytools.com 参与贡献: https://github.com/aghyad97/browserytools

祝你编码愉快!

原创文章: 查看原文

分享本文