企业官网建设流程全解析

• 前端
• 开发工具

FeHelper 是一个面向 Web 前端开发者、以浏览器扩展形态交付的"All in One"工具箱，覆盖 JSON 处理、编解码、时间戳、进制转换、二维码/条形码、代码美化等 30+ 高频场景。本文基于仓库官方英文 README（README_EN.md）整理成文，并辅以 apps/ 下的源码实现与 test/ 下的测试用例进行印证，帮助读者既能在 Chrome / Edge / Firefox 中快速上手使用，也能理解其内部实现原理并参与二次开发。

一、功能总览：六大类工具矩阵

FeHelper 的全部功能以"工具页（Tool Page）"的形式组织在 apps/ 目录下，每个子目录对应一个独立工具。按官方 README 的分类，可划分为六大板块：

从 apps/manifest.json 的扩展描述可以看到，官方对自身的定位是"30+ 开发者工具集"，并明确点出了 JSON 格式化/BigInt 精度/对比、编解码（Base64/URL/Unicode/Gzip/JWT）、时间戳/FILETIME 转换、二维码/条形码、UUID/雪花 ID 生成、代码美化、正则、取色、Postman、进制转换等核心能力。

1.1 JSON 工具：无损 BigInt 精度是核心卖点

JSON 格式化工具不仅是"美化缩进"，其实现中最重要的技术点是大整数精度无损。在 apps/json-format/json-utils.js 的parseWithBigInt中可以看到完整链路：

1. 先通过normalizeLooseJSONSource修正非标准 JSON（单引号键、无引号键、单引号值）；
2. 再用markIntegerIndexKeys保护整数字段名的对象键（避免数组索引被误判）；
3. 最后用正则把 16 位及以上的整数标记为__BigInt__前缀字符串，交给JSON.parse的 reviver 回调还原为原生BigInt，从而规避 JavaScriptNumber超过2^53后精度丢失的问题。

对应的 test/json-utils.test.js 用 Vitest 覆盖了 BigInt 精度、科学计数法、嵌套 JSON 字符串深度解包、HTML 转义、Unicode 编解码等回归场景。此外safeStringify（apps/json-format/json-utils.js#L333-L355）在序列化时会把bigint、科学计数法数字、BigNumber 对象统一转为精确字符串再写回，保证"格式化后再序列化"仍然无损。

1.2 编解码工具：从 Base64 到 Gzip/JWT/Cookie 全链路

编解码是 FeHelper 的另一大主力，其核心实现集中在 apps/en-decode/endecode-lib.js，页面入口在 apps/en-decode/index.js：

• Unicode：_uniEncode将每个字符的charCodeAt(i).toString(16)补齐 4 位并拼接\u前缀，等价于 Java 的native2ascii命令；
• UTF-8：_utf8Encode按字符码位手工构造0xE0|...、0x80|...的字节序列，_utf8Decode反向还原；
• Hex：hexEncode基于 UTF-8 字节序列输出十六进制，同时提供protobufHexDecode用于解析 protobuf 风格的 Hex 数据（apps/en-decode/endecode-lib.js#L320-L324）；
• JWT：jwtDecode对 JWT 的 Header / Payload / Sign 三段分别做 Base64URL 解码（apps/en-decode/endecode-lib.js#L603）；
• Cookie：formatCookieStringToJson把k=v; k2=v2形式的原始 Cookie 串切分、去空格后格式化为 JSON 对象（apps/en-decode/endecode-lib.js#L667）；
• Gzip：_gzipEncode/_gzipDecode基于浏览器原生CompressionStream/DecompressionStreamAPI 实现（apps/en-decode/endecode-lib.js#L697-L701），压缩结果以 Base64 输出，无需引入第三方库，但要求 Chrome 80+、Firefox 113+ 或 Safari 16.4+ 等支持该 API 的浏览器。

1.3 转换器：时间戳多时区与进制 BigInt 化

时间戳工具 apps/timestamp/index.js 每秒刷新"当前时间"，核心逻辑是先换算到 GMT 基准，再叠加用户选择的curGMT偏移生成世界时钟表（offset 从 -12 到 +12），同时支持 Unix 秒/毫秒与本地时间互转，并内置 Windows FILETIME 转换；注意它会对0这类边界值做合法性校验。

