把本地插件变成博客在线实验室：从私有项目到公开 Demo

插件在本机能运行，不代表它已适合公开。公开化是一次产品化和威胁建模：找出可展示能力，剥离宿主 API、内部配置、真实业务数据与未授权资源，再将功能拆成隔离、易理解、可失败的演示。

先盘点能力与边界

插件能力	可公开形态	需要先解决的问题
Canvas/图像处理	本地图片压缩、裁剪和导出	MIME 检查、像素/内存上限、CORS 和本地处理说明
画板/3D	示例图层、预置模型和手动控制	模型许可、下载体积、WebGL 兼容和销毁生命周期
文字转语音	Web Speech API 或样例音频	浏览器支持、用户手势、语言与语音权限
文本校对	预置示例和浏览器端规则	文本不上传、模型文件大小、错误定位和误报说明
小游戏	单页面试玩	触屏、键盘、暂停、重开和低性能降级

每项标注宿主依赖、服务端依赖、第三方包、许可、网络请求、文件读写、采集字段和当前测试状态。对无法解释来源的代码、密钥、内部域名、用户数据或第三方素材先停止发布，不用换变量名掩盖来源。

做到可独立维护

为公开能力建立独立入口和最小组件 API；将宿主事件、全局 store、构建宏、私有包和内部授权替换成公开接口或 fixture。构建产物不要包含 source map 中的敏感绝对路径、私有仓库 URL 或环境变量。服务端能力默认不对外开放；必要 API 只接受固定操作和受限数据，不做通用代理。

文件处理优先在浏览器完成。用 createObjectURL 前检查大小和格式，结束或路由切换时 revoke；Canvas 注意像素总量、内存峰值和跨域图片污染。模型在首次点击时加载，显示大小和进度，失败时保持其余页面可用。

接入前的闸门

仓库与依赖的许可、字体、图标、模型权重、示例图片和音频逐一确认。
扫描 token、密码、公司域名、内部包名、构建变量、日志样本和真实用户数据。
删除不必要网络权限；记录每个外部请求目的，禁止把私人文本送往第三方分析接口。
补单元/构建检查，再在原插件宿主或隔离 Demo 中实际操作；只过 lint 不等于功能成立。
设维护人、兼容浏览器、依赖升级策略、上传限制、报告渠道和下线方式。

让文章与 Demo 互相解释

每个实验包含“能做什么、输入是什么、运行在哪里、数据是否离开浏览器、当前限制是什么”。文章里的可运行示例调用实验室白名单能力，不直接执行 Markdown 内任意脚本。读者可以复制代码，但不会把作者本机配置或隐藏文章带入公开 iframe。

只有代码、许可和隐私都能说明白，且桌面/移动端真实跑过，才把它标成“可在线体验”。其余项目可以写工程复盘，明确这是架构说明而非线上实现。

分阶段发布

先做静态扫描、依赖与许可证清单、构建体积报告，再用隐藏预览检查鼠标、触屏和键盘路径。确认外部请求只去允许的公开来源、文件处理留在浏览器、日志不含输入全文后再加入公开入口。发布后保留单项开关和独立错误指标；下线时同时移除导航、缓存资源和过期上传，并为旧文章链接提供说明。

模型权重、字体、图标、图片素材和 npm 依赖的许可要分别核查。兼容性说明记录真实测试浏览器和日期；“本机能运行”不代表低端手机、无 GPU 或隐私模式也可用。

浏览器能力和资源预算

麦克风、剪贴板、通知、文件系统等能力应在用户主动操作后申请，先检查权限和浏览器支持，再给出拒绝时的替代路径。不要为启动一个小工具就请求整组权限。音频、模型和大 WASM 延迟到用户需要时加载；给出资源大小、加载进度和取消入口，并为低内存设备提供纯文本或静态预览。

组件必须有统一卸载路径：停止 MediaStream tracks、关闭 AudioContext、断开 observer、移除事件监听、终止 Worker、撤销对象 URL、清空定时器并释放 WebGL 资源。路由切换、重复打开、浏览器前进返回和错误中断都应验证没有后台任务继续运行。对公开 Demo 记录启动失败率、加载耗时和客户端错误，但日志只保留聚合指标，不上传用户输入。

参考：MDN iframe sandbox、MDN postMessage。