1. 项目概述一个帮你管好AI订阅账单的浏览器插件如果你和我一样订阅了不止一个AI服务——比如ChatGPT Plus用来日常对话和写作Claude Pro用来处理长文档GitHub Copilot写代码Cursor辅助开发再加上Google One存文件——那么每个月收到一堆账单邮件或者突然发现信用卡被扣款时那种“钱都花哪儿了”的茫然感你一定不陌生。SubLens就是为解决这个痛点而生的。它不是一个复杂的财务管理软件而是一个极其轻量、专注的浏览器扩展。它的核心功能只有一个把你所有AI服务的订阅信息集中在一个简洁的仪表盘上让你一眼看清每项服务的当前套餐、价格、下次扣款日期以及月度总花费。所有数据都存储在本地浏览器中没有云端同步没有数据分析纯粹就是一个贴在你浏览器角落的“订阅管家”。我最初发现这个项目时正是被这种极致的专注所吸引。市面上不缺记账App但专门为“AI订阅”这个新兴且高频的消费场景设计的工具却很少。开发者heartleo用前端技术栈TypeScript React打造了这个小巧的工具支持暗色/亮色/系统主题甚至提供了中英文双语界面细节考虑得很周到。对于同时使用多个AI服务的开发者、创作者或任何数字工作者来说这绝对是一个能提升效率、避免“订阅遗忘”的利器。2. 核心功能与设计思路拆解2.1 为什么需要专门的AI订阅管理工具在深入SubLens之前我们先聊聊为什么通用的记账软件不够用。我用过不少个人财务应用它们擅长归类餐饮、交通、购物等消费但面对“ChatGPT Plus - $20/月 - 下次续费4月15日”这样的信息时往往显得笨重。首先信息获取成本高。你需要手动创建一条“订阅”记录输入金额、周期并记住设置提醒。当你有5个以上的订阅时维护成本急剧上升。其次状态不直观。在通用软件里你看到的是一个冰冷的数字和一条记录无法快速感知“我还有几天就要为Claude付费了”或者“如果我下个月停掉Copilot能省下多少钱”这种动态的、决策相关的信息。SubLens的设计哲学是“零输入全自动”。它通过浏览器扩展的权限直接访问你已登录的AI服务官网如 platform.openai.com, claude.ai从页面中智能抓取解析你的订阅状态、套餐详情和账单周期。这意味着你安装好后几乎不需要任何配置仪表盘上就会自动出现你已订阅的服务卡片。这种被动式、无感的聚合正是其核心价值所在。2.2 多服务仪表盘信息聚合的艺术SubLens目前官方支持五大主流服务OpenAI的ChatGPT、Anthropic的Claude、GitHub Copilot、Google One以及Cursor。这个选型很有代表性覆盖了对话AI、代码助手、云存储和IDE集成工具正是多数科技从业者订阅清单的“最大公约数”。它的仪表盘Popup设计遵循了卡片式布局每张卡片代表一个服务提供商。这种设计的好处是信息密度高且结构清晰。每张卡片至少包含服务Logo与名称快速视觉识别。订阅状态明确显示是“Free”还是“Paid”如ChatGPT Plus。价格信息显示当前周期费用。一个精妙的细节是如果存在折扣例如年付优惠它会同时显示折后价与原价让你明确感知优惠力度。账单周期清晰标注“Monthly”月付或“Yearly”年付。下次账单日以“Due in X days”距离到期X天的形式显示这是一个非常人性化的时间表达比单纯的日期更直观。进度条直观展示当前计费周期已过去的天数比例让你对订阅周期的流逝有具象感知。所有这些信息被整合在一张不足巴掌大小的卡片里通过精心的排版和视觉层次做到了“一目了然”。你可以通过拖拽来调整卡片的顺序把最贵或最关心的服务放在最前面这个顺序会保存在本地。2.3 隐私优先与本地化存储架构作为一个需要读取你访问的网页数据的扩展隐私是用户最关心的问题。SubLens在这方面采取了非常保守和透明的策略这也是我信赖它的主要原因。它的所有数据包括抓取到的订阅信息、你的卡片排序偏好、主题和语言设置都只存储在浏览器的chrome.storage.localAPI中。这意味着数据不出浏览器信息不会上传到任何第三方服务器。扩展的更新是通过Chrome Web Store或你手动加载其功能逻辑本身不依赖网络传输你的个人数据。卸载即消失当你移除扩展时这些本地存储的数据也会被一并清理无残留。无追踪与分析项目明确声明不集成任何外部数据分析服务如Google Analytics。这种“隐私优先”的设计在当下显得尤为可贵。它把工具的控制权完全交给了用户符合这类敏感财务信息管理工具应有的伦理。在代码层面你可以看到它的网络请求仅限于对目标服务官网的访问以获取页面内容之后的所有处理都在本地完成。3. 详细安装与配置指南虽然项目提到Chrome应用商店版本“即将推出”但目前最可靠的方式是手动安装开发版。别被“开发版”吓到过程非常简单就像安装一个绿色软件。3.1 从GitHub Releases获取预构建版本推荐这是对非开发者最友好的方式无需安装Node.js或构建代码。访问发布页面打开项目GitHub仓库的 Releases 页面。你会看到以sublens-vX.X.X.zip命名的压缩包例如sublens-v1.0.0.zip点击下载最新版本。解压文件将下载的ZIP文件解压到你电脑上一个方便找到的目录比如“下载”文件夹。解压后你会得到一个包含dist、public等子文件夹的目录。启用Chrome开发者模式在Chrome浏览器地址栏输入chrome://extensions/并访问。你会看到一个扩展管理页面。找到页面右上角的“开发者模式”开关并将其打开。打开后页面顶部会多出“加载已解压的扩展程序”、“打包扩展程序”等按钮。加载扩展点击“加载已解压的扩展程序”按钮。在弹出的文件选择器中导航到你刚才解压的文件夹选择里面的dist文件夹注意是选择dist这个文件夹本身而不是进入后再全选内容然后点击“选择文件夹”。验证安装如果一切顺利你会在扩展列表里看到SubLens的图标和卡片。同时浏览器工具栏通常地址栏右侧会出现SubLens的图标一个类似眼睛或透镜的Logo。点击图标就能弹出我们之前介绍的订阅仪表盘了。注意通过这种方式安装的扩展在每次完全关闭并重启Chrome后可能会被禁用并提示“请停用以开发者模式运行的扩展程序”。这是Chrome的安全策略。你只需要再次进入chrome://extensions/页面找到SubLens重新启用它即可。或者你可以选择在提示时点击“取消”扩展会暂时保持启用状态。等待扩展正式上架Chrome Web Store后这个问题就会消失。3.2 从源码构建安装适合开发者或想尝鲜的用户如果你想体验最新可能尚未发布的代码或者有意参与贡献可以从源码构建。准备环境确保你的电脑上安装了 Node.js (建议使用LTS版本) 和 npm通常随Node.js一起安装。在终端运行node -v和npm -v检查是否安装成功。克隆仓库打开终端运行以下命令将项目代码克隆到本地。git clone https://github.com/heartleo/sublens.git cd sublens安装依赖在项目根目录运行npm install。这会根据package.json文件安装所有必要的开发依赖和运行库。构建项目运行npm run build。这个命令会执行TypeScript类型检查并使用Vite等工具将源代码打包、优化最终在项目根目录生成一个dist文件夹。这就是扩展的运行目录。加载扩展后续步骤与3.1中的第3-5步完全相同。在chrome://extensions/页面点击“加载已解压的扩展程序”选择本项目根目录下的dist文件夹。3.3 初始使用与权限授权首次加载扩展后点击工具栏图标弹出的仪表盘可能是空的。这是因为扩展需要获得访问特定网站的权限来抓取数据。触发权限请求最直接的方法是分别打开你已订阅的服务的官网并确保你已登录。例如打开chat.openai.comclaude.aigithub.com查看Copilot订阅需进入设置one.google.com 以及cursor.sh。注意浏览器提示当你访问这些网站时SubLens会尝试工作。首次为某个服务抓取数据时Chrome可能会在地址栏右侧显示一个权限提示一个小图标询问是否允许扩展读取该站点的数据。你需要点击并允许扩展才能正常工作。手动刷新确保在每个网站都处于登录状态后你可以双击SubLens的工具栏图标这会手动触发一次对所有支持服务的抓取刷新。稍等片刻你的订阅卡片就应该会出现了。如果某个服务始终不显示请检查1你是否确实订阅了该服务的付费计划2你是否在对应的网站上处于登录状态3浏览器是否已授予扩展对该网站的访问权限。4. 核心使用技巧与高效操作手册SubLens的界面非常简洁但蕴含了一些提升效率的交互细节掌握后能让它更好用。4.1 仪表盘内的快捷操作全局手动刷新数据不是实时同步的扩展会在你打开弹出页面时自动刷新并在后台定期检查。如果你刚续费或更改了套餐想立即看到更新只需双击弹出窗口左上角的SubLens Logo。这是一个非常自然的手势比找刷新按钮更快捷。快速访问服务后台对任何一张订阅卡片双击浏览器会自动在新标签页中打开该服务的账户管理或订阅详情页面。比如双击ChatGPT卡片会跳转到platform.openai.com/account。这比手动输入网址或从书签里找快得多。高亮付费订阅在顶部统计区域显示着“Total”和“Paid”的数量。双击“Paid”这个数字仪表盘中所有免费服务的卡片会暂时变暗从而高亮突出所有付费订阅。这能让你快速聚焦在正在花钱的服务上思考哪些是必需的哪些可以优化。切换语言界面右上角有一个“EN”或“ZH”的按钮点击它可以在英文和简体中文之间切换。切换后日期格式和价格货币符号也会根据语言进行本地化显示。拖拽排序这是最直观的功能之一。直接用鼠标按住卡片头部服务Logo和名称区域进行拖拽就可以调整卡片顺序。你的排序偏好会立即保存在本地。4.2 理解数据与账单周期SubLens展示的信息是“快照”理解其含义能帮助你更好地规划财务。“Due in X days”的计算逻辑这个天数是从当前日期计算到“下次账单日期”的天数。例如如果你的ChatGPT Plus在每月15日扣款今天是4月10日则会显示“Due in 5 days”。需要注意的是这个日期是扩展从官网抓取的“下次扣款日”对于月付服务它通常是固定的每月某一天对于年付服务则是每年的同一天。它并非“过期日”而是“扣款日”。进度条的意义卡片底部的细长进度条直观展示了当前计费周期已经过去了多少。假设是月付从扣款日第二天开始进度条从0%开始增长到下一个扣款日当天达到100%。它能给你一个“时间流逝感”提醒你这个周期的服务已使用了多少。总花费Total Spend页面顶部显示的月度总花费是将你所有付费订阅的当前周期费用按月度进行折算后相加的结果。例如一个$20/月的服务计$20一个$200/年的服务则会折算为约$16.67/月。这个数字能让你对自己在AI订阅上的月度固定支出有一个宏观的、可比较的概念。4.3 主题与视觉定制SubLens支持三种主题模式在设置中通常是一个齿轮或更多选项图标可以切换浅色模式Light干净明亮的界面。深色模式Dark我个人更偏爱的模式在夜间或深色主题的IDE旁使用更协调且更省电对于OLED屏幕。跟随系统System这是默认推荐选项。扩展会自动检测你操作系统Windows/macOS的主题设置并与之同步。当你从日间切换到夜间模式时SubLens的界面也会自动从浅色变为深色体验无缝。5. 开发者指南如何添加新的服务提供商SubLens的魅力之一在于其可扩展性。如果你订阅的服务不在官方支持列表里比如Midjourney、Notion AI、JetBrains AI Assistant等完全可以自己动手添加。项目结构清晰添加一个新提供商的流程非常标准化。5.1 理解提供商Provider的核心接口在src/providers/目录下每个服务都有一个对应的.ts文件如chatgpt.ts。它们都实现了一个名为SubscriptionProvider的接口。这个接口定义了扩展与一个服务交互的“契约”// 这是一个简化的概念模型帮助你理解 interface SubscriptionProvider { name: string; // 服务名称如 ChatGPT logo: string; // Logo文件路径 // 核心方法从指定网页url的文档doc中解析出订阅信息 parse: (url: string, doc: Document) PromiseSubscriptionInfo | null; // 该方法返回的SubscriptionInfo包含价格、周期、下次账单日等 }parse方法是灵魂所在。它接收当前浏览器标签页的URL和页面文档对象然后像侦探一样通过DOM选择器如document.querySelector去页面上寻找特定的HTML元素、类名或文本从中提取出我们关心的订阅数据。5.2 实战为“Midjourney”添加支持示例假设我们想添加对Midjourney订阅的管理。以下是详细的步骤创建提供商文件 在src/providers/目录下新建一个文件midjourney.ts。你可以参考现有的chatgpt.ts作为模板。实现解析逻辑 打开Midjourney的账户页面例如https://www.midjourney.com/account/登录后使用浏览器的开发者工具F12检查页面元素。你需要找到显示套餐类型、价格和续费日期的HTML元素。// src/providers/midjourney.ts import type { Subscription, SubscriptionProvider } from ../types; const MidjourneyProvider: SubscriptionProvider { name: Midjourney, logo: /logos/midjourney.svg, // 需要准备Logo文件 async parse(url: string, doc: Document): PromiseSubscription | null { // 1. 检查是否在正确的页面 if (!url.includes(midjourney.com/account)) { return null; } // 2. 使用选择器定位关键信息以下选择器为示例需实际分析页面 const planElement doc.querySelector(.plan-tier); // 假设套餐信息在这个类里 const priceElement doc.querySelector(.price-amount); const nextBillElement doc.querySelector(.next-billing-date); if (!planElement || !priceElement) { return null; // 没找到关键信息可能不是付费用户或页面结构变了 } const planName planElement.textContent?.trim() || Pro; // 例如 Pro Plan const priceText priceElement.textContent?.trim() || ; // 例如 $30 / month const nextBillText nextBillElement?.textContent?.trim(); // 例如 May 10, 2024 // 3. 解析文本提取结构化数据这是最需要细心和正则表达式的地方 const priceMatch priceText.match(/\$(\d)/); const amount priceMatch ? parseInt(priceMatch[1], 10) : 0; const isYearly priceText.toLowerCase().includes(/year); const cycle isYearly ? yearly : monthly; // 4. 解析日期 let nextBillDate: string | undefined; if (nextBillText) { // 这里需要将页面显示的日期字符串转换为YYYY-MM-DD格式 // 可以使用 date-fns 或原生 Date 对象项目里应有工具函数 nextBillDate parseDateString(nextBillText); // 假设有这样一个工具函数 } // 5. 返回结构化的订阅信息对象 return { name: this.name, plan: planName, price: amount, originalPrice: amount, // Midjourney若无折扣原价与现价相同 cycle: cycle, nextBillDate: nextBillDate, // 其他字段如 currency, status 可根据情况补充 }; }, }; export default MidjourneyProvider;添加Logo资源 找一个Midjourney的SVG格式Logo将其放入public/logos/目录并命名为midjourney.svg。确保SVG文件内容简洁尺寸适中。注册提供商 打开src/providers/index.ts文件。你会看到一个providers数组。将你新创建的MidjourneyProvider导入并添加到这个数组中。// src/providers/index.ts import chatgpt from ./chatgpt; import claude from ./claude; // ... 导入其他现有提供商 import midjourney from ./midjourney; // 导入新的 const providers [ chatgpt, claude, // ... 其他 midjourney, // 添加进来 ]; export default providers;声明主机权限可选但重要 为了让扩展能在midjourney.com域名下运行parse方法需要在manifest.json文件的permissions或host_permissions字段中添加对该域名的访问权限。检查现有配置如果使用的是host_permissions则添加模式匹配。{ manifest_version: 3, host_permissions: [ https://platform.openai.com/*, https://claude.ai/*, // ... 其他 https://www.midjourney.com/* // 添加此行 ] }重新构建与测试 完成代码修改后运行npm run build重新构建扩展。然后按照3.1节第4步重新加载dist文件夹在chrome://extensions页面找到SubLens点击刷新图标即可。现在当你访问Midjourney账户页面时SubLens就应该能识别并显示你的订阅信息了。实操心得添加新提供商最关键也最脆弱的一步是parse函数中的DOM选择器。网站前端改版可能会改变类名或HTML结构导致选择器失效。因此你的选择器要尽可能健壮比如优先选择有明确语义的>问题现象可能原因排查与解决步骤某个服务卡片完全空白1. 未登录该服务网站。2. 扩展未被授予该网站的权限。3. 该服务的页面结构已更新解析器失效。1.确认登录打开对应官网如claude.ai检查页面顶部是否显示你的账户名。2.检查权限在chrome://extensions/?id扩展ID页面点击SubLens详情查看“权限”选项卡确认相关网站已在列表中。你也可以尝试在对应网站刷新页面看浏览器是否弹出权限请求。3.手动刷新在已登录状态下双击SubLens图标强制刷新。4.查看错误如果开发者熟悉可以打开Chrome开发者工具F12的“控制台”标签页查看是否有来自SubLens扩展的错误日志。价格、日期信息错误1. 页面内容为动态加载JS渲染初始HTML中无数据。2. 解析逻辑对特定套餐格式匹配不准确。1.等待加载确保页面完全加载完毕特别是账单信息部分已显示出来再尝试刷新SubLens。2.报告问题如果确认是解析逻辑问题且你使用的是官方发布版本最好的方式是在GitHub仓库提交Issue附上截图和套餐详情帮助开发者修复。所有卡片都不显示1. 扩展未成功加载或已禁用。2. 本地存储数据损坏。1.检查扩展状态前往chrome://extensions/确认SubLens已启用。2.重置数据在扩展管理页面点击SubLens下的“详细信息”进入后找到“扩展程序选项”或“清除存储”部分不同Chrome版本位置可能不同尝试清除站点的本地存储数据然后重新登录各个网站并刷新。6.2 扩展图标徽章Badge不更新SubLens的工具栏图标上会显示一个数字徽章表示你当前的付费订阅数量。如果这个数字不更新背景页活动扩展的徽章更新通常由后台服务线程Service Worker在定期检查后触发。如果Chrome为了节省资源暂停了该线程更新可能会延迟。尝试点击图标打开弹出页面这会激活扩展通常能触发一次立即更新。权限问题确保扩展拥有所需的所有主机权限。可以尝试在扩展管理页面暂时关闭再重新打开SubLens。手动同步双击图标打开弹出页这个操作本身就会触发一次数据抓取和徽章更新。6.3 关于数据持久性与备份SubLens的数据存储在本地这带来了隐私优势但也意味着浏览器间不同步在办公室Chrome和家里Chrome上安装的SubLens数据是独立的。重装系统或浏览器后数据丢失如果你清除了浏览器数据或更换电脑所有保存的订阅信息和排序都会丢失。应对建议如果你非常依赖这个仪表盘可以定期比如每月对重要的订阅信息如套餐、价格、续费日进行一次手动记录作为备份。或者期待未来版本能提供一个安全的、可选的本地数据导出/导入功能。6.4 参与社区与反馈SubLens是一个开源项目其持续改进依赖于社区。发现问题时如果你遇到Bug或者某个服务解析失败请先检查GitHub仓库的 Issues 列表看是否已有人报告。如果没有可以提交一个新的Issue详细描述问题、复现步骤并附上截图或错误信息。清晰的Issue能极大帮助开发者定位问题。提出新想法如果你有新的功能建议比如支持更多服务、增加费用预测图表、导出CSV等也可以通过Issue提出。开源项目的路线图往往由最活跃的需求推动。贡献代码如果你具备开发能力并且成功为新的服务添加了提供商支持非常欢迎你提交Pull RequestPR。在提交前请确保代码风格与项目现有代码一致运行npm run lint检查并且功能经过充分测试。7. 总结与未来可扩展性思考使用SubLens大半年它已经成了我浏览器里一个不可或缺的“数字资产看板”。它解决的不是一个宏大的问题而是一个具体、细微却高频的痛点——对分散的订阅消费建立集中、透明的感知。这种工具带来的是一种“掌控感”让我知道每个月的固定科技支出具体流向何处并在某个服务涨价或我使用频率降低时能迅速做出是否续订的决策。从技术角度看这个项目也是一个非常漂亮的Chrome扩展MV3Manifest V3实践范例。它结构清晰模块化做得好状态管理、国际化、主题切换这些前端常见需求都得到了优雅的实现。对于想学习现代浏览器扩展开发的前端工程师来说其代码库有很好的参考价值。我个人认为这类工具的未来可以朝几个方向深化更智能的抓取与容错目前严重依赖静态DOM选择器未来可以结合更智能的文本分析甚至简单的机器学习模型来提高对不同网站改版的适应性。跨浏览器与设备同步在坚持“隐私优先”的前提下探索通过端到端加密的方式让用户自愿选择在信任的设备间同步数据。消费分析与预测在本地聚合历史数据需用户明确授权存储提供简单的月度支出趋势图或预测未来一年的订阅总花费帮助进行更长期的预算规划。“订阅健康度”评分结合使用频率如果能安全获取到的话和费用给出一个优化建议比如“过去90天仅登录5次建议降级套餐”。当然这些只是设想。目前SubLens已经完美地完成了它的核心使命。如果你也在为管理多个AI订阅而烦恼不妨花几分钟安装试试。它那种“安静地待在角落需要时给你清晰答案”的特质正是优秀工具软件的典范。