企业官网建设流程全解析

Claude Counter 三大功能详解：Token 计数、5 分钟缓存倒计时与 5 小时/7 天用量进度条

【免费下载链接】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

Claude Counter 是一款极简的 claude.ai 浏览器扩展，能在聊天页面顶部实时显示Token 计数、5 分钟缓存倒计时，并在输入框下方绘制5 小时 / 7 天用量进度条，帮助你直观掌握对话长度、缓存状态与订阅额度。所有数据均在本地处理，无服务器、无追踪，全程免费使用。

📦 快速安装：三种方式任选

Chrome / Edge / Chromium：拖拽即可加载

1. 从发布页下载压缩包（claude-counter-0.4.2.zip）
2. 打开chrome://extensions，开启右上角开发者模式
3. 直接把 zip 文件拖进页面，扩展即完成安装

Firefox：一步加载 .xpi

下载claude-counter-0.4.2.xpi，拖入任意 Firefox 窗口，点击添加即可。

油猴脚本方案（无需装浏览器扩展）

如果你偏好油猴（Tampermonkey）等脚本管理器，直接安装 claude-counter.user.js 即可，功能与扩展完全一致。

安装完成后，只要打开 claude.ai 页面，功能自动生效，无需任何额外配置。

🔢 功能一：Token 计数——一眼看穿对话长度

对话页标题栏下方会出现~19,646 tokens这样的文字，右侧附带一条迷你进度条，以200k Token（Claude 的最大上下文长度）为满格基准。

• 进度条接近满格时，说明上下文即将被压缩（compaction），建议适时开新对话。
• 计数不包含系统提示词，且由于使用通用分词器，实际数字可能与 Claude 内部统计略有出入。
• 一旦上下文被压缩，计数自动失效，进度条也随之隐藏，避免误导。

核心逻辑在 src/content/tokens.js，其中o200k_base分词器负责近似计数；200k 上下文上限与 5 分钟缓存窗口等关键常量定义在 src/content/constants.js#L13-L16。

⏱️ 功能二：5 分钟缓存倒计时——省钱的秘密武器

截图中cached for 3:49就是缓存倒计时。Claude 对最近生成过的内容会保留一个5 分钟缓存窗口，窗口内继续追问时，命中的内容计费会显著更低。

• 倒计时归零后，缓存标签自动消失，继续对话按原价计费。
• 看到倒计时还有余量时，趁热追问比"过一会儿再聊"更划算。
• 倒计时会随每次助手回复自动刷新，渲染逻辑见 src/content/ui.js#L412-L428。

📊 功能三：5 小时 / 7 天用量进度条——比 /usage 页更准

Claude 付费订阅有两套额度：**5 小时滑动窗口（Session）**和7 天周窗口（Weekly）。Claude Counter 直接读取 Claude 官方 API 的原始利用率（未取整），并配合 SSE 实时推送的message_limit消息，做到比官方 /usage 页面的四舍五入百分比更精确。

• Session 进度条：例如Session: 22.8% · resets in 4h 43m，一眼看到 5 小时窗口用了多少、还有多久重置。
• Weekly 进度条：例如Weekly: 78.5% · resets in 1d 21h，显示 7 天窗口的剩余空间。
• 进度条超过90%时自动变为红色警告，提醒你控制节奏。
• 白色竖线标记表示"当前时间"在窗口中的位置，方便你预判重置节点。

数据抓取与归一化逻辑见 src/content/main.js#L94-L118，网络层拦截在 src/injected/bridge.js。

🔒 隐私如何保障？

• 所有数据都留在本地浏览器，不经过任何第三方服务器。
• 唯一的网络请求是查询 claude.ai 自己的/usage接口。
• 无广告、无统计、无追踪代码，符合 manifest.json 中声明的data_collection_permissions: none。

🧩 工作原理速览（给好奇的你）

1. 扩展通过注入脚本 src/injected/bridge.js 拦截 Claude 的 API 响应，拿到对话数据与用量信息。
2. 使用内置分词器o200k_base做近似 Token 计数（见 src/content/tokens.js）。
3. 监听页面 DOM 变化，在你切换对话时自动把 UI 重新注入到新页面（见 src/content/ui.js#L191-L217 中的MutationObserver）。

❓ 常见问题

Q：为什么 Token 数和 Claude 显示的不完全一样？A：扩展使用通用分词器估算，且不含系统提示词，数字仅作参考。

Q：缓存倒计时消失了怎么办？A：说明 5 分钟窗口已结束，继续对话将按原价计费，等下次回复后注意新倒计时即可。

Q：进度条变成红色是什么意思？A：表示该窗口已使用超过 90%，接近上限，建议稍作休息或换到下一个窗口。

📝 小结

Claude Counter 用不到百 KB 的轻量体积，把 Token 长度、缓存窗口、订阅额度三件事一目了然地展示在聊天界面上，是重度 claude.ai 用户的实用小工具。完整安装说明见 README.md，样式与动画定义在 src/styles.css。

【免费下载链接】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