Chrome Extension Manifest 3定时器结束后GIF overlay无法显示问题

你的问题核心在于Content Script运行在网页的上下文环境中，直接使用相对路径'AAA.gif'会被解析为当前网页域名下的资源，而非扩展包内的文件。以下是具体的修复步骤：

1. 修正Content Script中的图片路径 #

在contentScript.js中，使用chrome.runtime.getURL()方法获取扩展内资源的绝对URL，这个方法会自动生成符合扩展资源访问规则的路径：

// Create an image element
const imgSrc = chrome.runtime.getURL('AAA.gif'); // 替换原相对路径
const img = document.createElement('img');
img.src = imgSrc;
img.style.position = 'fixed';
img.style.top = '50%';
img.style.left = '50%';
img.style.transform = 'translate(-50%, -50%)';
img.style.zIndex = '10000';
document.body.appendChild(img);

2. 在Manifest中配置可访问资源 #

Chrome扩展默认限制网页上下文直接访问扩展内的资源，需要在manifest.json中添加web_accessible_resources字段，允许目标网页加载你的GIF文件：

{
  "manifest_version": 3,
  // 其他已有配置（比如name、version、permissions等）...
  "web_accessible_resources": [
    {
      "resources": ["AAA.gif"],
      "matches": ["<all_urls>"] // 若只针对特定网站，可替换为对应域名，比如"https://*.example.com/*"
    }
  ]
}

• resources：列出需要允许外部访问的扩展文件
• matches：指定允许加载这些资源的网页范围，<all_urls>表示所有网站，按需调整

3. 额外检查点 #

• 确认AAA.gif文件确实放在扩展包的根目录（或对应路径），文件名大小写与代码中完全一致
• 若使用Manifest V2，web_accessible_resources的配置格式为直接数组：

  "web_accessible_resources": ["AAA.gif"]
  

为什么新标签页能正常显示？ #

因为新标签页直接加载扩展内的资源（格式为chrome-extension://[扩展ID]/AAA.gif），属于扩展自身的上下文，不受网页资源访问限制，所以能正常显示。

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