从 Chrome 扩展内容脚本加载嵌入式 fonts

Question

这就是我在我的 Chrome 扩展程序中加载嵌入式 fonts 的方式：

清单.json：

{
    // more stuff
    "content_scripts": [
        {
            "matches": ["<all_urls>"],
            "css": ["style.css"],
            "js": ["content.js"]
        }
    ],
    // more stuff
    "web_accessible_resources": [
        {
            "resources": ["*.ttf"],
            "matches": ["<all_urls>"]
        }
    ]
}

样式.css：

@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 500;
    src: url('chrome-extension://__MSG_@@extension_id__/fonts/Nunito-Medium.ttf');
}

如果字体是从style.css调用的，则字体会加载到我的 Chrome 扩展程序中。 但是，如果它是从content.js调用的（插入Webpack ），我会收到此错误：

获取 chrome-extension://invalid/.net::ERR_FAILED

我认为，出于某种原因， __MSG_@@extension_id__在从content.js调用时不起作用。

___CSS_LOADER_EXPORT___.push([module.id, "extension://__MSG_@@extension_id__/fonts/Nunito-Medium.ttf') // more stuff 

可能是什么原因，以及如何使__MSG_@@extension_id__在content.js中工作？ 或者如何从content.js或 Chrome 扩展中的任何 JavaScript 文件加载嵌入的 fonts？

Answer 1

文档说这些神奇的MSG常量用于“manifest.json 和 CSS 文件”，然后错误地说@@extension_id可以在 JavaScript 文件中使用，但事实并非如此。

在 JS 代码中我们可以使用chrome.runtime.getURL ：

var url = chrome.runtime.getURL('fonts/Nunito-Medium.ttf');

它还与"use_dynamic_url": true web_accessible_resources中的 true 使用特殊的随机 id 而不是扩展 id。