使用__MSG_@@extension_id__加载字体时出现chrome://invalid错误求助

问题原因 #

Manifest V3中，CSS文件内的__MSG_@@extension_id__占位符不会被Chrome的消息本地化系统自动解析替换，浏览器无法识别正确的扩展ID，因此请求路径被解析为chrome-extension://invalid/。

解决方案 #

方案1：使用相对路径（最简单）

直接基于CSS文件的位置使用相对路径引用字体文件，无需依赖扩展ID占位符。
假设你的CSS文件位于css/目录，字体文件在assets/Fonts/目录，修改CSS代码如下：

@font-face {
    font-family: 'PoppinsLight';
    src: url('../assets/Fonts/Poppins-Light.ttf');
}

方案2：通过JS动态注入CSS

利用JS可以获取扩展ID的特性，动态构建包含正确路径的CSS并注入页面：

// 获取扩展ID
const extensionId = chrome.runtime.id;
// 构建字体加载的CSS代码
const fontStyle = `
@font-face {
    font-family: 'PoppinsLight';
    src: url('chrome-extension://${extensionId}/assets/Fonts/Poppins-Light.ttf');
}
`;
// 创建style元素并注入到页面头部
const styleElement = document.createElement('style');
styleElement.textContent = fontStyle;
document.head.appendChild(styleElement);

方案3：在HTML中内联CSS

HTML文件中的__MSG_@@extension_id__会被Chrome自动解析，因此可以将字体加载规则写在HTML的内联style标签中：

<style>
@font-face {
    font-family: 'PoppinsLight';
    src: url('chrome-extension://__MSG_@@extension_id__/assets/Fonts/Poppins-Light.ttf');
}
</style>

额外验证 #

确认你的web_accessible_resources配置已正确包含字体文件路径，Manifest V3配置示例：

"web_accessible_resources": [
    {
        "resources": ["assets/Fonts/*.ttf"],
        "matches": ["<all_urls>"] // 根据扩展实际需求调整匹配范围
    }
]

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