嘿，这个问题我之前也踩过坑！核心原因就是你直接用相对路径时，浏览器会误以为这个路径是相对于当前打开的第三方网站的，自然找不到扩展文件夹里的文件。下面给你一步步解决的方法：

1. 用Chrome扩展专属URL访问文件 #

Chrome扩展里的所有本地资源，都可以通过chrome-extension://<你的扩展ID>/文件相对路径的格式访问，但手动写扩展ID太麻烦（而且开发/发布时ID还可能变），官方推荐用chrome.runtime.getURL()方法动态生成正确的URL。

比如你要加载extension_src/html/frame.html，可以在扩展的JS代码（比如内容脚本、弹窗脚本）里这么写：

// 创建iframe元素
const iframe = document.createElement('iframe');
// 动态获取扩展内frame.html的绝对URL
iframe.src = chrome.runtime.getURL('extension_src/html/frame.html');
// 把iframe加到页面的红色区域里
document.querySelector('.your-red-area-selector').appendChild(iframe);

这样生成的URL会是类似chrome-extension://abc123xyz/extension_src/html/frame.html的格式，浏览器会直接从你的扩展安装目录加载文件，不会再去第三方网站找了。

2. 配置web_accessible_resources权限 #

如果你的iframe是注入到第三方网页中（和当前网页源不同），必须在manifest.json里配置web_accessible_resources，告诉Chrome允许外部网站访问你的扩展资源。

Manifest V3 配置方式（现在推荐用V3）： #

{
  "manifest_version": 3,
  // 其他扩展配置（比如name、version、content_scripts等）...
  "web_accessible_resources": [
    {
      "resources": ["extension_src/html/frame.html"], // 可添加多个资源路径，用逗号分隔
      "matches": ["<all_urls>"] // 允许所有网站访问，也可指定特定网站如"https://*.example.com/*"
    }
  ]
}

Manifest V2 配置方式（旧版本兼容）： #

{
  "manifest_version": 2,
  // 其他配置...
  "web_accessible_resources": ["extension_src/html/frame.html"]
}

3. 访问扩展内任意文件的通用方法 #

不管是HTML、JS、CSS、图片还是其他资源，只要在扩展文件夹里，都可以用chrome.runtime.getURL('文件相对路径')获取可访问URL。比如：

• 获取图片：chrome.runtime.getURL('images/icon.png')
• 获取CSS文件：chrome.runtime.getURL('styles/main.css')

同样，这些资源如果需要被外部网页访问，也要加到web_accessible_resources里哦。

为什么之前的方法不行？ #

当你在第三方网页里写<iframe src="extension_src/html/frame.html"></iframe>时，浏览器会把这个相对路径解析成当前网页URL的子路径——比如当前网页是https://www.example.com，浏览器就会去https://www.example.com/extension_src/html/frame.html找文件，这个路径显然不存在，所以会出现404错误。而用chrome.runtime.getURL()生成的是扩展自身的资源URL，和当前网页的源无关，就能正确加载到扩展里的文件了。

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