浏览器扩展开发：如何在JavaScript中加载扩展内本地文件

问题背景 #

开发适配Chrome和Firefox的浏览器扩展时，将原本嵌入JS的HTML代码分离到单独的discarded-section.html文件后，通过相对路径调用fetch会从当前访问的网站加载资源，导致404错误，需通过获取扩展内部资源的绝对URL来解决。

核心解决方案：获取扩展资源的绝对路径 #

Chrome和Firefox均提供API生成扩展内部资源的绝对URL，这是解决问题的关键：

1. 跨浏览器兼容的URL生成方法 #

使用浏览器扩展的runtime.getURL方法，传入资源相对路径即可生成带扩展ID的绝对URL：

// 兼容Chrome/Firefox的URL生成函数
const getExtensionResourceURL = (path) => {
  if (typeof chrome !== 'undefined' && chrome.runtime) {
    return chrome.runtime.getURL(path);
  } else if (typeof browser !== 'undefined' && browser.runtime) {
    return browser.runtime.getURL(path);
  }
  throw new Error('当前浏览器不支持扩展API');
};

生成的URL格式类似：

• Chrome：chrome-extension://[扩展ID]/discarded-section.html
• Firefox：moz-extension://[扩展ID]/discarded-section.html

2. 简化的HTML加载代码 #

无需将响应转为Blob再读取，直接用fetch的text()方法获取HTML内容，优化后的代码：

function loadExtensionHTML(resourcePath, callback) {
  const targetURL = getExtensionResourceURL(resourcePath);
  fetch(targetURL)
    .then(response => {
      if (!response.ok) throw new Error('HTML资源加载失败');
      return response.text();
    })
    .then(htmlContent => callback(htmlContent))
    .catch(error => console.error('加载错误:', error));
}

// 调用示例
loadExtensionHTML('discarded-section.html', function(html) {
  $(html).insertBefore("#items-grid");
});

3. 关键配置确认 #

确保manifest.json中web_accessible_resources已正确配置（你当前的配置符合要求），保证资源能被内容脚本访问：

"web_accessible_resources": [
  {
    "resources": [ "images/info.png", "discarded-section.html" ],
    "matches": ["<all_urls>"]
  }
]

替代方案：静态资源导入（可选） #

若无需动态处理HTML内容，可通过创建<link>标签加载（该方法已逐步被Fetch API替代，仅作补充）：

const importLink = document.createElement('link');
importLink.rel = 'import';
importLink.href = getExtensionResourceURL('discarded-section.html');
importLink.onload = () => {
  const htmlContent = importLink.import.body.innerHTML;
  $(htmlContent).insertBefore("#items-grid");
};
document.head.appendChild(importLink);

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