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

问题描述

我正在开发一个 Google Chrome 扩展程序，它将样式表注入到我在 manifest.json 中定义的特定网站中.

I'm developing a Google Chrome Extension which is injecting a stylesheet into a specific website I defined in manifest.json.

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

In the stylesheet are webfonts included with @font-face and src: url("chrome-extension://__MSG_@@extension_id__/assets/fonts/[...], but __MSG_@@extension_id__ doesn't seem to work and webfonts like Font Awesome just end up still showing squares.

manifest.json

manifest.json

"manifest_version": 2,

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

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

main.css

@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，以同样的方式包含在内.

I've already tried hardcoding my Extension ID in the url and it worked on my iMac and displayed Font Awesome correctly, but when I switched to my Macbook and hardcoded the new Extension ID in, it doesn't work anymore, but I'm sure I've did nothing wrong, since I just needed to change the ID. Now I wanted to try __MSG_@@extension_id__ but it also doesn't work. Another try to embed the fonts with Base64 also failed. My other webfonts are Roboto and Open Sans included the same way.

这就像 Chrome 扩展程序无法访问字体.

It's like the Chrome Extension can't access to the fonts.

推荐答案

我看到了关于这个问题的最后一条评论，4 年后同样的问题 :D.我相信几乎每个人都已经找到了解决方案，或者他们已经按照自己的方式完成了工作.但我认为这会对其他人有所帮助，因为同样的问题不断被问到.

I saw the last comment on the question, Same problem 4 years later :D.I am sure almost everyone already finds out the solution or they have got the things done in their way. But I think this will help others as the same question is being asked again and again.

回答

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 创建了变量，但您可以根据自己的要求创建.

I just created variables for two URLs but you can create as per your requirements.

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

参考资料

• Google Chrome 扩展程序相对路径
• https://developer.chrome.com/docs/扩展/参考/运行时/#method-getURL

这篇关于“__MSG_@@extension_id__"不起作用并且 webfonts 不加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！