你家孩子又偷玩网页游戏? 试试这个防沉迷工具

代码一敲，游戏烦恼全消！你家是否也有个沉迷小游戏的"神兽"？

上周六，我正在家快乐刷剧，突然接到亲戚电话："救命啊！我家那小崽子天天抱着电脑玩小游戏，作业不写，饭都不吃，跟入了魔似的！"

我一听，这不就是典型的"7k7k、4399综合症"嘛！

于是花十分钟写了个 Chrome 扩展：在非允许时间自动屏蔽游戏网站，家长再也不用盯着孩子电脑了。

先看效果：：在非允许时间自动屏蔽游戏网站

需求分析：家长的心声

经过深入交流（其实就是听亲戚吐槽了半小时），我总结出核心诉求：

精准打击：主要针对那些让人上头的在线小游戏网站
时间管理：不能一刀切，得给孩子留点活路（比如晚上8-9点）
友好提示：不能直接404，得告诉孩子为啥被拦了

代码实现：程序员的爱，都在代码里

项目结构

arduino 复制代码

anti-addiction
├── manifest.json      # 扩展的"身份证"
└── background.js      # 插件后台脚本

创建文件夹 `anti-addiction`

创建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"
  }
}

创建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 = `
    <!DOCTYPE html>
    <html lang="zh-CN">
      <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta
          http-equiv="Content-Security-Policy"
          content="frame-src 'self'; frame-ancestors 'none';"
        />
        <title>防沉迷提醒</title>
        <style>
          body {
            background: #0f172a;
            color: #e2e8f0;
            text-align: center;
            padding: 50px;
            font-family: Arial, sans-serif;
            margin: 0;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
          }
          
          .container {
            width: 520px;
            position: absolute;
            right: 0;
            left: 0;
            margin: auto;
            top: -100px;
            bottom: 0;
            height: 150px;
            padding: 20px;
            border-radius: 12px;
            background: rgba(30, 41, 59, 0.8);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
          }
          
          h1 {
            font-size: 28px;
            margin: 0 0 50px;
            color: #60a5fa;
          }
          
          p {
            font-size: 18px;
            line-height: 1.6;
            margin: 0;
          }
        </style>
      </head>
      <body>
        <div class="container">
          <h1>🎮 防沉迷提醒</h1>
          <p>当前时间不在允许游戏时段内，请在${timeRange[0]}:00到${timeRange[1]}:00点之间访问。</p>       
        </div>
      </body>
    </html>
  `;

  document.open();
  document.write(blockHtml);
  document.close();
}

第二步：安装扩展

打开Chrome浏览器
地址栏输入：chrome://extensions/
打开右上角"开发者模式"
点击"加载已解压的扩展程序"
选择刚才的文件夹
搞定！扩展安装完成！

第三步：测试效果

打开7k7k.com或4399.com，非晚上8-9点时段，就会看到我们的可爱拦截页面！

个性化定制：打造专属防沉迷方案

添加更多游戏网站

js 复制代码

const BLOCKED_DOMAINS = [
  '7k7k.com', 
  '4399.com', 
  // 添加更多需要拦截的网站
];

调整游戏时间段

js 复制代码

const ALLOWED_TIME_RANGE =  [19, 21] ; // 19：00 -- 21：00

技术亮点

轻量级：仅两个文件，100行代码左右
智能化：自动识别游戏网站，分时段控制
用户体验：友好提示，避免生硬拦截

总结

这个十分钟打造的防沉迷工具，用最简单的技术解决了最头疼的育儿问题。

如果觉得对您有帮助，欢迎点赞 👍 收藏 ⭐ 关注 🔔 支持一下！

你家孩子又偷玩网页游戏? 试试这个防沉迷工具

先看效果：：在非允许时间自动屏蔽游戏网站

需求分析：家长的心声

代码实现：程序员的爱，都在代码里

项目结构

创建文件夹 anti-addiction

创建manifest.json文件

创建background.js文件

第二步：安装扩展

第三步：测试效果

个性化定制：打造专属防沉迷方案

添加更多游戏网站

调整游戏时间段

技术亮点

总结

创建文件夹 `anti-addiction`