一款轻量级的开源浏览器插件Plain View:从JSON文件查看器到轻量文本工作台Plani View是什么Plani View是一款基于 Chromium 的浏览器扩展。把浏览器变成 JSON/Markdown/SQL等文件的友好查看器，同时插件内置了工作台功能，工作台集成了 JSON 格式化、Markdown实时预览、SQL美化、Base64编解码、URL、解析、翻译、文本对比、二维码生成、备忘录等常用功能。这次主要介绍一下工作台的能力。工作台总览打开方式很简单：点击浏览器工具栏的 Plain View 图标，在弹窗里点「打开工作台」。建议右键图标选「固定」,以后一键打开，用户可以自由开关其中功能模块。工作台采用左右分栏布局:左侧输入、右侧输出。顶部有一排功能切签(Chips)，点击即可切换模式。所有可编辑的区域都有行号和当前行高亮,支持拖拽文件到输入框自动加载。功能一：JSON 格式化这是工作台里用得最多的功能。左侧粘贴 JSON,右侧实时展示格式化结果。支持四种视图:格式化：带语法高亮和行号,key/string/number/boolean/null 各有配色压缩：去掉所有空白,变为一行(显示上自动换行,但复制时是不换行的原文)转义：把 JSON 转为可以在 JS 字符串里使用的转义形式去转义：反向操作,把转义后的字符串还原如果 JSON 格式有误,右侧不会空白静默——会显示一个友好的错误占位,同时自动定位到出错的行列号,告诉你问题在哪。功能二：Markdown / SQL 实时预览这两个模式本质上是「所见即所得」。左侧写 Markdown 或 SQL,右侧即时渲染高亮结果。Markdown 支持标题、列表、表格、代码块、任务列表等常见语法,危险协议(javascript: / data:)在渲染时自动屏蔽,没有 XSS 风险。SQL 模式自动格式化 SELECT / INSERT / UPDATE / CREATE TABLE 等语句,关键字、字符串、数字、注释各用不同颜色区分,带行号,长语句有横向滚动条。功能三：翻译工作台里内置了翻译功能,底层调用免费翻译 API。使用方式：左侧输入文本,点「英译中」或「中译英」按钮,右侧出结果。按钮就在输出区域顶部,蓝底白字,和 Plain View 的品牌色一致。长文本会自动分段逐片翻译,不用担心字符超限。两个按钮的语义很明确:「英译中」走 en→zh 通道,「中译英」走 zh→en 通道。翻译结果支持复制，切出翻译模式再切回来,如果左侧文本没变不会重复请求，直接展示上次结果。需要说明的是,翻译 API 有日配额限制,超出后会提示次日再试。这个限制来自上游服务，和扩展无关。功能四：文本对比这个功能是仿 IntelliJ IDEA 的对比视图设计的。左右两个编辑框并排,中间一条窄槽。输入两段文本后自动逐行对比:绿色行:右侧新增红色行:左侧被删除黄色行:两边都有但内容不同黄色行内还有词级高亮,精确到具体哪些字符变了中间窄槽在变更行处显示← / → 箭头,点击即可用一侧覆盖另一侧顶部工具栏显示差异统计，可以交换两侧、全部用左、全部用右。编辑框内置行号,滚动左右同步。对于经常需要对比配置文件、代码 diff、文章修改稿的开发者来说,这个功能应该很实用。功能五：二维码生成输入任意文本或 URL,自动生成二维码。二维码用 DOM 渲染(每个模块是一个 标签),确保像素级别清晰,手机相机扫码识别率比 Canvas 渲染高不少。底部有一键「下载 PNG」按钮,蓝底白字,用的是 Plain View 的品牌色。二维码采用 mask 7 + M 级纠错,经过多轮实测验证了扫码可靠性。功能六：备忘录这是一个轻量级的双栏纯文本便签。左右两栏各自独立,内容自动保存到 Chrome 本地存储(清除浏览器缓存不会丢失,卸载扩展才会丢)。关掉标签页再打开,之前写的内容还在。顶栏右侧有「导出」按钮,可以把两栏内容分别导出为 TXT 文件。支持行号和当前行高亮,写长文时定位方便。备忘录适合随手记录、临时粘贴、对比两段文字等场景。要说它的定位,就是「不是 Notion,也不打算是 Notion」——就是一页便签,打开即用,无学习成本。还有这些细节除了上面 6 个主要功能，还有一些值得一提的小改进：Base64 编解码：自动检测方向,支持编码和解码两种模式切换URL 解析：解码 URL 的同时,把协议、主机、路径、查询参数拆成表格展示拖拽文件：把 .json、.md、.sql 文件直接拖到工作台输入框,自动识别格式并加载内容行号 + 当前行高亮:所有可编辑区域都有行号,光标所在行有淡蓝色背景高亮,跟桌面 IDE 体验一致输出区统计：每种格式渲染完成后,输出区顶部显示「N 行 · M 字符」的统计信息QR码生成器值得一提:完全从零手写,实现了字节模式编码、Reed-Solomon 纠错码、8 种掩码、格式信息 BCH 编码等功能,支持 Version 1-10,纠错级别 M(15%)。开发过程中踩了不少坑——比如 dark module 被 format info 覆盖导致扫码失败、不同环境下 penalty 函数打分不一致导致选错掩码等,这些都是标准文档里不会告诉你的实战细节。工作台的文本对比功能也实现了一个完整的 Myers 行级 diff 算法加 LCS 词级 diff,对比结果的渲染用了三个叠加层(背景染色层、gutter 行号层、textarea 编辑层)来模拟 IDEA 的视觉效果。这部分的代码在 src/playground/diffView.ts,对 diff 算法感兴趣的朋友可以直接看源码。安装和源码：如何安装使用：直接下载已编译的 zip,无需 Node.js 环境：GitHub Release: https://github.com/777vv/plain-view/releasesGitee(国内更快): https://gitee.com/vv777/plain-view/releases解压后在 chrome://extensions 开启「开发者模式」,加载已解压的扩展程序即可。Edge 浏览器同理(edge://extensions)。或直接进入下面源码地址进行下载安装项目源码：欢迎对技术感兴趣的朋友 starGitHub: https://github.com/777vv/plain-viewGitee: https://gitee.com/vv777/plain-view最后：Plain View 从最初的「六种文件格式的查看器」到现在的「文件查看器 + 多功能文本工作台」,核心理念一直没变:轻量、零依赖、开箱即用。如果你平时经常在浏览器里查看 JSON 文件、对比文本差异、临时翻译一段文字、生成一个二维码——不用再去找在线工具了,点一下扩展图标就能搞定。欢迎试用、Star、提 Issue 或 PR。联系作者：如果也对编程感兴趣，想一起学习进步，欢迎联系项目作者VX：yuxi250428
夜雨聆风
