Chrome扩展程序：无法加载本地资源

Question

我正在创建一个Chrome扩展，用于修改网站，但我在加载Web字体方面遇到了麻烦。

在我的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：

chrome://extensions/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文件夹：

我可能做错了什么？

- Andre Pena

Answer 1

正确的协议方案是 chrome-extension://。
另请参见i18n API，了解JS/CSS文件中允许使用的常量列表：

特殊消息@@extension_id可在CSS和JavaScript文件中使用，无论扩展还是应用程序是否本地化。该消息不能在清单文件中工作。

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

- wOxxOm

---

完美。谢谢。 - Andre Pena

你好，我使用以下代码时出现了“文件未找到”的错误：window.open("chrome-extension://cgfdoidimkkegpikmhlmmdlacnncnjma","","","false");，并且使用以下代码时出现了“不允许加载本地资源”的错误：window.open("chrome://extensions/?id=cgfdoidimkkegpikmhlmmdlacnncnjma","","","false");。 - Shayan