告别难看的 JSON：这款 29 KB 的开源扩展，可能是程序员唯一需要的浏览器查看器
一、每天都在重复的小困扰
不知道你有没有过这样的时刻——
线上排查问题,从服务器拉下来一份 JSON 日志，在浏览器里打开，扑面而来是密密麻麻的一行乱码：
{"timestamp":"2024-...","level":"error","message":"...","stack":[...],"context":{...}}整个屏幕一行，光是找level字段就得 Ctrl+F。
或者你点开同事甩过来的某个.md文档链接，浏览器毫不犹豫地把它显示成纯文本——满屏# 标题、**加粗**、- 列表的源码，完全谈不上阅读体验，你还得去应用商店再装一个 Markdown Viewer 才行。
每次遇到这些场景，你大概都会问自己一句：为什么浏览器不能原生支持这些格式的友好查看？
今天介绍的这款开源扩展，就是来终结这个问题的。
二、Plain View：6 种格式，一个扩展，全部解决
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 |
|---|---|---|---|---|
| 支持格式数 | 1 | 1 | 单格式各一站 | 6 种全打通 |
| 本地文件直接预览 | 部分 | 部分 | ❌ 需复制粘贴 | ✓ 拖入即可 |
| CSV 表格化查看 | ❌ | ❌ | 部分支持 | ✓ |
| CSV 单元格在线编辑 | ❌ | ❌ | ❌ | ✓ |
| CSV 自动下载拦截 | ❌ | ❌ | 无关 | ✓ |
| 表头滚动固定 | 无关 | 无关 | 部分 | ✓ |
| 暗黑模式 | 部分 | 部分 | 部分 | ✓ |
| 数据隐私 | 本地 | 本地 | ⚠ 数据上传到服务器 | ✓ 全本地处理 |
| 安装包体积 | 数百 KB | 1-2 MB | N/A | ~28 KB |
| 完全开源 | 部分 | 部分 | 多数闭源 | ✓ |
| 免费 | ✓ | ✓ | 个别收费 | ✓ |
结论很清楚——在「多格式 + 体积 + 功能深度 + 隐私」这四个维度上同时拿下全勤，Plain View 在当下市场上几乎找不到对手。
五、一个让人意想不到的细节：整个扩展只有 28 KB
这是个什么概念？
- 一张普通手机照片大约 2-5 MB，Plain 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-view
- Gitee(国内访问更快)： 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 种格式、跨浏览器、隐私安全。
值得装一下。
仓库地址再贴一次，方便复制：
- GitHub：https://github.com/777vv/plain-view
- Gitee：https://gitee.com/vv777/plain-view
如果觉得有用，欢迎到仓库点个 Star —— 这是对作者最大的鼓励，也方便你以后再次找到。
如果你身边有同事天天被 JSON 乱码、CSV 强制下载、Markdown 源码这些事折磨，转发给他就是对他最大的善意。
加入 AI 编程学习交流群
我建了一个AI 编程学习交流群，聊 AI 编程工具、实战经验、踩坑总结、好用的开源项目 —— Plain View 就是借助 AI 编程开发出来的开源项目之一。
欢迎扫码加入，一起折腾：
(本文介绍的扩展为作者自研开源项目，仅做技术分享，不涉及任何商业利益。)