網頁現實駭客 — 把任何網站變成 Cyberpunk 故障模式
一個 Bookmarklet 工具，只要拖到書籤列，就能在任何網站上啟動 Glitch 效果。滑鼠滑過文字會變成亂碼、滑過圖片會產生 RGB 分離和抖動、點擊任何元素會讓它旋轉消失。完美用來「駭入」討厭的廣告或假裝自己是電影裡的駭客。
這個專案的初衷是想創造一種體驗的改變。
我想做一個「破壞器」，或者說是一個「現實改變器」。從網頁開始動手——當滑鼠滑過文字時，文字會瞬間崩解成亂碼；那些煩人的廣告？直接砸碎它！圖片看起來像是故障了一樣閃爍抖動。
主要的想法是：讓我們在瀏覽網頁的時候，可以用另一個角度來看這個世界。
每個網頁都是別人精心設計的「現實」，但透過這個工具，你可以暫時打破它、扭曲它、甚至消滅它的一部分。這種「破壞」的快感，加上賽博龐克的視覺風格，我覺得會是一個很有趣的效果。
所以，我開發了這個功能。🎮
graph TB
subgraph Injection["注入層"]
BOOKMARKLET["Bookmarklet<br/>javascript:(function(){...})()"]
SCRIPT["glitcher.min.js<br/>~12KB 壓縮腳本"]
end
subgraph Core["核心模組"]
STATE["狀態管理<br/>WeakMap"]
CSS["CSS 注入器<br/>動態樣式"]
AUDIO["音效系統<br/>Web Audio API"]
end
subgraph Effects["效果引擎"]
SCRAMBLER["Text Scrambler<br/>文字亂碼化"]
GLITCH["Image Glitch<br/>RGB 分離 + 抖動"]
ZAP["Element Zap<br/>旋轉消失"]
end
subgraph UI["介面層"]
PANEL["控制面板<br/>開關 | 音效 | 重置"]
EVENTS["事件委派<br/>Capturing Phase"]
end
BOOKMARKLET --> |"載入"| SCRIPT
SCRIPT --> STATE
SCRIPT --> CSS
SCRIPT --> AUDIO
CSS --> |"注入 keyframes"| Effects
STATE --> |"追蹤元素狀態"| Effects
EVENTS --> |"hover"| SCRAMBLER
EVENTS --> |"hover"| GLITCH
EVENTS --> |"click"| ZAP
PANEL --> |"控制"| STATE
AUDIO --> |"播放"| Effects
sequenceDiagram
participant User as 使用者
participant Browser as 瀏覽器書籤列
participant Target as 目標網站
participant Glitcher as Cyber Glitcher
User->>Browser: 拖曳 Bookmarklet 到書籤列
Note over Browser: 一次性安裝
User->>Target: 瀏覽任意網站
User->>Browser: 點擊 CYBER_GLITCH 書籤
Browser->>Target: 注入 glitcher.min.js
Target->>Glitcher: 初始化
Glitcher->>Target: 注入 CSS 樣式
Glitcher->>Target: 建立控制面板
Glitcher->>Target: 綁定事件監聽
Note over Target: 🎮 Glitch Mode 啟動！
alt 滑鼠滑過文字
User->>Target: hover <p>
Glitcher->>Target: 文字變亂碼
User->>Target: 移開滑鼠
Glitcher->>Target: 漸進還原文字
end
alt 滑鼠滑過圖片
User->>Target: hover <img>
Glitcher->>Target: RGB 分離 + 抖動
end
alt 點擊元素
User->>Target: click 任意元素
Glitcher->>Target: 旋轉縮小消失
Glitcher->>Target: 顯示 [null] 標記
end
alt Shift + 點擊文字
User->>Target: Shift+Click <p>
Glitcher->>Target: 永久鎖定亂碼
end
- 前往 Demo 頁面
- 找到綠色的 CYBER_GLITCH 按鈕
- 直接拖曳到瀏覽器書籤列
- 完成！
- 在書籤列上按右鍵 → 新增書籤
- 名稱填：
CYBER_GLITCH - 網址填入以下程式碼：
javascript:(function(){if(window.__CYBER_GLITCHER__)return;var s=document.createElement('script');s.src='https://tznthou.github.io/day-13-cyber-glitch/dist/glitcher.min.js';document.body.appendChild(s);})();# 複製專案
git clone https://github.com/tznthou/day-13-cyber-glitch.git
cd day-13-cyber-glitch
# 直接開啟測試頁
open demo/test-page.html
# 或使用 Live Server
npx live-server| 功能 | 觸發方式 | 效果說明 |
|---|---|---|
| 文字擾亂 | Hover 文字 |
文字瞬間變成 █▓▒░@#$% 等亂碼字元 |
| 漸進還原 | 移開滑鼠 | 文字一個字一個字慢慢恢復原狀 |
| 永久鎖定 | Shift + Click |
文字永遠保持亂碼狀態 |
| 圖片故障 | Hover 圖片 |
RGB 色差分離 + 高速抖動 + 隨機反色 |
| 元素粉碎 | Click 任意元素 |
元素旋轉 720° 縮小消失，留下 [null] |
| 控制面板 | 右下角浮動 | 開關、音效切換、重置頁面 |
| 合成音效 | 自動播放 | Web Audio API 即時合成 glitch 音效 |
啟動後會在網頁右下角出現控制面板：
| 按鈕 | 功能 |
|---|---|
[ACTIVE] / [PAUSED] |
開關 Glitch 效果 |
[SOUND: OFF] / [SOUND: ON] |
開關音效 |
[RESET] |
還原所有被修改的文字與圖片 |
提示：被
[null]消除的元素需要重新整理頁面才能恢復。
| 技術 | 用途 |
|---|---|
| Vanilla JavaScript (ES6+) | 核心邏輯，無框架依賴 |
| IIFE 立即執行函式 | 防止全域命名空間污染 |
| WeakMap | 元素狀態管理，防止記憶體洩漏 |
| Event Delegation | 單一監聽器處理所有事件 |
| Capturing Phase | 確保事件在頁面處理前被攔截 |
| Web Audio API | 即時合成 glitch 音效 |
| CSS Keyframes | 動畫效果（抖動、旋轉、閃爍） |
day-13-cyber-glitch/
├── index.html # 展示頁 + 安裝說明（支援中英文切換）
├── src/
│ └── glitcher.js # 核心腳本（有註解，~650 行）
├── dist/
│ └── glitcher.min.js # 壓縮版（~12KB）
├── demo/
│ └── test-page.html # 本地測試頁
├── README.md # 中文說明
├── README_EN.md # 英文說明
├── package.json # npm 設定（terser 壓縮用）
└── LICENSE # MIT 授權
const GLITCH_CHARS = '█▓▒░╬╠╣┼◢◣◤◥@#$%^&*!?<>/\\|_-=+[]{}~';
function scrambleChar(char) {
// 保留空白
if (/\s/.test(char)) return char;
// 保留標點符號
if (/[.,!?:;'"()-]/.test(char)) return char;
// 保留中文標點
if (/[\u3000-\u303F\uFF00-\uFFEF]/.test(char)) return char;
// 隨機替換成 glitch 字元
return GLITCH_CHARS[Math.floor(Math.random() * GLITCH_CHARS.length)];
}// 時間常數集中管理
const TIMING = {
SCRAMBLE_INTERVAL: 50, // 文字擾亂更新間隔
RESTORE_CHAR_DELAY: 25, // 每個字元還原間隔
RESTORE_MULTIPLIER: 30, // 還原時間計算係數
RESTORE_BUFFER: 100 // 還原緩衝時間
};
function restoreText(el, original) {
const chars = el.textContent.split('');
let i = 0;
const interval = setInterval(() => {
if (i >= original.length) {
clearInterval(interval);
return;
}
chars[i] = original[i]; // 每次還原一個字元
el.textContent = chars.join('');
i++;
}, TIMING.RESTORE_CHAR_DELAY); // 使用常數，方便調整
}if (window.__CYBER_GLITCHER__) {
console.warn('[CYBER_GLITCHER] Already active.');
return;
}
window.__CYBER_GLITCHER__ = true;| 名稱 | Hex | 用途 |
|---|---|---|
| Terminal Green | #00ff00 |
主要強調色、文字效果 |
| Magenta | #ff00ff |
RGB 分離左側陰影 |
| Cyan | #00ffff |
RGB 分離右側陰影 |
| 警告紅 | #ff0000 |
RESET 按鈕 |
靈感來自《駭客任務》和《賽博龐克 2077》：
- 掃描線濾鏡覆蓋整個頁面
- 霓虹綠發光效果
- 等寬字體（Courier New / Monaco）
- 高對比度配色
| 瀏覽器 | 版本 | 支援狀態 |
|---|---|---|
| Chrome | 80+ | ✅ 完整支援 |
| Firefox | 75+ | ✅ 完整支援 |
| Safari | 13+ | ✅ 完整支援 |
| Edge | 80+ | ✅ 完整支援 |
| IE | - | ❌ 不支援 |
- 某些網站可能阻擋：有 CSP（Content Security Policy）的網站可能無法載入外部腳本
- 不會修改原始碼：所有效果只在瀏覽器端，重新整理就恢復正常
- 消除的元素：被 Click 消除的元素需要重新整理頁面才能恢復
- 效能考量：在元素極多的頁面上可能略微影響效能
本專案採用 MIT License 授權。