Chrome扩展中雨滴动画效果失效问题求助

问题根源分析 #

你的雨滴动画未显示主要由以下几个问题导致：

• Canvas元素ID不匹配：动态创建的canvas ID为rainy-background，但初始化函数却尝试获取ID为canvas的元素，导致无法获取画布对象。
• Canvas尺寸与层级设置错误：CSS中尺寸值带引号无效，且未设置画布层级，导致画布被页面元素遮挡或尺寸异常。
• 事件绑定错误：window.onload = setup();会立即执行函数而非在页面加载后触发，可能导致DOM未就绪时执行初始化。

修复步骤与代码修改 #

1. 修改manifest.json（优化匹配规则）

将匹配范围扩展到谷歌搜索的所有页面，避免仅匹配首页：

{
  "manifest_version": 3,
  "name": "Weather Back",
  "description": "change the background of google search bar",
  "version": "1.1",
  "content_scripts": [{
    "matches": ["https://www.google.com/*"],
    "css": ["style.css"],
    "js": ["main.js"]
  }]
}

2. 修正main.js代码

// 创建canvas并设置基础样式
var canvas = document.createElement("canvas");
canvas.style.position = "fixed";
canvas.style.top = "0";
canvas.style.left = "0";
canvas.style.zIndex = "-1"; // 置于页面底层，不遮挡内容
canvas.id = "rainy-background";
document.body.appendChild(canvas);

// 全局变量
var ctx, vRain;

// 雨滴类
class Rain {
  constructor(x, y, l, v) {
    this.x = x;
    this.y = y;
    this.vy = v;
    this.l = l;
  }

  show() {
    ctx.beginPath();
    ctx.strokeStyle = "white";
    ctx.moveTo(this.x, this.y);
    ctx.lineTo(this.x, this.y + this.l);
    ctx.stroke();
  }

  fall() {
    this.y += this.vy;

    if (this.y > canvas.height) {
      this.x = Math.floor(Math.random() * canvas.width) + 5;
      this.y = Math.floor(Math.random() * 100) - 100;
      this.l = Math.floor(Math.random() * 30) + 1;
      this.vy = Math.floor(Math.random() * 12) + 4;
    }
  }
}

// 动画循环
function loop() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  for (var i = 0; i < vRain.length; i++) {
    vRain[i].show();
    vRain[i].fall();
  }
}

// 初始化函数
function setup() {
  // 使用已创建的canvas对象，无需通过ID查找
  ctx = canvas.getContext("2d");
  // 设置画布实际尺寸为窗口大小
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  vRain = [];

  // 创建雨滴
  for (var i = 0; i < 250; i++) {
    vRain[i] = new Rain(
      Math.floor(Math.random() * canvas.width) + 5,
      Math.floor(Math.random() * 100) - 100,
      Math.floor(Math.random() * 30) + 1,
      Math.floor(Math.random() * 12) + 4
    );
  }

  // 监听窗口 resize，调整画布尺寸
  window.addEventListener('resize', () => {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
  });

  setInterval(loop, 10);
}

// 直接执行初始化（content script默认在DOM就绪后执行）
setup();

3. 修正style.css代码

html body {
  background: linear-gradient(#361e56, rgb(150, 145, 153));
}

canvas {
  width: 100vw;
  height: 100vh;
}

关键修复点说明 #

1. Canvas ID匹配：直接使用动态创建的canvas对象，避免ID查找错误。
2. 层级与尺寸：设置z-index: -1让画布在页面底层，同时用100vw/100vh和窗口inner尺寸确保画布覆盖整个视口。
3. 事件绑定优化：移除错误的立即执行调用，直接在脚本中执行setup（content script的执行时机已保证DOM就绪）。
4. 响应式调整：添加窗口resize监听，确保画布尺寸随窗口变化而更新。

内容的提问来源于stack exchange，提问作者Hiver