进制转换工具 apps/trans-radix/index.js 支持 2/4/8/10/16 进制互转，关键实现是全程使用原生BigInt进行乘加与除模运算，因此可以无损处理超出 53 位整数精度的大整数——这正是 README 中"Radix conversion BigInt support (large integers without loss)"的源码落点。

1.4 二维码与 ID 生成：条形码六格式与 Snowflake 解析

二维码工具 apps/qr-code/index.js 支持生成与解码双模式，生成侧可选尺寸、颜色、Logo；条形码模块（apps/qr-code/index.html#L59-L67）提供 Code 128、Code 39、EAN-13、EAN-8、UPC、ITF-14 六种格式，并对 EAN/UPC 系列做了"位数不足自动补全校验位"的输入约束（apps/qr-code/index.js#L191-L195）。

ID 生成工具 apps/uuid-gen/index.js 包含三套生成器：

• UUID v4：优先走crypto.randomUUID()，兼容环境下用crypto.getRandomValues手工构造 v4 格式，并提供去连字符、大写、花括号三种格式化输出；
• Snowflake ID：按timestamp(41) + datacenterId(5) + machineId(5) + sequence(12)的位布局用BigInt位移拼接生成，同时提供反向解析——从 ID 中还原出时间戳、数据中心号、机器号与序号，并展示对应的日期时间（apps/uuid-gen/index.js#L40-L93）；
• NanoID：从 64 字符字母表（含_、-）中随机取样，长度支持 1～256 可调。

1.5 代码美化与页面级工具

代码美化工具 apps/code-beautify/content-script.js 既可作为独立工具页，也能以 Content Script 的形式在浏览.js/.css源码时自动弹出"是否美化"提示条，通过fileType（javascript/css）决定走js_beautify还是内置 CSS 美化器；在 apps/code-beautify/beautify.js 中fileType采用 allowlist 校验，仅接受白名单内的类型，杜绝任意类型注入。

二、v2026.04 版本更新解读：新功能与安全加固

README 记录的 v2026.04 是一次大版本更新，分为四个维度：

2.1 新增功能

• 条形码生成：Code128 / EAN-13 / UPC 等六种格式（见上文二维码工具的源码印证）；
• ID 生成器工具页：UUID v4 / Snowflake ID / NanoID 三合一（apps/uuid-gen）；
• Windows FILETIME ↔ 日期转换：并入时间戳工具页；
• 字符串转义/反转义：支持\n\t\"等转义处理；
• 进制转换 BigInt 支持：大整数无损转换。

2.2 安全加固（可从源码逐条验证）

2.3 Bug 修复与工程化

• JSON BigInt 无损处理：收敛到纯模块 apps/json-format/json-utils.js，供 format-lib 与 json-worker 共用；
• Service Worker 睡眠问题：改用chrome.alarms而非setTimeout驱动定时任务，见 apps/background/background.js#L910-L923（创建fehelper-check-update闹钟、周期 1440 分钟）；
• Content Script 崩溃修复：manifest 中将注入时机改为document_idle、all_frames: false（apps/manifest.json#L90-L91），以规避 Google Meet 等站点的 iframe 崩溃；
• 时间戳0校验：timestamp工具对非法/空输入做提示拦截（apps/timestamp/index.js#L59-L67）；
• 代码美化器let/const兼容：对 ES6 声明语法做了兼容处理；
• 工程基建：引入 Vitest + 79 个单测用例、GitHub Actions CI、ESLint、清理废弃依赖与代码，Babel 目标从 Chrome 58 提升到 100（可从 package.json、vitest.config.js、eslint.config.js 与 gulpfile.js 验证）。

三、安装方式

3.1 应用商店安装（推荐）

• Chrome：在 Chrome 网上应用店搜索 "FeHelper"（官方扩展 IDpkgccpejnmalmdinmhkkfafefagiiiad）安装；
• Edge：在 Microsoft Edge 加载项商店搜索 "FeHelper 前端助手"；
• Firefox：在 Firefox Add-ons 搜索 "FeHelper"。

