开源熊猫插件panda-gatekeeper：防沉迷提醒比闹钟更凶，一键安装强制休息

最近，我开发了一款防沉迷浏览器扩展，名叫panda-gatekeeper，中文称「熊猫监督员」。当你在网上冲浪时间过长时，一只熊猫会突然出现，用霸屏动画提醒你“主人，你该休息了”，并强制占据屏幕，让你无法继续浏览。

下面是一段体验展示。

不论你逛的是X、ChatGPT，还是GitHub、HuggingFace，这只熊猫都会强行闯入，每个网站的计时是独立计算的。该扩展支持Chrome、Firefox、Edge等主流浏览器，安装包仅有2MB，运行极其轻便顺畅。

这个项目基于日本开发者@zokuzoku 的「cat-gatekeeper」二次开发而来，我进行了完整的汉化，并加入了一些有趣的新功能。现在已经全部开源，欢迎前往仓库查看。

开源地址：
https://github.com/lengyi2030/panda-gatekeeper

项目开发思路解析

整个项目采用Claude Code配合Step Plan来推进。借助阶跃星辰Step Plan的多模型整合能力，开发进度非常快，前后大约只用了半天。

很多开发者接触过各种Coding Plan，但多数方案只对接单一模型，如果需要切换模型，就得反复手动修改环境变量，操作比较繁琐。而Step Plan提供了另一种思路：它本身就是一个统一的多模型入口，可以在不同任务中动态调用不同能力的模型，一套配置就能使用多种模型。

对我这种需要同时写代码、改素材、生成语音的项目来说，“一套配置，多种能力”的体验让流程顺畅许多。

其中有个很实用的模型名是step-router-v1，它能根据任务类型自动智能路由到合适的后端模型，比如step-3.5-flash、DeepSeek-V4-Pro等，通常直接使用这个model就行。

如果你在Windows环境下，可以在终端运行以下命令完成配置：

setx ANTHROPIC_BASE_URL "https://api.stepfun.com/step_plan"
setx ANTHROPIC_AUTH_TOKEN "YOUR_API_KEY"
setx ANTHROPIC_MODEL "step-router-v1"

配置好Claude Code的模型之后，接下来进入具体的开发环节。

1）克隆原始仓库

原项目@zokuzoku 已上传至GitHub，我直接让Claude Code把代码拉到本地，指令很简单：

帮我把这个项目 https://github.com/zokuzoku/cat-gatekeeper 下载到指定文件夹。

2）准备素材

初始项目是一只猫咪霸屏，我需要换成熊猫，并添加一些新的功能。于是先询问Claude Code需要哪些素材，它列出了3个图标和2个动画视频需要替换。

图标方面直接使用step-image-edit-2模型生成PNG，尺寸都已经自动适配好，我只需简单裁剪。提示词如下：

用同一个熊猫主体，设计3个png图标，尺寸分别是：16x16px、48x48px、128x128px

视频则随便找了一家视频生成模型，给出提示词：

纯黑背景（网站素材），固定镜头，一只熊猫从画面左侧走过来，做着一些有趣的动作，霸占着整个画面。

需要注意的是，大部分模型生成的是MP4格式，而要嵌入网页使用，需要转成WebM格式并压缩。我直接用FFmpeg命令行处理：

ffmpeg -i input.mp4 -c:v libvpx-vp9 -crf 30 -b:v 0 -c:a libopus output.webm

如果对命令行有些犹豫，也可以直接告诉Claude Code：“用FFmpeg把xx视频转为Webm格式”，让它代劳。

3）二次开发

素材准备完成后，开始根据需求进行二次开发。我整理了一份明确的改动清单，直接发给Claude Code：

文件夹xxxx放了一个浏览器插件项目，请对这个项目进行二次开发，角色换成熊猫，素材我已经放在assets文件夹了。  

要求：  
1、刷新频率的时间可以由用户定制。  
2、提供测试入口，用浏览器打开即可测试。  
3、素材仅用neko1，循环播放。  
4、给应用增加语音提醒功能。用stepaudio-2.5-tts模型生成一段audio，配音文字为“主人，你该休息了。听话，现在就离开工位，去喝杯水，看下风景，多走动走动，这是命令”，模拟熊猫憨态可掬的形象生成一段语音内置到应用里。  
5、我需要放在Github上，重写README.md，中英日三种语言。

CC先是完整理解了整个项目的结构，然后逐一实现需求，包括内置语音也一并由Step Plan生成。没有花费太多时间即完成修改。

接着进行功能测试。

基本功能都已跑通，但还有几个细节需要完善，于是继续提出修改需求：

测试发现几点问题，请修复：  
1、所有界面语言，请改成中文。  
2、删掉“主人，你该休息了”的文字框，语音提醒需要保留。  
3、去掉数字的灰底框，只保留倒计时数字。

再次调整后，就几乎没有问题了。随后打包并加载到浏览器中实测，到点后能够准时跳出提醒。

插件安装与使用指南

目前插件尚未上传到Chrome应用商店，但你可以通过GitHub直接下载并加载到浏览器。

在终端执行以下命令克隆仓库：

git clone https://github.com/lengyi2030/panda-gatekeeper.git

也可以交给你的Claude Code、OpenClaw、Hermes等AI助手帮你下载。

项目地址：https://github.com/lengyi2030/panda-gatekeeper

如果觉得项目不错，欢迎在GitHub上点个Star鼓励一下。
如果访问GitHub不方便，也可以直接回复关键词【熊猫】获取压缩包。

下载完成后，打开浏览器的扩展管理页面，Chrome可以直接在地址栏输入：chrome://extensions。首先在右上角启用「开发者模式」，然后点击左上角「加载已解压的扩展程序」，选择刚才下载的panda-gatekeeper文件夹加载即可。

加载成功后，插件便会开始工作，达到你设定的冲浪时间上限后，熊猫就会出来“接管”屏幕。

总结与体验

Step Plan提供的多模型统一调用能力，让这个项目的开发变得非常高效：从写代码、生成图标和语音，到视频格式转换，全在一个Plan里完成，一个入口即可调度多个模型。

整个项目下来大约只消耗了200次模型调用，每一次响应都很快，体验很流畅。
开发平台：platform.stepfun.com

现在的Coding Plan选择确实越来越丰富，剩下的，就看你的创意能不能与之匹配了。