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 标记，避免同一页面重复绑定。

第二步： 安装与使用

• 打开 Chrome，访问 chrome://extensions/
• 打开右上角"开发者模式"
• 点击"加载已解压的扩展程序"，选择 刚刚创建的1024 文件夹
• 完成安装后，访问任意网页，按 Alt+M 开始，再按 Alt+M 退出

总结

这是一个"代码少、效果强、传播好"的小玩具，非常适合1024程序员节发出来玩。

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