1024程式設計師節：用不到100行程式碼做個「程式碼雨屏保」裝X神器（附源碼）

1024程序員節：用不到100行程式碼做個“程式碼雨螢幕保護程式”裝X神器（附源碼）

在1024程序員節，整點有意思的東西很重要。今天分享一個程式碼不到100行超輕量的Chrome擴展：在任意網頁按 Alt+M，一鍵觸發“黑客帝國”風格的程式碼雨螢幕保護程式，裝X效果直接拉滿，下面直接上效果與源碼。

效果預覽

按 Alt+M：螢幕進入黑底綠字的程式碼雨模式
再按 Alt+M：退出螢幕保護程式
支援在任何網頁觸發，不影響頁面操作

完整源碼

專案結構

1024
├── manifest.json      # 擴展的"身份證"
└── content.js         # 核心程式碼雨邏輯

第一步：創建專案檔案

創建資料夾 1024
創建 manifest.json 檔案

{
  "manifest_version": 3,
  "name": "1024",
  "version": "1.0.0",
  "description": "Press Alt+M to trigger Matrix rain effect",
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"],
      "run_at": "document_end"
    }
  ]
}

創建 content.js 檔案

// 防止重複注入
if (!window.matrixRainInjected) {
  window.matrixRainInjected = true;

  let isRaining = false;
  let canvas, ctx, animationId;

  // 監聽快捷鍵 Alt+M
  document.addEventListener('keydown', (e) => {
    if (e.altKey && e.key.toLowerCase() === 'm') {
      e.preventDefault();
      toggleMatrixRain();
    }
  });

  function toggleMatrixRain() {
    if (isRaining) {
      stopRain();
    } else {
      startRain();
    }
  }

  function startRain() {
    isRaining = true;

    // 創建全屏Canvas
    canvas = document.createElement('canvas');
    canvas.style.cssText = `
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      z-index: 999999;
      pointer-events: none;
      background: rgba(0, 0, 0, 0.9);
    `;
    document.body.appendChild(canvas);

    ctx = canvas.getContext('2d');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    // 簡化字元集
    const chars = 'CODE1024';
    const charArray = chars.split('');

    const fontSize = 16;
    const columns = Math.floor(canvas.width / fontSize);
    const drops = Array(columns).fill(1);

    // 動畫循環
    function draw() {
      // 半透明黑色背景，產生拖尾效果
      ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
      ctx.fillRect(0, 0, canvas.width, canvas.height);

      ctx.fillStyle = '#0F0'; // 綠色字體
      ctx.font = fontSize + 'px monospace';

      for (let i = 0; i < drops.length; i++) {
        // 隨機字元
        const text = charArray[Math.floor(Math.random() * charArray.length)];
        const x = i * fontSize;
        const y = drops[i] * fontSize;

        ctx.fillText(text, x, y);

        // 隨機重置或繼續下落
        if (y > canvas.height && Math.random() > 0.975) {
          drops[i] = 0;
        }
        drops[i]++;
      }

      animationId = requestAnimationFrame(draw);
    }

    draw();

    // 添加提示文字
    setTimeout(() => {
      const hint = document.createElement('div');
      hint.style.cssText = `
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #0F0;
        font-size: 24px;
        font-family: monospace;
        z-index: 9999999;
        text-shadow: 0 0 10px #0F0;
        pointer-events: none;
        animation: fadeOut 3s forwards;
      `;
      hint.textContent = '[ Alt+M to exit ]';

      // 添加淡出動畫
      const style = document.createElement('style');
      style.textContent = `
        @keyframes fadeOut {
          0% { opacity: 1; }
          70% { opacity: 1; }
          100% { opacity: 0; }
        }
      `;
      document.head.appendChild(style);
      document.body.appendChild(hint);

      setTimeout(() => hint.remove(), 3000);
    }, 500);
  }

  function stopRain() {
    isRaining = false;
    if (animationId) {
      cancelAnimationFrame(animationId);
    }
    if (canvas) {
      canvas.remove();
    }
  }

  // 視窗大小改變時重新調整
  window.addEventListener('resize', () => {
    if (isRaining && canvas) {
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
    }
  });
}

原理解析（簡明易懂）

Canvas 全屏覆蓋：創建一個固定定位的畫布，覆蓋整個視窗，設置 pointer-events: none，避免攔截點擊。
程式碼雨效果：把螢幕橫向按字體大小切分成列，每列都有一個“落點”，逐幀繪製字元下落。
拖尾實現：每一幀先用半透明黑色填充畫布，讓上一幀的內容漸隱，形成“拖尾”。
快捷鍵切換：監聽 Alt+M，調用 startRain/stopRain 函數進行切換。
防重複注入：用 window.matrixRainInjected 標記，避免同一頁面重複綁定。

第二步：安裝與使用

加載1024擴展.gif

打開 Chrome，訪問 chrome://extensions/
打開右上角“開發者模式”
點擊“加載已解壓的擴展程式”，選擇剛剛創建的 1024 資料夾
完成安裝後，訪問任意網頁，按 Alt+M 開始，再按 Alt+M 退出

總結

這個小玩具，祝各位程式員1024節快樂。

如果覺得對您有幫助，歡迎點讚 👍 收藏 ⭐ 追蹤 🔔 支持一下！
往期實戰推薦：

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

⚡ 一個 Vue 自訂指令搞定絲滑拖曳列表，告別複雜元件封裝

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

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

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

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