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

Posted 2023-02-15

【中文标题】"__MSG_@@extension_id__" 不起作用并且 webfonts 不加载

【英文标题】："__MSG_@@extension_id__" doesn't work and webfonts don't load

【发布时间】：2015-10-02 19:35:11

【问题描述】：

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

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

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 嵌入字体也失败了。我的其他 webfonts 是 Roboto 和 Open Sans，以同样的方式包含在内。

Chrome 扩展程序无法访问字体。

【问题讨论】：

相对 URL 不起作用，因为它们不会访问本地扩展，而是访问网站路径。字体存储在扩展本身中。这就是为什么需要使用manifest.json

访问字体和 img 文件夹的原因

如果main.css 在你的扩展中，那么它使用本地扩展的路径。看here。

我会尝试tabs.insertCSS：1. 使用getPackageDirectoryEntry 读取css 文件，2. 使用chrome.extension.getURL 手动替换chrome-extension://__MSG_@@extension_id__。

对此有什么答案吗？

4年后同样的问题：D

【参考方案1】：

我看到了这个问题的最后一条评论，同样的问题 4 年后：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 extension relative path https://developer.chrome.com/docs/extensions/reference/runtime/#method-getURL