Build a Chrome Extension to Block Addictive Games in 10 Minutes
This tutorial shows how to create a lightweight Chrome extension that automatically blocks popular online game sites during prohibited hours, covering requirement analysis, project structure, manifest and background scripts, installation steps, testing, and customization options.
Quote
"One line of code, all game worries disappear! Do you have a child addicted to mini‑games?"
Effect Preview
Requirement Analysis: Parents' Voices
Through a short conversation with relatives, three core demands were identified:
Precise targeting : block specific online mini‑game sites.
Time management : allow a limited window (e.g., 20:00‑21:00) for gaming.
Friendly prompts : show an explanatory page instead of a raw 404.
Code Implementation
Project Structure
anti-addiction
├── manifest.json # Extension manifest (identity file)
└── background.js # Background script that decides when to blockFile descriptions: manifest.json – declares the extension, its permissions and entry point. background.js – runs in the background, checks the current time and intercepts requests to blocked domains.
GitHub Source
Full code: https://github.com/Teernage/anti-addiction--extension
Give it a Star if you find it useful.
Report issues directly on the repository.
Step‑by‑Step Implementation
Step 1: Create Project Files
Create a folder named anti-addiction.
Create manifest.json with the following content:
{
"manifest_version": 3,
"name": "Anti‑Addiction Game Blocker",
"version": "0.1.0",
"description": "Blocks addictive game sites like 7k7k and 4399.",
"permissions": ["scripting", "tabs", "webNavigation"],
"host_permissions": ["*://*/*"],
"background": {"service_worker": "background.js"},
"action": {"default_title": "Anti‑Addiction"}
}Step 2: Create background.js
// List of domains to block
const BLOCKED_DOMAINS = ['7k7k.com', '4399.com'];
// Allowed time range (e.g., 20:00‑21:00)
const ALLOWED_TIME_RANGE = [20, 21];
/** Check if a URL belongs to a blocked domain */
function isBlockedUrl(urlString) {
try {
const {hostname} = new URL(urlString);
return BLOCKED_DOMAINS.some(domain => hostname === domain || hostname.endsWith(`.${domain}`));
} catch (_) { return false; }
}
/** Inject a blocking page when the time is not allowed */
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; // only top‑level frames
if (isBlockedUrl(url)) injectBlockPage(tabId);
});
function isInAllowedTime() {
const now = new Date();
const hour = now.getHours();
return hour >= ALLOWED_TIME_RANGE[0] && hour < ALLOWED_TIME_RANGE[1];
}
function injectBlockPageContent(timeRange) {
try { window.stop(); } catch (e) { console.warn(e); }
document.title = 'Anti‑Addiction Reminder';
const html = `
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>防沉迷提醒</title>
<style>
body {background:#0f172a;color:#e2e8f0;text-align:center;padding:50px;font-family:Arial,Helvetica,sans-serif;}
.container{width:520px;margin:auto;background:rgba(30,41,59,0.8);padding:20px;border-radius:12px;}
h1{font-size:28px;color:#60a5fa;}
p{font-size:18px;}
</style>
</head>
<body>
<div class="container">
<h1>🎮 防沉迷提醒</h1>
<p>当前时间不在允许游戏时段内，请在${timeRange[0]}:00到${timeRange[1]}:00之间访问。</p>
</div>
</body>
</html>`;
document.open();
document.write(html);
document.close();
}Step 3: Install the Extension
Open Chrome.
Navigate to chrome://extensions/.
Enable "Developer mode".
Click "Load unpacked" and select the anti-addiction folder.
Done – the extension is now active.
Step 4: Test the Effect
Visit 7k7k.com or 4399.com outside the allowed 20:00‑21:00 window; the custom blocking page will appear.
Personalization
Add More Game Sites
const BLOCKED_DOMAINS = ['7k7k.com', '4399.com', /* add more domains here */];Adjust Allowed Time Range
const ALLOWED_TIME_RANGE = [19, 21]; // 19:00‑21:00Technical Highlights
Lightweight : only two files, roughly 100 lines of code.
Smart : automatically detects target domains and enforces time‑based rules.
User‑friendly : shows a polite reminder instead of a hard block.
Conclusion
This ten‑minute tool demonstrates how a simple Chrome extension can solve a common parental concern with minimal code and maximum flexibility.
Rare Earth Juejin Tech Community
Juejin, a tech community that helps developers grow.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.