MutationObserver 实战Claude Counter 如何让界面在 SPA 导航与 DOM 重建中永不丢失【免费下载链接】claude-counterA minimal browser extension that shows token count, cache timer, and usage bars on claude.ai.项目地址: https://gitcode.com/gh_mirrors/cl/claude-counterClaude Counter 是一款 claude.ai 浏览器扩展在聊天界面实时显示 token 计数、缓存计时器和用量进度条。但 claude.ai 是典型的 SPA 单页应用切换会话、重建组件时会大面积重绘 DOM任何注入的 UI 都可能被冲掉。本文以这个项目为例讲清楚如何用 MutationObserver 实现注入即挂载、丢失即重挂让界面元素永不丢失。为什么注入的 UI 会失踪传统多页站点里把元素追加到页面即可一劳永逸。但 SPA 的每次跳转都不刷新页面框架会卸载并重建整块 DOM你注入的节点一旦被从文档树移除引用还在节点却已经死了。Claude Counter 的解法是三步走只创建一次所有 UI 节点头部计数区、用量条只创建一次保存在类实例字段里不随页面重建而丢弃监听锚点UI 挂在页面的稳定锚点旁如data-testid选择器锚点出现就挂载监听丢失DOM 观察者持续检测我的节点还在文档里吗不在了就等锚点重现后再挂回去。具体实现见 ui.js。waitForElementMutationObserver 等待元素出现轮询setInterval 反复 querySelector会白白消耗性能。项目封装了一个基于 MutationObserver 的等待函数 waitForElement核心思路先查一次元素已存在则直接返回否则用观察者监听document.body的子树变化一旦元素出现立刻disconnect()并返回支持超时参数超时自动断开避免观察器泄漏。它在每次路由切换后被调用等待两个锚点出现模型选择器和聊天菜单按钮选择器定义在 constants.js最长等 60 秒。自动重新挂载_observeDom 的丢失检测模式核心逻辑在 CounterUI._observeDom一个长驻的 MutationObserver 监听整个body的子树变化每次触发时检查两个事实用量条是否还在文档里、头部容器是否还在发现丢失且没有进行中的重挂任务时调用waitForElement等锚点出现然后重新把同一个节点挂回去——数据状态原封不动只是换了个位置。usageReattachPending/headerReattachPending两个标志位保证不会重复触发重挂。这是 MutationObserver 最实用的丢失检测套路不关心页面怎么重建只关心我的东西还在不在。SPA 导航感知劫持 history 与分支按钮main.js 的 observeUrlChanges 通过cc:urlchange自定义事件和popstate感知 URL 变化后退/前进按钮也能覆盖。事件是谁发的是页面主世界里的桥接脚本 bridge.js它抢在框架缓存之前包装了history.pushState/replaceState每次调用后派发cc:urlchange。这也是 SPA 监测的经典手法——原生事件无法感知 URL 静默变化只能自己埋桩。更细节处main.js 还会监听上一条/下一条分支切换按钮点击后用一个一次性MutationObserver 盯着分支指示器的文本文本一变就刷新会话数据60 秒无变化自动清理。观察者用完即断是防止泄漏的关键习惯。主题同步监听属性变化的第三种用法第三个观察器专门盯html的data-mode属性见 _observeTheme用户切换明暗主题时观察者被触发进度条的描边、填充、标记颜色随之重刷。属性监听attributesattributeFilter是 MutationObserver 的第三种典型用法比轮询dataset精确得多。安装体验3 步跑起来Chrome / Edge / Chromium下载发行版 zip打开chrome://extensions开启开发者模式把 zip 拖入页面即可Firefox下载 xpi 文件拖入任意 Firefox 窗口点击添加Tampermonkey 用户脚本直接安装 claude-counter.user.js。扩展只在 claude.ai 页面激活manifest.json 中的content_scripts配置全部数据本地处理无外部服务器、无追踪。小结MutationObserver 三大套路套路用途项目出处等待元素出现锚点就绪后挂载 UImain.js丢失检测 重挂DOM 重建后 UI 自愈ui.js属性/文本变化监听主题同步、分支切换ui.js一句话总结节点只建一次、挂在锚点旁、观察者负责找回它再配合用完即断的清理就能让注入式 UI 在 SPA 的 DOM 翻涌中稳如磐石。更多原理与许可说明可阅读 README.md 与 THIRD_PARTY_NOTICES.md。【免费下载链接】claude-counterA minimal browser extension that shows token count, cache timer, and usage bars on claude.ai.项目地址: https://gitcode.com/gh_mirrors/cl/claude-counter创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考