我正在创建一个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
:
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
我设置为扩展根目录的文件夹:
我可能做错了什么?
正确的方案是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);
/* ............. */
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句