告别难看的 JSON：这款 29 KB 的开源扩展，可能是程序员唯一需要的浏览器查看器

一、每天都在重复的小困扰不知道你有没有过这样的时刻——线上排查问题,从服务器拉下来一份 JSON 日志在浏览器里打开扑面而来是密密麻麻的一行乱码{timestamp:2024-...,level:error,message:...,stack:[...],context:{...}}整个屏幕一行光是找level字段就得 CtrlF。或者你点开同事甩过来的某个.md文档链接浏览器毫不犹豫地把它显示成纯文本——满屏# 标题、**加粗**、- 列表的源码完全谈不上阅读体验你还得去应用商店再装一个 Markdown Viewer 才行。每次遇到这些场景你大概都会问自己一句为什么浏览器不能原生支持这些格式的友好查看今天介绍的这款开源扩展就是来终结这个问题的。二、Plain View6 种格式一个扩展全部解决Plain View是一款基于 Chromium 内核的浏览器扩展(Chrome、Edge、Brave、Opera 等通用)目标只有一个——让你在浏览器里以友好的方式直接打开常见的文本类文件不再需要任何在线工具、不再需要切换软件、不再需要复制粘贴。它支持的文件格式包括格式后缀能力JSON / JSONP.json.jsonp美化 可折叠树视图Markdown.md.markdown完整 HTML 渲染SQL.sql自动格式化 语法高亮 搜索YAML.yaml.yml多色语法高亮CSV / TSV.csv.tsv可排序可编辑的表格视图LOG / TXT.log.txt按日志级别自动着色无论是 URL 直接打开、还是把本地文件拖进浏览器扩展都会自动识别格式并接管渲染。装上之后零配置所有格式默认全开。三、逐个格式拆开看每个都做得很扎实JSON不仅是美化还是一棵树把 JSON 美化成多行缩进只是基本功。Plain View 的 JSON 视图是一棵可折叠的树默认全部展开(很多扩展默认折叠的设计反而要逐层点开效率低)每个对象/数组节点旁边自动显示子项数量(比如12 keys/48 items)字符串里的 URL可以直接点击跳转数字、字符串、布尔值、null 用不同颜色区分顶栏可一键切换「原始内容」和「树视图」要找深层数据展开折叠几下就到。要复制原始一键切换。还自动支持 JSONP——myCallback({...})这种带函数包装的格式也能识别并美化。Markdown全功能 安全防护不仅渲染常规的标题、列表、加粗、链接、图片还完整支持表格、任务列表(- [x])、围栏代码块、自动链接。更重要的是——内置 XSS 防护。Markdown 文件里可能埋着javascript:/data:协议链接、可能塞着script标签、可能在 URL 里玩属性注入Plain View 会自动拦截这些危险协议转义所有原始 HTML确保打开任何来源的 Markdown 文件都安全。市面上不少 Markdown 查看器扩展对此完全不设防随手装一个就可能给自己开后门。SQL格式化得有水准SQL 美化是个细致活业内主流格式化工具的输出风格都不太一样。Plain View 借鉴了主流规范做了几件该做的事SELECT/INSERT/UPDATE/CREATE TABLE等关键字独占一行WHERE条件下AND/OR缩进 2 空格继续JOIN类型自动合并——LEFT JOIN orders o而不是LEFT一行JOIN一行IN (1, 2, 3)/VALUES (1, 2, 3)这种短列表保持单行不会把每个常量都换行造成又高又丑的输出CREATE TABLE的列定义自动换行每列一行长表也一目了然关键字 / 函数 / 字符串 / 数字 / 操作符 / 注释六色区分内置关键字搜索大文件也能瞬间定位YAML多色语义识别YAML 的视觉规则很重要—— 注释、锚点(anchor/*alias)、布尔值、字符串、文档分隔符---、tag!type都用不同颜色区分。Plain View 的高亮覆盖了所有常见 YAML 语法K8s YAML / Docker Compose / CI 配置文件看起来都舒服。CSV / TSV这部分是真正的杀手锏打开.csv可能是日常使用频率最高的场景之一。Plain View 在这里花了最多功夫有几个其它扩展几乎都不具备的特性1. 自动拦截 Chrome 的下载行为Chrome 默认会把.csv/.tsv当附件强制下载根本不让你预览。Plain View 监听浏览器下载事件识别到本地 CSV 就自动取消下载改用扩展内置的预览页面打开。拖文件进去 → 直接看表格不再「先下载、再打开 Excel」。2. 表头永久固定横向滚动条永远在视口底部数据多了向下滚表头跟着滚走找不到列名—— 这是几乎所有简陋 CSV 扩展的通病。Plain View 的表头滚动时一直固定在顶部。同时表格的横向滚动条始终贴在视口底部不需要拉到数据最底下才能左右拖动。3. 双击单元格直接编辑数据里发现个错字想改在浏览器里就能改—— 双击单元格变成输入框回车或者点击其它地方就保存。改过但未保存的单元格右上角会自动出现一个小星号(✱)提醒。4. 编辑后的「复制」「下载」拿到的就是最新数据改完之后点工具栏的「复制」或「下载」按钮得到的就是你编辑后的最新 CSV而不是原始文件。这意味着 Plain View 在不修改源文件的前提下提供了完整的「在浏览器里看 改 导出」工作流日常处理小数据集真的可以告别 Excel。5. 表头一键排序点列表头按该列升序;再点一次降序。中文、英文、数字混排都能正确处理。LOG / TXT日志一眼分级日志文件最大的痛点是「重要信息淹没在普通行里」。Plain View 扫描每一行识别ERROR/FATAL/WARN/INFO/DEBUG/TRACE/VERBOSE等级别关键字自动用不同颜色区分整行。一眼就能定位到错误和警告告别一大片黑白文字里捞针的痛苦。四、和同类产品横向对比市面上不是没有类似工具但它们都有自己的明显短板要么只支持单一格式要么体积臃肿要么功能粗糙要么数据外泄。做个直观对比能力JSON 类扩展Markdown 类扩展在线格式化网站Plain View支持格式数11单格式各一站6 种全打通本地文件直接预览部分部分❌ 需复制粘贴✓ 拖入即可CSV 表格化查看❌❌部分支持✓CSV 单元格在线编辑❌❌❌✓CSV 自动下载拦截❌❌无关✓表头滚动固定无关无关部分✓暗黑模式部分部分部分✓数据隐私本地本地⚠ 数据上传到服务器✓ 全本地处理安装包体积数百 KB1-2 MBN/A~28 KB完全开源部分部分多数闭源✓免费✓✓个别收费✓结论很清楚——在「多格式 体积 功能深度 隐私」这四个维度上同时拿下全勤Plain View 在当下市场上几乎找不到对手。五、一个让人意想不到的细节整个扩展只有 28 KB这是个什么概念一张普通手机照片大约 2-5 MBPlain View 是它的百分之一不到市面上同类「多格式查看器」扩展普遍在1-10 MB之间一些只支持单一格式的扩展也常常打到 500 KB 以上我们是怎么做到的所有渲染器都是从零手写的 TypeScript—— JSON 树、Markdown 渲染器、SQL 格式化器、YAML 高亮、CSV 解析器全部不依赖任何第三方库。不打包 markdown-it、不打包 sql-formatter、不打包 papaparse、不打包 js-yaml。编译流程也极致简化—— 没有 webpack、没有 vite、没有 esbuild只有一个tsc加一段几十行的后处理脚本。这种「极致克制」带来的不只是体积优势加载更快扩展启动几乎无延迟代码透明所有逻辑都在仓库里你能直接看到的几个 TypeScript 文件里任何人都能在半小时内读完整个项目没有供应链风险不会因为某个上游 npm 包被植入恶意代码而拖你下水安全审计成本极低审一遍整个项目代码也就几十分钟的事六、数据安全这件事我们的立场很硬很多在线工具(各种 jsonformatter.org / SQL formatter / CSV viewer 网站)的工作方式是你把数据粘贴到他们的网页他们的服务器处理后返回结果。听起来没问题但你想过没有公司内部 JSON 接口的返回里可能有用户敏感数据SQL 查询语句里可能有表名、字段名、生产环境的库结构CSV 里可能就是用户列表、订单数据、内部报表这些东西每次贴到在线工具上都是一次潜在的数据外泄而且你无从追溯。Plain View 是一个浏览器扩展所有处理都在你本地浏览器进程里完成零网络请求(除了从扩展内部加载渲染器代码)零后台调用零遥测零数据上报你的数据永远不会离开你的电脑。七、如何安装Plain View完全开源、永久免费GitHub 和 Gitee 双仓库同步GitHub https://github.com/777vv/plain-viewGitee(国内访问更快) https://gitee.com/vv777/plain-view普通用户不需要任何 Node.js / 编程环境几步就装好到上面任一仓库的Releases / 发行版页面下载最新的plain-view.zip(约 28 KB)解压到任意目录浏览器打开chrome://extensions(Edge 用户用edge://extensions)打开「开发者模式 / 开发人员模式」开关点击「加载未打包的扩展程序 / 加载解压缩的扩展」按钮选择刚才解压出来的目录完成。装好之后浏览器工具栏会出现 Plain View 的图标以后再打开任何支持的文件格式都会自动美化。八、写在最后Plain View 不是一个「大而全」的产品它只做一件事——让你在浏览器里看文件不再痛苦。它不追求功能堆砌而是把每个支持的格式做到主流体验之上;不追求「最低限度可用」而是把每个细节磨到比某些臃肿的商业扩展更顺手。如果你是一个每天打开 N 个 JSON 接口响应、读 N 份 Markdown 文档、查 N 张 CSV 数据、看 N 行日志的开发者——它会成为你浏览器里默默常驻、却几乎天天都用的小工具。开源、免费、28 KB、6 种格式、跨浏览器、隐私安全。值得装一下。仓库地址再贴一次方便复制GitHubhttps://github.com/777vv/plain-viewGiteehttps://gitee.com/vv777/plain-view如果觉得有用欢迎到仓库点个 Star —— 这是对作者最大的鼓励也方便你以后再次找到。如果你身边有同事天天被 JSON 乱码、CSV 强制下载、Markdown 源码这些事折磨转发给他就是对他最大的善意。加入 AI 编程学习交流群我建了一个AI 编程学习交流群聊 AI 编程工具、实战经验、踩坑总结、好用的开源项目 —— Plain View 就是借助 AI 编程开发出来的开源项目之一。欢迎扫码加入一起折腾(本文介绍的扩展为作者自研开源项目仅做技术分享不涉及任何商业利益。)