李伟坚头像李伟坚AI 编程教练搜索
返回作品列表

网友作品 #000034 · 提交于 2026/08/05

Chrome侧边栏插件：WPS多维表数据填写质检

★★★★★业余水平browser
Chrome侧边栏插件：WPS多维表数据填写质检 截图 1
Chrome侧边栏插件：WPS多维表数据填写质检 截图 2

1 / 2

作品作者

静观其变业余水平
使用 Skill
browser
提交你的作品

作品简介

这是一套 Chrome 侧边栏（Side Panel）扩展，用于检测 WPS 多维表格收集数据的填写质量：在侧边栏选择数据源与检查规则，一键开始检查，即给出总行数、通过数、错误数统计，并以饼图、柱状图分析与逐行错误明细呈现，可导出 CSV。技术上它实现了一套“页面主世界 → 内容脚本 → Side Panel”的完整桥接蓝图，解决扩展无法直接调用页面内 window.WPSOpenApi 对象的难题。

核心亮点

  • 质检工作台：数据检查、规则配置、设置、历史记录、调试信息分区管理，已读取行数实时显示
  • 规则化检查：按表启用活跃规则（如“每天需白班+夜班各一次”），违规行逐条列明细则与原因
  • 可视化结果：通过/错误占比饼图、按错误类型分布的柱状图，质检情况一眼可见
  • 结果导出：一键导出 CSV，便于存档与二次分析
  • 主世界桥接：page-bridge 在页面主世界读取 WPSOpenApi 的选区与图片字段并转为纯 JSON，attach.js 注入并转发消息，规避“Promise could not be cloned”等跨世界报错
  • 模板化蓝图：manifest、service-worker、内容脚本、侧边栏页面等以模板文件提供，可快速适配不同目标站点
  • Mock 验证页：内置模拟 WPS 页面，离线即可验证桥接链路、序列化与选区同步

技术与工具

  • 形态：Chrome 扩展（Side Panel 侧边栏 + Content Script 内容脚本 + Background 服务线程）
  • 关键技术：页面主世界注入、postMessage 纯数据序列化、SelectionChange 选区自动同步
  • 目标页面：默认针对 kdocs.cn（WPS 多维表格）配置 host_permissions，可按需修改匹配规则

开发过程

作者按“蓝图”思路组织开发：先把桥接链路拆成 page-bridge（读数据并序列化）、attach（注入与消息转发）、sidepanel（展示）三段模板，再用 mock 测试页离线验证链路完整性与数据正确性，最后到真实 WPS 页面验收整条函数链路。调试阶段 bug 较多，作者的应对是把报错信息持续扔给 AI 处理；多轮对话仍不满意时，重开对话并更换模型交叉比对。

适用场景

  • 多维表数据质控：自动核验业务填报数据的完整性与规范性，降低人工核验成本
  • 办公 SaaS 扩展开发：作为页面全局对象调用的通用桥接模板，快速开发适配各类办公产品的浏览器效率插件
原始提交内容（点开查看，可复制全文去问 AI）

Side Panel WPS 主世界桥接蓝图

适用场景

  • 浏览器插件要在 WPS 多维表格页面读取当前选区
  • 页面控制台能拿到 window.WPSOpenApi.Application，扩展里直接拿不到
  • 需要 Side Panel 展示图片、附件、选区信息
  • 需要保留“页面主世界 -> 内容脚本 -> Side Panel”完整桥接链路

蓝图目标

这个蓝图不是通用 side-panel 的替代品，而是 WPS 页面桥接专项模板。

它默认提供：

  • manifest.json.tmpl
  • src/background/service-worker.js.tmpl
  • src/content/attach.js.tmpl
  • src/content/page-bridge.js.tmpl
  • src/sidepanel/index.html.tmpl
  • src/sidepanel/sidepanel.js.tmpl
  • tests/mock-wps.html.tmpl

核心架构

  1. page-bridge.js

    • 运行在页面主世界
    • 读取 window.WPSOpenApi.Application
    • 读取选区和图片字段
    • 把结果转成纯 JSON

  2. attach.js

    • 运行在扩展内容脚本
    • 注入 page-bridge.js
    • 把页面 postMessage 转成扩展消息

  3. sidepanel.js

    • 运行在侧边栏
    • 请求读取结果
    • 展示图片

什么时候优先用它

  • 目标页面存在页面级 SDK、页面全局单例或业务前端挂载对象
  • 需要访问的对象是 window.xxx
  • 需要跨世界通信
  • 需要避免 #<Promise> could not be cloned

特别提醒

  • 这个蓝图默认针对 kdocs.cn 场景配置 host_permissions
  • 如果目标站点不同，要同步改 matches、host_permissions
  • 如果要读取的不只是图片，优先在 page-bridge.js.tmpl 里扩展序列化逻辑，不要直接把 SDK 原始对象往外传

本地验证建议

  • 如果暂时不能直连真实 WPS 页面，优先先用 tests/mock-wps.html.tmpl
  • 这个测试页会模拟：
    • window.WPSOpenApi.Application
    • ActiveView.Selection
    • rng.Value / cell.Value
    • 图片字段 LinkUrl 为普通字符串或 Promise
  • 它适合先验证：
    • 主世界桥接链路是否完整
    • postMessage 前是否做了纯数据序列化
    • SelectionChange 自动同步是否正常
  • 真实页面自动化验收时，默认优先直接打开 WPS 业务页面并验证 content-script -> page-bridge -> background/runtime 的函数链路
  • side-panel 交互页不再作为自动化必测项；是否展示符合预期，交给用户自行打开后反馈