3.2 从源码安装（开发者模式加载）

git clone https://gitcode.com/gh_mirrors/fe/FeHelper.git cd FeHelper npm install npm test # 运行单元测试

然后在 Chrome / Edge 中打开chrome://extensions/→ 开启"开发者模式" → 点击"加载已解压的扩展程序" → 选择仓库中的apps目录。

注意：从源码加载时，扩展清单以 apps/manifest.json 为准（Manifest V3），Service Worker 入口为 apps/background/background.js（type: "module"），弹出页为 apps/popup/index.html，设置页为 apps/options/index.html。

3.3 离线安装

可通过 Chrome-Stats 类站点下载 CRX 或 ZIP 包，再将其拖拽到chrome://extensions/页面完成安装。

四、参与开发：测试、Lint 与项目结构

4.1 常用开发命令

npm install # 安装依赖 npm test # Vitest 单元测试（对应 package.json 中的 vitest run） npm run test:watch # 监听模式，文件变更自动重跑 npm run test:coverage # 覆盖率统计（v8 provider，统计 apps/**/*.js） npx eslint apps/ # 对扩展源码执行 ESLint 检查 npm run build # Gulp 构建（压缩 JS/CSS/HTML/JSON、生成 ZIP）

其中 vitest.config.js 将测试范围限定在test/**/*.test.js，且测试运行在 Node 环境——这保证了 apps/json-format/json-utils.js 这类"纯函数模块"可以直接脱离浏览器被单测驱动；当前 test/ 目录下已有 27 个测试文件，覆盖 JSON 工具、编解码 AI 分析、二维码、背景菜单、URL 策略、暗黑模式等模块。

4.2 项目结构

FeHelper/ ├── apps/ # 扩展源码（MV3） │ ├── manifest.json # Chrome 扩展 MV3 清单 │ ├── background/ # Service Worker（后台常驻逻辑） │ ├── popup/ # 弹出面板 │ ├── options/ # 设置页 + 工具市场 │ ├── json-format/ # JSON 格式化 │ ├── en-decode/ # 编解码 │ ├── timestamp/ # 时间戳 │ ├── trans-radix/ # 进制转换 │ ├── qr-code/ # 二维码 + 条形码 │ ├── uuid-gen/ # UUID / 雪花 ID │ ├── code-beautify/ # 代码美化 │ └── ... # 更多工具 ├── test/ # Vitest 单元测试 ├── vitest.config.js ├── eslint.config.js ├── gulpfile.js # 打包构建脚本 └── package.json

4.3 浏览器差异化构建

gulpfile.js 中定义了一套浏览器补丁机制：基础形态以 Chrome MV3 的apps/manifest.json为准，构建时对不同浏览器做最小化调整，例如 Firefox 版会移除color-picker、postman、devtools、websocket、page-timing、grid-ruler、naotu、screenshot、page-monkey、excel2json等工具模块，避免依赖不兼容的 Chrome API。

4.4 贡献流程

1. Fork 本仓库；
2. 新建分支：git checkout -b feature/your-feature；
3. 提交改动：git commit -m 'Add some feature'；
4. 推送：git push origin feature/your-feature；
5. 发起 Pull Request。

五、许可与联系

• 开源协议：MIT，详见 LICENSE；
• 仓库根目录同时提供多语言 README：README.md（中文）、README_EN.md（英文）、README_JA.md（日文）、README_KO.md（韩文），以及 website/docs 下各工具的在线文档；
• 官方建议通过 GitHub Issues 渠道反馈问题。

六、小结

FeHelper 的价值不在于某个单一工具的深度，而在于把前端日常高频操作集中到一个 MV3 扩展中，并以"纯函数模块 + 单元测试"的方式保障核心算法（BigInt、编解码、进制转换）的正确性。对开发者而言，除了直接使用，它也是一份不错的浏览器扩展工程范本：从 manifest 权限设计、Service Worker 定时任务（chrome.alarms）、Content Script 注入规范，到 Gulp 多浏览器构建与 Vitest 测试体系，均可对照源码逐项学习。

• 前端
• 开发工具