Chrome扩展程序：不允许加载本地资源

Question

我正在创建一个Chrome扩展程序来修改网站，而我在加载网络字体时遇到了问题。

在我的webpack构建之后，我生成了一个dist文件夹。在这个文件夹中，我有一个main.css，其中包含：

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

这是我的webpack publicPath：

  

铬：//扩展/ dilogbnjbadifdhdphnncpfndfocidle

所有文件都在dist文件夹中。

这是我的相关manifest配置：

"web_accessible_resources": [
    "fontawesome-webfont.eot",
    "fontawesome-webfont.svg",
    "fontawesome-webfont.ttf",
    "fontawesome-webfont.woff",
    "fontawesome-webfont.woff2"
  ],

PS：我在web_accessible_resources部分尝试了一切，包括*.[format]，*.*和其他人。

这是我得到的错误：

  

不允许加载本地资源：chrome：//extensions/dilogbnjbadifdhdphnncpfndfocidle/fontawesome-webfont.woff2

截图：

这是我设置为扩展根目录的dist文件夹：

我可能做错了什么？

Answer 1

正确的方案是chrome-extension:// 另请参阅i18n API以获取JS / CSS文件中允许的常量列表：

  

可以在CSS和JavaScript文件中使用特殊消息 @@ extension_id ，无论扩展程序或应用程序是否已本地化。此消息在清单文件中不起作用。

@font-face {
  font-family: 'FontAwesome';
  src: url(chrome-extension://__MSG_@@extension_id__/fontawesome-webfont.eot);
  /* ............. */
}