夜雨聆风
这是法院一张网系列文章
现有的一张网能用但不好用，想要用的顺畅难免需要加个“外挂”魔改一下。
最近发现Chrome商店的“法院在线服务”插件很有意思，所以怀着学习的心态让AI分析了一遍。
整个扩展由四层组成：最上面是法院官网和百度 OCR 两个外部服务，中间是常驻后台的 Service Worker，再往下是注入官网的 Content Script，最下面是 Popup、Options、Login 三个 Vue 界面。
图 2 端到端数据流
数据流动有三条主线。业务同步线把法院的案件、消息、送达从官网拉到本地存储；token 桥接线把登录态从页面传给后台；验证码 OCR 线把图片送到百度识别后回填。
图 3 manifest.json 逐字段拆解
MV3 强制把后台脚本改成 Service Worker，并显式声明 permissions、host_permissions 和 web_accessible_resources。少了任何一项，对应能力就用不了。
图 4 background.js 五模块结构
打包后的 background.js 入口里，逻辑被拆成五个模块：API 客户端、同步引擎、存储缓存、消息路由、登录窗口。每个模块只管一类事。
图 5 API 客户端模块拆解
API 客户端对外封装了 6 个函数，分别对应法院的登录、案件列表、消息、送达、详情、文书等接口。模块内部用 VL、Eh、xj 等短名区分不同请求。
图 6 同步引擎时序图
一次同步分 7 步：先读本地数据，再调接口拉取，接着归一化处理，然后写回存储并通知 UI，最后刷新角标。
图 7 消息路由 18 处理器
后台通过 chrome.runtime.onMessage 注册了 18 个 COURT_* 处理器，覆盖获取状态、刷新、保存设置、下载文书等动作。
图 8 登录窗口与会话管理
登录有两种：静默登录在后台悄悄完成，手动登录弹出一个内嵌官网的窗口。两者最终都把 token 存进 Storage。
图 9 init.js 内容脚本双职责
init.js 注入到法院官网页面后，同时从两个方向工作：一方面把页面里的 token 抓出来传给后台，另一方面监听表单并自动填表登录。
图 10 验证码识别状态机
验证码处理是一台状态机：加载图片、调 OCR、比对结果、回填或重试，最多循环 5 次。
图 11 popup.js 界面结构
弹窗用 Vue 3 写成，结构很清晰：state 放数据，computed 做派生，methods/actions 放动作，template 负责渲染。
图 12 options 与 login 界面
Options 页是配置中心，保存法院账号、密码，以及百度 OCR 的 API Key 和 Secret。Login 页用 iframe 嵌进法院登录页，由扩展接管提交。
这个插件值得学的地方
第一，直接复用一张网Token拉取信息，省得唠人口舌（有些律师会主观认为存密码在上面会泄露）。
第二，下载文书、接收法官信息，功能很克制做的刚刚好。
第三，这也许是第一个上架Chrome的一张网插件，相信未来会有更多一张网插件出现在Chrome应用商店。
