1. 项目概述一个浏览器扩展帮你管好AI订阅账单不知道你有没有这种感觉每个月信用卡账单出来的时候总有几个“熟悉的陌生人”——那些你为了尝鲜或者工作需要而订阅的AI服务比如ChatGPT Plus、Claude Pro、GitHub Copilot。它们单个看可能不贵但加起来就是一笔不小的开销更头疼的是它们的扣费周期还各不相同稍不留神就忘了取消钱就这么悄无声息地被划走了。我自己就吃过这个亏。去年为了测试几个大语言模型一口气开了四五个订阅结果有个月工作特别忙完全忘了这茬等收到账单才发现一个已经不怎么用的服务默默扣了我半年费。痛定思痛我决定自己动手做一个能集中管理所有AI订阅的工具这就是SubLens诞生的初衷。简单来说SubLens是一个开源的Chrome浏览器扩展。它的核心功能就一个把你所有AI服务的订阅信息包括当前套餐、价格、下一次扣费日期全部集中在一个仪表盘里展示。你一眼就能看到这个月总共要在AI上花多少钱哪个服务快到期了哪个服务有折扣价。所有数据都只存在你的浏览器本地不用担心隐私泄露。它就像给你的AI订阅装了一个“后视镜”和“仪表盘”让你对自己的数字消费了如指掌。2. 核心功能与设计思路拆解2.1 为什么需要一个专门的AI订阅管理器你可能会问用日历提醒或者记账软件不行吗当然可以但不够“丝滑”。首先手动记录费时费力价格变动或套餐升级后很容易忘记更新。其次很多AI服务的账单页面设计得并不直观你需要点进去、登录、找到账单页面才能看到详细信息这个过程本身就构成了使用障碍。SubLens的设计思路是“无感聚合”和“即时可视”。无感聚合扩展在后台自动访问你已登录的各个AI服务提供商页面如 platform.openai.com, claude.ai通过解析页面DOM结构提取出关键的订阅信息。你不需要手动输入任何数据。即时可视点击扩展图标一个聚合了所有信息的弹窗Popup立刻出现。价格、周期、剩余天数以卡片形式清晰排列总花费自动累加。这解决了“信息孤岛”问题把分散在各个标签页里的数据汇总到了一个统一的视图里。这个设计背后有一个重要的技术选型考量为什么是浏览器扩展而不是一个独立的Web应用或桌面应用核心原因在于身份认证Authentication。要读取你的订阅信息扩展需要能访问那些你已经登录的网站页面。浏览器扩展天然拥有访问当前标签页的权限可以无缝获取你已登录的会话状态。如果做成独立应用反而需要你为每个服务单独配置API Key或重新登录体验上倒退了一大步。2.2 功能矩阵不止是看个总数从项目介绍里我们可以看到SubLens的功能相当扎实我根据自己的开发和使用经验把这些功能分成了几个层次1. 核心数据层必须要有多服务支持首批集成了ChatGPT、Claude、GitHub Copilot、Google One和Cursor。这覆盖了目前主流的文本生成、代码辅助和云存储服务。成本追踪显示每个服务的计划名称、当前价格。一个很贴心的细节是支持显示“折扣价/原价”对比这对于那些享受了首年优惠或者教育折扣的用户非常实用能提醒你优惠何时结束。周期提醒精确显示下一个账单日期和剩余天数。这是避免“忘记取消”的核心防线。2. 交互体验层提升效率工具栏徽章扩展图标上会直接显示付费订阅的数量。这是一个轻量但极其有效的提醒让你不用点开就知道自己有几个“活着的”订阅。拖拽排序你可以按使用频率、扣费日期或者任何你喜欢的顺序排列这些卡片。顺序会自动保存。双击快捷操作这是UI设计上的一个小巧思。双击Logo刷新所有数据双击卡片跳转到该服务的账单页面双击“Paid”计数器高亮所有付费服务。这些操作减少了按钮数量让界面更简洁。3. 个性化与安全层用得舒服、放心主题切换深色、浅色、跟随系统。对于我这种常年写代码的人来说深色模式是刚需。多语言支持英文和简体中文并且日期、价格的格式会根据语言环境自动适配例如中文显示“”英文显示“$”。隐私优先所有数据存储在浏览器的chrome.storage.localAPI中不上传任何服务器也没有任何外部数据分析Analytics代码。在这个数据敏感的时代这一点至关重要。3. 技术实现与核心环节解析3.1 架构概览一个现代浏览器扩展的组成SubLens是一个基于Manifest V3规范的Chrome扩展。V3是谷歌推行的新标准主要加强了安全性比如用Service Worker替代了背景页Background Page。整个项目的技术栈非常“现代前端”语言TypeScript提供类型安全这对维护和扩展非常友好。构建工具Vite极快的开发服务器和构建速度。UI框架React Tailwind CSS快速构建美观、响应式的用户界面。状态管理Zustand一个轻量且易用的状态管理库。项目结构很清晰sublens/ ├── src/ │ ├── background/ # Service Worker负责后台数据抓取 │ ├── content/ # 内容脚本注入到特定页面抓取数据 │ ├── popup/ # 点击图标弹出的主界面React App │ ├── providers/ # 各个AI服务提供商的数据抓取逻辑 │ └── i18n/ # 国际化语言文件 ├── public/ # 静态资源如图标、Logo └── manifest.json # 扩展配置文件3.2 数据抓取如何安全地获取订阅信息这是整个扩展最核心、也最复杂的部分。我们不能直接调用这些服务的官方API因为需要用户授权且可能不稳定所以选择了页面内容解析Content Scraping的方式。但这绝不是简单的“爬虫”需要非常谨慎的设计。1. 权限声明首先在manifest.json中我们需要为每个支持的服务声明主机权限Host Permission。例如host_permissions: [ https://platform.openai.com/*, https://claude.ai/*, https://github.com/* ]这告诉浏览器和用户本扩展需要访问这些网站的权限。用户在安装时会看到明确的提示。2. 提供者模式Provider Pattern每个服务如ChatGPT都有一个独立的Provider文件如src/providers/chatgpt.ts。这个文件导出一个实现了SubscriptionProvider接口的对象。这个接口定义了如何获取数据interface SubscriptionProvider { name: string; logo: string; fetchData: () PromiseSubscriptionData | null; // 核心抓取函数 url: string; // 该服务的账单页面地址 }这种设计模式的好处是高内聚、低耦合。新增一个服务比如Midjourney只需要新建一个Provider文件实现这个接口然后在入口处注册即可不会影响其他任何代码。3. 内容脚本Content Script与后台通信抓取逻辑写在内容脚本里。当Popup打开或用户手动刷新时后台的Service Worker会向每个活跃标签页中对应服务的内容脚本发送消息触发fetchData函数。fetchData函数内部会使用document.querySelector等DOM API根据预先分析好的CSS选择器定位到页面中显示套餐名称、价格、下次扣费日期的HTML元素并提取其中的文本。提取到的原始文本如“$20/month”、“Next billing: Apr 15, 2024”需要经过数据清洗和标准化转换成程序内部统一的SubscriptionData对象。这个对象通过chrome.runtime.sendMessageAPI发送回后台Service Worker。Service Worker收集齐所有Provider的数据后将其存储到chrome.storage.local并通知Popup界面更新。重要提示与避坑经验页面抓取非常脆弱服务的UI一旦改版你写好的CSS选择器可能就失效了导致抓不到数据。因此选择器要尽量稳健优先选择带有明确>