# mockJS **Repository Path**: Randalls/mock-js ## Basic Information - **Project Name**: mockJS - **Description**: JSON工具箱 - **Primary Language**: Unknown - **License**: MulanPSL-2.0 - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 1 - **Created**: 2026-09-19 - **Last Updated**: 2026-09-21 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # MockJS 开发者工具箱 · 静态工具网站原本这是 **FeHelper**（Chrome MV3 扩展）的源码目录，现在已改造为一个可以脱离浏览器扩展、直接在普通浏览器里运行的**在线工具网站**。 - 首页 `index.html` 是工具导航（33 款工具，支持搜索 + 分类筛选 + 明暗主题） - 每个工具是 `<工具名>/index.html`，通过统一的顶部导航互相串联 - 纯静态：无构建步骤、无后端、无依赖安装，数据全部在浏览器本地处理 - 全站页头与页脚由 `static/js/mj-toolbar.js` 统一生成，站点信息与**备案号**集中在该文件顶部的 `SITE` 一处配置 ## 快速开始 ```bash # 方式一：直接双击打开（file:// 也能正常工作） open index.html # 方式二：起一个本地静态服务器（推荐，避免个别浏览器的 file:// 限制） python3 -m http.server 8899 # 然后访问 http://127.0.0.1:8899/ ``` ## 目录结构 ``` index.html 工具首页（导航网格） main.js 首页逻辑：工具清单、搜索、分类筛选、主题 style.css 首页样式（设计令牌 + 明暗主题） <工具名>/index.html 单个工具页面 <工具名>/index.js 工具逻辑 <工具名>/index.css 工具样式 static/js/fh-shim.js ★ 扩展 API 兼容层（关键，见下） static/js/mj-toolbar.js 各工具页的统一顶部导航 static/js/mj-init.js 主题初始化 static/vendor/ 第三方库（Vue、jQuery、CodeMirror 等） tools/ 站点构建与校验脚本 manifest.json 原始扩展清单（网站模式不再使用，保留备查） README.md 本文档 ``` 网站模式新增的文件： ``` README.md 本说明 static/js/fh-shim.js 扩展 API 兼容层 color-picker/{index.html,css,js} 新建：页面取色 grid-ruler/{index.html,css,js} 新建：栅格标尺 page-timing/self-measure.js 本页性能自采集（复用 content-script 采集逻辑） screenshot/web-capture.js getDisplayMedia 截屏实现 tools/site-build.js 站点构建（注入兼容层、修路径、补 favicon） tools/verify.js 全站逐页校验 tools/smoke-test.js 交互冒烟测试 tools/tool-functions-test.js 工具功能正确性测试 tools/screenshot-capture-test.js 截屏工具测试 tools/debug-page.js 单页深度诊断 ``` ## 从扩展改造为网站时做的三件事 ### 1. 扩展 API 兼容层 `static/js/fh-shim.js` 工具页原本依赖 `chrome.runtime` / `chrome.storage` / `chrome.tabs` 等扩展 API。在普通网页里这些对象并不存在，工具页初始化时会抛 `TypeError` 而整体失效。该兼容层在其它脚本之前加载，提供等价的最小实现： | 扩展 API | 在网站上的实现 | | --- | --- | | `chrome.runtime.sendMessage` | 本地消化消息（工具热修补丁返回空、设置类消息落 localStorage） | | `chrome.storage.local` / `session` | 基于 `localStorage` 持久化，支持回调与 Promise 两种调用方式 | | `chrome.runtime.openOptionsPage` | 跳转到本站首页（即“工具市场”） | | `chrome.runtime.getURL` | 解析为站点相对路径 | | `chrome.tabs` / `downloads` / `notifications` 等 | 安全降级（下载走 ``，其余为空操作） | 在**真实扩展环境**中（`chrome.runtime.id` 存在）该文件不做任何事情，因此不影响继续以扩展方式打包。 `tools/site-build.js` 会把它注入到每个页面的 `` 最前面。 ### 2. 统一站点导航与页脚 `static/js/mj-toolbar.js` **页头与页脚都在同一个文件里，站点信息集中在文件顶部的 `SITE` 一处配置**，全站 38 个页面都引入该脚本，因此改备案号 / 品牌名 / 底部链接只需改这一个地方。 ```js var SITE = { name: 'MockJS', slogan: '33 款纯前端工具 · 数据本地处理', icp: '沪ICP备19040399号-2', // 换备案主体只改这两行 icpHref: 'https://beian.miit.gov.cn/', links: [ /* 官网 / GitHub */ ] }; ``` - **页头**：工具页含 `` 挂载点，渲染为品牌/返回首页、当前工具名、搜索框、主题切换、分类导航、“全部工具”；该节点会被移动到 `` 首位，使其不受各工具自身布局（flex / 全屏 / 分栏）影响。 - **页脚**：所有引入该脚本的页面都会在 `` 末尾追加统一页脚（含备案号链接）。页面若自带功能性底栏，可在 `` 上标记 `data-fh-no-footer` 退出注入（`popup` 即如此，它底部的快捷键条是功能而非站点页脚）；页面若已存在 `[data-fh-site-footer]` 也会自动跳过，避免重复。 - 页脚高 46px，处于正常文档流，因此会给**刚好满屏**的工具页带来 46px 的纵向滚动（原先本就可滚动的页面只是多出这 46px）。这是把页脚放在正常流中的固有结果。 ### 3. 路径与资源修正 - 根相对路径（`/options/index.html` 等）改写为相对路径，兼容 `file://` 与子目录部署 - 为缺少 favicon 声明的页面补上 favicon，消除浏览器的 `/favicon.ico` 404 - 原先指向扩展“工具市场”的链接统一指向本站首页 ## 维护脚本 ```bash # 幂等地重新注入兼容层、修正路径、补齐 favicon（新增页面后跑一次） node tools/site-build.js # 用 headless Chrome 逐页校验：控制台错误、未捕获异常、是否渲染出内容 node tools/verify.js # 交互冒烟测试：首页搜索/分类筛选/URL 参数、工具页导航、主题持久化 node tools/smoke-test.js # 功能正确性测试：真实驱动 UI 校验计算结果（时间戳往返、UUID/雪花 ID 等） node tools/tool-functions-test.js # 截屏工具测试：取消 / 不支持 / 非安全上下文等分支，以及抓帧→预览→下载 PNG 全链路 node tools/screenshot-capture-test.js # 单页深度诊断：完整异常栈 + 失败请求 + DOM 探针 node tools/debug-page.js <页面路径> # 例: node tools/debug-page.js uuid-gen/index.html ``` `verify.js` 会为每个页面记录元素数 / 文本长度 / 页头是否渲染 / 正文文本样本，结果写入 `tools/verify-report.json`。当前结果： | 检查 | 结果 | | --- | --- | | `verify.js` 全站页面 | **38 个页面全部通过，零控制台错误** | | `smoke-test.js` 交互 | **24 项全部通过** | | `tool-functions-test.js` 功能 | **14 项全部通过** | | `screenshot-capture-test.js` 截屏 | **40 项全部通过** | 运行交互/功能测试前需要先起本地服务器（默认取 `http://127.0.0.1:8899`）。 ## 针对网站模式做的工具级改造除了共性的兼容层与导航，以下工具原本只能作为扩展运行，已针对网站模式单独改造： | 工具 | 改造内容 | | --- | --- | | **页面取色**、**栅格标尺** | 源码里只有 content-script、**没有页面**（首页链接原本 404）。已新建页面，改为在自身页面上取色 / 叠加标尺。 | | **网站性能优化** | 原本只能靠扩展采集**任意标签页**的数据，网站上永远是「无页面」。改为测量**当前页面自身**（复用原 content-script 的采集逻辑），并修正了 `loadEventEnd` 在 load 事件内读取为 0 导致耗时显示为负数的问题。 | | **网页截屏** | 原本依赖右键菜单与 `captureVisibleTab`，网站上按钮点了没反应。改用标准 Web API `getDisplayMedia()`，由浏览器弹出官方的「选择要共享的内容」窗口，抓帧后生成 PNG 预览并可下载。 | | **便签笔记** | 源码中 `sticky-notes/index.html` **缺少整个 UI 结构**，页面加载后完全空白。已根据 JS 实际需要的元素契约与既有样式重建标记。 | | **UUID / ID 生成**、**图表制作** | 两处对扩展工具栏按钮的 DOM 查询没有做空值保护，在网站下会抛 `TypeError` 导致后续初始化中断。已按同项目其它工具既有的写法补上保护。 | ## 品牌与素材本站对外品牌为 **MockJS**，已把界面中用户可见的 “FeHelper” 字样统一替换为 “MockJS”，并去掉了原 FeHelper logo 图片（`fe-48.png`）。批量改写脚本保留在 `tools/rebrand.js`。替换时有几条**刻意不动**，因为改了会出错或失真： | 保持原样 | 原因 | | --- | --- | | `#fehelper_alertmsg`、`.mod-fehelper`、`fehelper-tools.css`、`fehelper_view_mode` 等 | DOM id / CSS 类 / 文件名 / 存储键，内部标识符，用户不可见 | | `window.FeHelper`、`menuFeHelperSeting` | JS 变量名 | | `https://fehelper.com`、`github.com/zxlie/FeHelper` | 外部链接，改了会断 | | `==FeHelperMonkey==`（`page-monkey`） | **旧版文件格式标记**，`parseLegacyFhJs` 靠它导入旧 FeHelper 备份，改名会导致旧备份无法导入 | | README 中的上游项目名与归属声明 | 事实陈述：本站基于开源项目 FeHelper 构建 | > 顺带修掉的两处历史遗留：`options` / `popup` 里的「问题反馈」外链原本指向 > `github.com/zxlie/MockJS/issues`（该仓库不存在），已改回真实的 `zxlie/FeHelper`。「MockJS Inline CSS」标记只改了写入端，解析端同时兼容旧的 `FeHelper Inline CSS`，以保证旧备份里的自定义样式仍能被读取。 `fe-48.png` 的移除涉及以下位置：首页 hero 品牌图、`options` / `popup` 的品牌位与空状态插图，以及 `qr-code` 的“默认中心 logo”。由于该 logo 是二维码“默认”图标的唯一素材， **“默认”图标选项已一并移除**（保留“不要”与“上传自定义图标”）。 ## 已知限制以下能力在扩展里依赖「对任意网页操作」的权限，作为纯静态网站无法等价实现，页面本身可正常打开，功能受限之处已在页面内如实说明： - **网页截屏**：整页滚动截屏、后台静默截取受浏览器安全模型限制，网页版做不到；真实画面需要在浏览器弹出的共享选择器里**人工点选**一次。 - **页面取色**：取色基于**当前视口快照**而非实时截图，动画 / 视频 / canvas / 跨域 iframe 只会取到静止或缺失的像素（与扩展里 `captureVisibleTab` 的静态截图语义一致）；滚动或按 `R` 会重新采样。 - **页面取色 / 栅格标尺**：取色中或标尺开启时浮层会覆盖整页，页面自身的链接与按钮暂时不可点击（这是原工具的设计），按 `ESC` 退出；两页都提供了位于最上层的浮动退出按钮。 - **网页油猴**：脚本管理器界面可用，但无法像扩展那样把脚本注入到其它网站。 - **便捷思维导图**：源码在 MV3 下已受限，页面保留了历史归档导出与在线版迁移入口。 - **AI 智能助手**：需要自行配置第三方 API Key。 - **简易 Postman**：Mock 服务基于 Service Worker，在 `file://` 下不可用，请用 `http://` 访问。 - 「请作者喝咖啡」按钮在静态站点下不会报错，但没有实际后端可调用（同类的「工具市场 / 全部工具」按钮则已由兼容层映射为跳转本站首页，可正常使用）。 - `options/`、`popup/`、`dynamic/`、`devtools/hello-world/` 属于扩展自身的控制页与示例，不属于工具导航的一部分，保留备查（`dynamic/` 加载后会跳转到 `options/`，校验脚本会标注这一点）。 ## 说明本站基于开源项目 [FeHelper](https://github.com/zxlie/FeHelper) 的源码构建，工具逻辑与第三方库版权归原作者所有。