--- theme: fancy highlight: hopscotch --- > 代码一敲，游戏烦恼全消！你家是否也有个沉迷小游戏的“神兽”？ > > 上周六，我正在家快乐刷剧，突然接到亲戚电话：“救命啊！我家那小崽子天天抱着电脑玩小游戏，作业不写，饭都不吃，跟入了魔似的！” > > 我一听，这不就是典型的“7k7k、4399综合症”嘛！ > > 于是花十分钟写了个 Chrome 扩展：在非允许时间自动屏蔽游戏网站，家长再也不用盯着孩子电脑了。 ### 先看效果：在非允许时间自动屏蔽游戏网站 ![防沉迷.gif](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/b75b999ee8ca47e0865be3b0414cbbcb~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5LiN5LiA5qC355qE5bCR5bm0Xw==:q75.awebp?rk3s=f64ab15b&x-expires=1764026855&x-signature=Ifba5i66z7pKPlTFST62IKcI84M%3D) ## 需求分析：家长的心声经过深入交流（其实就是听亲戚吐槽了半小时），我总结出核心诉求： * **精准打击**：主要针对那些让人上头的在线小游戏网站 * **时间管理**：不能一刀切，得给孩子留点活路（比如晚上8-9点） * **友好提示**：不能直接404，得告诉孩子为啥被拦了 ## 代码实现：程序员的爱，都在代码里 ### 项目结构 anti-addiction ├── manifest.json # 扩展的"身份证" └── background.js # 插件后台脚本 **文件说明：** * `manifest.json` - 扩展的"身份证"，告诉浏览器这是个什么插件 * `background.js` - 大脑，负责判断时间和拦截网站 ### 🚀 github源码 * **完整代码**: * **觉得有用？** 欢迎给个 **Star** ⭐ 鼓励一下！ * **遇到问题？** 请直接 [提交 Issues](https://github.com/Teernage/anti-addiction--extension/issues)，我会尽快处理。 ## 手把手实现 ### 第一步：创建项目文件 1. #### **创建文件夹** **`anti-addiction`** 2. #### **创建manifest.json文件** ```json { "manifest_version": 3, "name": "Anti-Addiction Game Blocker", "version": "0.1.0", "description": "防沉迷游戏拦截器，阻止7k7k和4399等网站的游戏加载。", "permissions": ["scripting", "tabs", "webNavigation"], "host_permissions": ["*://*/*"], "background": { "service_worker": "background.js" }, "action": { "default_title": "Anti-Addiction" } } ``` 3. #### **创建background.js文件** ```js // 阻止的域名列表 const BLOCKED_DOMAINS = ['7k7k.com', '4399.com']; // 不限制的时间段20：00-21:00 const ALLOWED_TIME_RANGE = [20, 21]; /** * 判断是否是阻止的域名 * @param {*} urlString * @returns */ function isBlockedUrl(urlString) { try { const { hostname } = new URL(urlString); return BLOCKED_DOMAINS.some( (domain) => hostname === domain || hostname.endsWith(`.${domain}`) ); } catch (_) { return false; } } /** * 插入拦截页面 * @param {*} tabId 标签页ID * @returns */ function injectBlockPage(tabId) { if (isInAllowedTime()) return; chrome.scripting .executeScript({ target: { tabId }, func: injectBlockPageContent, args: [ALLOWED_TIME_RANGE], }) .catch((err) => console.warn('Inject failed:', err)); } // 导航提交时（更早阶段）判断并注入 chrome.webNavigation.onCommitted.addListener(({ tabId, url, frameId }) => { if (frameId !== 0) return; // 只处理顶层页面 if (isBlockedUrl(url)) { injectBlockPage(tabId); } }); // 判断当前时间是否在允许游戏的时间段内 function isInAllowedTime() { const now = new Date(); const hours = now.getHours(); return hours >= ALLOWED_TIME_RANGE[0] && hours < ALLOWED_TIME_RANGE[1]; } function injectBlockPageContent(timeRange) { try { // 尽可能停止后续资源加载 window.stop(); } catch (error) { console.warn('Failed to stop page loading:', error); } const doc = document; doc.title = '防沉迷提醒'; const blockHtml = ` 防沉迷提醒

🎮 防沉迷提醒

当前时间不在允许游戏时段内，请在${timeRange[0]}:00到${timeRange[1]}:00点之间访问。

`; document.open(); document.write(blockHtml); document.close(); } ``` ### 第二步：安装扩展 1. 打开Chrome浏览器 2. 地址栏输入：`chrome://extensions/` 3. 打开右上角"开发者模式" 4. 点击"加载已解压的扩展程序" 5. 选择刚才的文件夹 6. 搞定！扩展安装完成！ ![加载防沉迷插件.gif](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/6667d2920c044d49b592bcc52b80ea83~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5LiN5LiA5qC355qE5bCR5bm0Xw==:q75.awebp?rk3s=f64ab15b&x-expires=1764026855&x-signature=Kwg6Zw5rIi42mY1RV6JH%2F%2FHGJP0%3D) ### 第三步：测试效果打开[7k7k.com](https://7k7k.com/)或[4399.com](https://4399.com/)，非晚上8-9点时段，就会看到我们的可爱拦截页面！ ![image.png](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/91e97926c70b4930b4a0600029dcfeb4~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5LiN5LiA5qC355qE5bCR5bm0Xw==:q75.awebp?rk3s=f64ab15b&x-expires=1764026855&x-signature=hVtbltBYA6LpHzFQhOBg9PHJVLs%3D) ## 个性化定制：打造专属防沉迷方案 ### 添加更多游戏网站 ```js const BLOCKED_DOMAINS = [ '7k7k.com', '4399.com', // 添加更多需要拦截的网站 ]; ``` ### 调整游戏时间段 ```js const ALLOWED_TIME_RANGE = [19, 21] ; // 19：00 -- 21：00 ``` ## 技术亮点 1. **轻量级**：仅两个文件，100行代码左右 2. **智能化**：自动识别游戏网站，分时段控制 3. **用户体验**：友好提示，避免生硬拦截 ## 总结这个十分钟打造的防沉迷工具，用最简单的技术解决了最头疼的育儿问题。 > 如果觉得对您有帮助，欢迎点赞 👍 收藏 ⭐ 关注 🔔 支持一下！ > > **往期实战推荐：** > > * [Vue3 后台分页写腻了？我用 1 个 Hook 删掉 90% 重复代码（附源码）](https://juejin.cn/post/7549096640340426802) > > * [⚡ 一个Vue自定义指令搞定丝滑拖拽列表，告别复杂组件封装 > ](https://juejin.cn/post/7511332054941188147) > > * [🔥 这才是 Vue 驱动的 Chrome 插件工程化正确打开方式](https://juejin.cn/post/7543806966926802971) > > * [【前端效率工具】：告别右键另存，不到 50 行代码一键批量下载网页图片](https://juejin.cn/post/7559124639323242506) > > * [ 女朋友炸了：刚打开的网页怎么又没了？我反手甩出一键恢复按钮！](https://juejin.cn/post/7561612065707065390)