"__MSG_@@extension_id__" 不起作用并且 webfonts 不加载

Question

我正在开发一个 Google Chrome 扩展程序，它将样式表注入到我在manifest.json.

在样式表中包含@font-face和的webfonts src: url("chrome-extension://__MSG_@@extension_id__/assets/fonts/[...]，但__MSG_@@extension_id__似乎不起作用，像 Font Awesome 这样的 webfonts 最终仍然显示正方形。

清单文件

"manifest_version": 2,

"content_scripts": [
        {
        "matches": [
            "http://[url].com/*"
        ],
        "css": ["assets/css/main.css"]
    }
],

"web_accessible_resources": ["assets/fonts/*", "assets/img/*"]

主文件

@font-face {
      font-family: 'FontAwesome';
      src: url("chrome-extension://__MSG_@@extension_id__/assets/fonts/fontawesome/fontawesome-webfont.eot?v=4.3.0");
      src: url("chrome-extension://__MSG_@@extension_id__/assets/fonts/fontawesome/fontawesome-webfont.eot?#iefix&v=4.3.0") format("embedded-opentype"), 
           url("chrome-extension://__MSG_@@extension_id__/assets/fonts/fontawesome/fontawesome-webfont.woff2?v=4.3.0") format("woff2"), 
           url("chrome-extension://__MSG_@@extension_id__/assets/fonts/fontawesome/fontawesome-webfont.woff?v=4.3.0") format("woff"), 
           url("chrome-extension://__MSG_@@extension_id__/assets/fonts/fontawesome/fontawesome-webfont.ttf?v=4.3.0") format("truetype"), 
           url("chrome-extension://__MSG_@@extension_id__/assets/fonts/fontawesome/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular") format("svg");
      font-weight: normal;
      font-style: normal; }

我已经尝试在 url 中对我的扩展 ID 进行硬编码，它在我的 iMac 上运行并正确显示了 Font Awesome，但是当我切换到我的 Macbook 并在其中硬编码新的扩展 ID 时，它不再起作用，但我确定我没有做错任何事，因为我只需要更改 ID。现在我想尝试，__MSG_@@extension_id__但它也不起作用。另一次尝试使用 Base64 嵌入字体也失败了。我的其他网络字体是 Roboto 和 Open Sans 以同样的方式包含在内。

就像 Chrome 扩展程序无法访问字体一样。

Answer 1

我看到了这个问题的最后评论，四年后同样的问题：D。我相信几乎每个人都已经找到了解决方案，或者他们已经按照自己的方式完成了事情。但我认为这会对其他人有所帮助，因为同样的问题会被一次又一次地问到。

回答

const urlFontAwesomeWebFontEot = chrome.runtime.getURL('assets/fonts/fontawesome/fontawesome-webfont.eot')

const urlFontAwesomeWebFontSvg = chrome.runtime.getURL('assets/fonts/fontawesome/fontawesome-webfont.svg')

@font-face {
      font-family: 'FontAwesome';
      src: url(${urlFontAwesomeWebFontEot});
      src: url(${urlFontAwesomeWebFontSvg}) format("svg");
      font-weight: normal;
      font-style: normal; }

我刚刚为两个 URL 创建了变量，但您可以根据您的要求创建。

chrome.runtime.getURL API 帮助获取资源的绝对 URL 指向扩展

参考

• Google Chrome 扩展程序相对路径
• https://developer.chrome.com/docs/extensions/reference/runtime/#method-getURL