Google Chrome扩展executeScript未执行问题求助

核心问题点 #

1. Manifest版本不兼容：你使用了manifest_version: 2，但background字段用了仅Manifest V3支持的service_worker，这会导致后台脚本执行异常，间接影响脚本注入逻辑。
2. 注入时机错误：在webRequest.onBeforeRequest（页面尚未开始加载时）调用executeScript，此时页面DOM未初始化，脚本无法正常注入执行；同时Manifest中已配置自动注入content script，手动注入属于重复操作且时机不对。
3. 资源路径错误：Content script中直接使用/assets/monster1.png会从当前网站根目录查找资源，而非扩展内部资源，导致图片加载失败。
4. 动画逻辑单位混乱：初始宽度用px，后续更新用%，导致动画行为不符合预期。

修复步骤与代码调整 #

1. 修正Manifest配置

将background字段改为V2支持的scripts格式，并添加资源访问权限：

{
  "manifest_version": 2,
  "name": "Monster Energy Progress Bar",
  "version": "1.0",
  "description": "A fun Monster Energy-themed progress bar for your browser.",
  "permissions": ["activeTab", "<all_urls>"],
  "browser_action": {
    "default_icon": "assets/logo.png",
    "default_popup": "popup.html"
  },
  "background": {
    "scripts": ["background.js"],
    "persistent": true
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["contentScript.js"],
      "run_at": "document_start" // 可选，若需在页面加载初期执行
    }
  ],
  "web_accessible_resources": ["assets/monster1.png"] // 允许页面访问扩展内图片
}

2. 简化后台脚本

移除手动注入content script的逻辑（Manifest已配置自动注入），如果无其他后台需求，background.js可简化为空或直接删除：

// background.js 现在无需注入逻辑，可留空或删除

3. 修复Content Script逻辑

修正资源路径、动画单位，并确保DOM就绪后执行：

// contentScript.js
function injectMonsterEnergyBar() {
  console.log('starting injectingMonsterEnergyBar');
  const progressBar = document.createElement("div");
  progressBar.id = "monster-energy-bar";
  progressBar.style.position = "fixed";
  progressBar.style.top = "100px";
  progressBar.style.left = "0"; // 从屏幕左侧起始
  progressBar.style.width = "0%"; // 初始宽度0%，统一单位
  progressBar.style.height = "100px";
  // 使用chrome.runtime.getURL获取扩展内部资源
  progressBar.style.background = `url('${chrome.runtime.getURL('assets/monster1.png')}') repeat-x`;
  progressBar.style.backgroundSize = "contain"; // 适配容器高度
  document.body.appendChild(progressBar);

  let width = 0;
  const interval = setInterval(function () {
    if (width >= 100) {
      clearInterval(interval);
      progressBar.remove();
    } else {
      width++;
      progressBar.style.width = width + "%";
    }
  }, 50);
}

// 确保DOM加载完成后执行，避免document.body不存在的错误
if (document.readyState === "loading") {
  document.addEventListener("DOMContentLoaded", injectMonsterEnergyBar);
} else {
  injectMonsterEnergyBar();
}

验证方法 #

1. 重新加载扩展：在Chrome扩展管理页面点击"重新加载"按钮。
2. 打开任意页面，查看页面控制台（而非后台控制台），此时应该能看到starting injectingMonsterEnergyBar的日志，同时Monster罐动画会从左到右横穿屏幕。

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