BrowseryTools开发者指南：三步把新工具加入152个工具矩阵的完整流程

【免费下载链接】browserytools152 free browser-based tools in 17 languages. Your files and text are processed in your browser — no uploads, no accounts, no ads. Image on-device AI tools, PDF, converters, formatters, calculators, generators. Some AI tools download model weights on first use.项目地址https://gitcode.com/gh_mirrors/br/browserytools点击查看免费下载BrowseryTools 是一个开源浏览器工具集152 个免费工具全部在前端本地运行文件与文本不上传、无需账号、无广告覆盖图像处理、PDF、格式转换、计算器与生成器并支持 17 种语言。想在矩阵中加入一个新工具核心流程其实只有三步——在工具注册表登记、创建页面、实现组件再跑一遍校验与测试即可。为什么新工具加一次就全都有这套项目的架构非常自动化工具清单是唯一的单一数据源。src/lib/tools-config.ts 中的tools数组驱动首页网格、侧边栏、⌘K命令面板搜索、sitemap 与 E2E 测试路由。你在注册表里加一条记录上述入口就会自动多出一个入口不需要手动改任何页面。例如 QR 生成器在注册表中的记录src/lib/tools-config.ts#L1037-L1046{ name: QR Code Generator, href: /tools/qr-generator, icon: QrCodeIcon, available: true, order: 3, creationDate: 2025-08-20, description: Generate QR codes from text, URLs, contact information, and more., },Tool接口的完整字段定义见 src/lib/tools-config.ts#L115-L144。注意一个细节字段顺序不能乱——generate-tool-routes.mjs脚本用正则解析该文件name → href → … → available的前缀顺序是它的解析契约新增可选字段如landingFor必须放在creationDate之后。第一步在 tools-config.ts 登记新工具在合适的分类ToolCategory的items数组中追加一条记录需要填齐字段说明name展示名称会出现在网格卡片与搜索面板中href路由地址必须与第二步的目录名一致如/tools/my-toolicon从lucide-react选一个图标组件availabletrue上线false表示 Coming Soonorder分类内排序序号creationDateISO 日期影响 sitemap 的lastModifieddescription一句英文描述直接作为 SEO 元描述的一部分保存后src/app/sitemap.ts 会自动为新工具生成 URL无需改动。第二步创建工具页面page.tsx每个工具目录包含 3 个文件参照 src/app/tools/qr-generator/page.tsx— 页面入口opengraph-image.tsx— 社交分享卡片twitter-image.tsx— 推特卡片页面入口非常薄以 src/app/tools/qr-generator/page.tsx#L1-L8 为例import QRCodeGenerator from /components/QRCodeGenerator; import { generateToolMetadata } from /lib/metadata; export const metadata generateToolMetadata(/tools/qr-generator); export default function QRGeneratorPage() { return QRCodeGenerator /; }generateToolMetadata会读取注册表条目自动生成标题、描述与 hreflangsrc/lib/metadata.ts#L5你只需传入href。OG 卡片同理一行调用generateToolOgImage(your-tool-slug)即可。第三步实现工具组件组件放在 src/components/ 下命名YourToolName.tsx。项目已提供大量现成积木写一个标准工具通常只需几十行src/components/template/tool-shell.tsx — 统一的工具外壳标题、操作区、SEO 内容区SettingsCard、SliderRow— 参数面板组件useTranslationsnext-intl— 组件内文案国际化downloadBlob等 src/lib/download.ts — 结果导出以 src/components/QRCodeGenerator.tsx 为例它的结构是状态管理 → 调用第三方库生成结果 → 用ToolShell渲染 → 支持 PNG/SVG 下载。顺带一提像 Phone Mockups 这类需要素材的工具设备边框图已内置在 public/mockup_templates/新增工具时也可直接把静态资源放进public/目录。配套内容SEO 文案与 17 种语言想让新工具页面拥有完整的内容区块About、FAQ、HowTo 的 JSON-LD在 src/lib/tool-content.ts 中以 slug 为键添加条目参考qr-generatorsrc/lib/tool-content.ts#L1877包含intro、whyClientSide、limitations、faq、steps与related。即使不添加模板化兜底文案也会保证页面可被收录。界面文案则需要进入 messages/ 目录17 个语言文件en.json、zh-CN.json、ja.json…中的ToolsConfig.tools.slug需要name与description。英文为基准语言其余语言可后续补译——项目提供prune-orphaned-i18n.mjs脚本清理孤儿词条。提交前必跑校验与测试四连仓库自带严格的守卫提交前依次执行bun run validate # 校验注册表与 README 工具清单是否同步 bun run test # vitest 单元测试建议为你的组件补一个 bun run e2e:routes # 从 tools-config 重新生成 e2e 路由清单 bun run test:e2e # Playwright 全量冒烟每条工具路由必须可渲染几点容易踩的坑README 必须同步scripts/validate-tools.js 会比对README.md的工具列表漏写或分类不匹配都会报错available: false的工具必须标注(Coming Soon)。全量冒烟测试e2e/all-tools-smoke.spec.ts 要求每条路由恰好渲染一个h1且无控制台报错——组件里不要再自造标题。单元测试参考src/tests/components/QRCodeGenerator.test.tsx 展示了如何 mock 第三方库并测试交互。提交钩子package.json中precommit脚本会自动执行validate lint别绕过它。关键路径速查清单任务位置工具注册表src/lib/tools-config.ts页面目录模板src/app/tools/qr-generator/组件目录src/components/SEO 内容注册表src/lib/tool-content.ts元数据生成src/lib/metadata.ts多语言文案messages/en.jsonsitemap自动src/app/sitemap.ts校验脚本scripts/validate-tools.js贡献规范README.md流程总结登记 → 建页 → 写组件 → 补文案 → 跑校验。得益于工具矩阵的单一数据源设计这三步走完后你的工具会同时出现在首页网格、命令面板搜索、sitemap 和 E2E 冒烟清单中——这正是 BrowseryTools 能把 152 个工具维护得整整齐齐的原因。赞分享【免费下载链接】browserytools152 free browser-based tools in 17 languages. Your files and text are processed in your browser — no uploads, no accounts, no ads. Image on-device AI tools, PDF, converters, formatters, calculators, generators. Some AI tools download model weights on first use.项目地址https://gitcode.com/gh_mirrors/br/browserytools点击查看免费下载相关推荐3分钟上手BrowseryTools新手必备的工具站快速入门附152个工具分类清单3分钟上手BrowseryTools新手必备的工具站快速入门附152个工具分类清单 BrowseryTools 是一个完全免费的 浏览器在线工具站 内置Kotlin 2.2工具链兼容性矩阵开发者必备的完整参考指南Kotlin 2.2工具链兼容性矩阵开发者必备的完整参考指南 Kotlin 2.2作为JetBrains推出的最新版本带来了许多令人兴奋的新特性和改进。对于编程语言编译器标准库152个工具如何做到零回归BrowseryTools的VitestPlaywright测试体系拆解152个工具如何做到零回归BrowseryTools的VitestPlaywright测试体系拆解 BrowseryTools 是一个包含 152 个免费工上一篇终极指南3步快速解决广色域显示器色彩失真问题下一篇3步精准校准显示器色彩用novideo_srgb解决广色域过饱和问题创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考