相关疑难解决方法(0)

我正在开发一个 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 …

我正在构建Chrome扩展程序,并尝试通过内容脚本向DOM添加带有背景图像的div.CSS加载正确,图像URL似乎正确通过开发人员工具检查器查看它.

$('.close-button').css('background', 'url('+chrome.extension.getURL('img/btn_close.png')+')');

该URL显示在检查器中

chrome-extension://fdghianmcdbcgihapgdbjkdoaaocmoco/img/btn_close.png

但图像不会在后台加载.如果我做同样的事情,但加载图像作为img标签的src,图像在浏览器中明显显示为已损坏.

但是,当我将此URL粘贴到浏览器URL栏并加载它时,它显示正常.把它加载到DOM有什么问题？