css - 为 Chrome 开发扩展时在样式表中引用静态图像或字体

Question

我正在创建一个 Google Chrome 扩展程序。 我想对我通过 CSS 定义的一些元素使用 background-image 属性。但我不确定 url() 应该如何给出。我试过相对 URL，但它试图获取相对于站点域的图像!与扩展程序的源目录无关。

样式表通过 list 文件包含在我的扩展程序中，如下所示:

  ...
  "content_scripts": [
    {
      "matches": ["http://www.myblahblahsite.com/"],
      "js": ["core.js"],
      "css":["styles.css"]
    }
  ],
  ...

此外，我也喜欢使用 @font-face

对自定义字体做同样的事情

例如:

@font-face {
    font-family: 'abcCustom';
    src:  url("fonts/abcCustom.ttf") format('ttf');
}

这不会正确考虑字体相对于扩展名的路径!

有什么想法或建议吗？ 谢谢。

Answer 1

你需要让它成为你的扩展的绝对 url，最好的方法是这样的:

@font-face{
  font-family: 'abcCustom';
  src: url('chrome-extension://__MSG_@@extension_id__/fonts/abcCustom.ttf') format('ttf');
}

这是 i18n 的一部分应用程序接口(interface)。