Chrome扩展中从content.js加载内嵌字体失败的原因及解决方法

Chrome扩展的__MSG_@@extension_id__占位符仅会被Chrome在它直接加载的资源文件中自动替换（比如manifest里声明的content_scripts中的CSS文件）。但Webpack打包后的content.js属于JS执行代码，Chrome不会主动扫描并替换JS字符串里的占位符，导致路径中的占位符未被解析，最终变成无效的chrome-extension://invalid/地址。

方法1：在content.js中直接使用chrome.runtime.id拼接路径 #

content script属于扩展上下文，可直接调用chrome.runtime.id获取扩展ID，手动拼接字体路径：

// 示例：动态创建@font-face样式并注入
const fontFaceStyle = document.createElement('style');
fontFaceStyle.textContent = `
@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 500;
    src: url('chrome-extension://${chrome.runtime.id}/fonts/Nunito-Medium.ttf');
}
`;
document.head.appendChild(fontFaceStyle);

如果是Webpack打包生成的CSS代码里的路径，也可以在JS中替换占位符：

// 假设Webpack打包后的CSS内容存在cssContent变量中
const resolvedCss = cssContent.replace('__MSG_@@extension_id__', chrome.runtime.id);
// 注入处理后的CSS
const styleEl = document.createElement('style');
styleEl.textContent = resolvedCss;
document.head.appendChild(styleEl);

方法2：将字体相关CSS单独作为资源由Chrome加载 #

把需要使用字体的CSS从Webpack打包流程中剥离，直接在manifest的content_scripts里声明：

// manifest.json
"content_scripts": [
    {
        "matches": ["<all_urls>"],
        "css": ["style.css", "font-style.css"], // 新增单独的字体样式文件
        "js": ["content.js"]
    }
]

在font-style.css中使用__MSG_@@extension_id__占位符，Chrome会自动替换，content.js里直接引用字体名即可，无需再处理路径。

方法3：Webpack配置中注入扩展ID #

使用Webpack的DefinePlugin，在构建时将__MSG_@@extension_id__替换为chrome.runtime.id：

// webpack.config.js
const webpack = require('webpack');

module.exports = {
    // 其他配置
    plugins: [
        new webpack.DefinePlugin({
            '__MSG_@@extension_id__': 'chrome.runtime.id'
        })
    ]
};

Webpack打包时会把代码中的__MSG_@@extension_id__替换为chrome.runtime.id，运行时会直接获取真实的扩展ID。

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