Chrome扩展Manifest V3中CSS本地字体资源加载失败求助

问题原因 #

• 内容脚本的CSS注入目标页面后，相对路径会以页面域名（example.com）为基准，导致浏览器从网站而非扩展本地加载字体。
• 硬编码扩展ID的路径不仅存在ID变动（开发/打包版本ID不同）的问题，你还写错了路径（多了一个斜杠//media），且这种方式扩展性差。

正确解决方案（推荐） #

通过内容脚本JS动态生成字体规则，利用chrome.runtime.getURL()自动获取扩展资源的正确绝对路径，无需硬编码ID：

1. 保留现有manifest.json配置（你的web_accessible_resources已经正确包含./media/*，无需修改）
2. 修改js/app.js，添加以下代码：

// 动态创建样式标签注入字体规则
const fontStyle = document.createElement('style');
const fontResourceUrl = chrome.runtime.getURL('./media/fonts/NFLDOLPH.TTF');
fontStyle.textContent = `
@font-face {
    font-family: NFLDolph;
    src: url('${fontResourceUrl}');
}
`;
document.head.appendChild(fontStyle);

3. 移除main.css中的@font-face规则，避免冲突。

备选方案（仅适用于固定扩展ID场景） #

如果一定要在CSS中直接写路径，需：

• 修正路径格式：把chrome-extension://ipbedjgbhlnngdddbaojpnaicdpifmgd//media/fonts/NFLDOLPH.TTF改为chrome-extension://ipbedjgbhlnngdddbaojpnaicdpifmgd/media/fonts/NFLDOLPH.TTF（去掉多余斜杠）
• 注意：开发阶段扩展ID会变化，打包后若重新打包ID也会改变，仅当你配置了固定扩展ID时才适合用这种方式。

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