你家小孩又偷玩網頁遊戲? 試試這個防沉迷工具

你家孩子又偷玩網頁遊戲? 試試這個防沉迷工具

代碼一敲，遊戲煩惱全消！你家是否也有個沉迷小遊戲的“神獸”？

上週六，我正在家快樂刷劇，突然接到親戚電話：“救命啊！我家那小崽子天天抱著電腦玩小遊戲，作業不寫，飯都不吃，跟入了魔似的！”

我一聽，這不就是典型的“7k7k、4399綜合症”嘛！

於是花十分鐘寫了個 Chrome 擴展：在非允許時間自動屏蔽遊戲網站，家長再也不用盯著孩子電腦了。

先看效果：在非允許時間自動屏蔽遊戲網站

防沉迷.gif

需求分析：家長的心聲

經過深入交流（其實就是聽親戚吐槽了半小時），我總結出核心訴求：

精準打擊：主要針對那些讓人上頭的線上小遊戲網站
時間管理：不能一刀切，得給孩子留點活路（比如晚上 8-9 點）
友好提示：不能直接 404，得告訴孩子為啥被攔了

代碼實現：程序員的愛，都在代碼裡

專案結構

anti-addiction
├── manifest.json      # 擴展的"身份證"
└── background.js      # 插件後台腳本

文件說明：

manifest.json - 擴展的"身份證"，告訴瀏覽器這是個什麼插件
background.js - 大腦，負責判斷時間和攔截網站

🚀 github 源碼

完整代碼: github.com/Teernage/anti-addiction--extension
覺得有用？ 歡迎給個 Star ⭐ 鼓勵一下！
遇到問題？ 請直接提交 Issues，我會儘快處理。

手把手實現

第一步：創建專案文件

創建文件夾 anti-addiction
創建 manifest.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 文件

// 阻止的域名列表
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/
打開右上角"開發者模式"
點擊"加載已解壓的擴展程序"
選擇剛才的文件夾
搞定！擴展安裝完成！

加載防沉迷插件.gif

第三步：測試效果

打開7k7k.com或4399.com，非晚上 8-9 點時段，就會看到我們的可愛攔截頁面！

個性化定製：打造專屬防沉迷方案

添加更多遊戲網站

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

調整遊戲時間段

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

技術亮點

輕量級：僅兩個文件，100 行代碼左右
智能化：自動識別遊戲網站，分時段控制
用戶體驗：友好提示，避免生硬攔截

總結

這個十分鐘打造的防沉迷工具，用最簡單的技術解決了最頭疼的育兒問題。

如果覺得對您有幫助，歡迎點贊 👍 收藏 ⭐ 關注 🔔 支持一下！

往期實戰推薦：

Vue3 後台分頁寫膩了？我用 1 個 Hook 刪掉 90% 重複代碼（附源碼）

⚡ 一個 Vue 自定義指令搞定絲滑拖拽列表，告別複雜組件封裝

🔥 這才是 Vue 驅動的 Chrome 插件工程化正確打開方式

【前端效率工具】：告別右鍵另存，不到 50 行代碼一鍵批量下載網頁圖片

女朋友炸了：剛打開的網頁怎麼又沒了？我反手甩出一鍵恢復按鈕！

原文出處：https://juejin.cn/post/7562859113246343178