在 《Chrome扩展中使用Vuejs》 文章中，我们提到过 @font-face 我是用的 CDN 的方式来搞定的。但是用 CDN 的缺点就是网络不畅的时候，扩展中使用 @font-face 的地方显示就是个方块了。
为了解决这个问题，我搜索了下，找到了解决方案。
这里面有几个要点，一个是字体文件可以在任意页面访问到，一个是如何获取到扩展ID。
正常情况下，扩展的资源文件是与所有网页隔离开的，扩展相当于是在一个沙盒里面运行，如果想要在 Content Scripts 模式下，让 JS 或者 CSS 文件访问到扩展中的资源文件，那么就需要在 manifest.json 中增加配置项 web_accessible_resources。
"web_accessible_resources": ["fonts/*"]
就像上面这样增加配置后，我们就可以在 Content Scripts 模式下访问到 fonts/ 目录下的所有资源文件了。
再来说下第二个问题。
我们知道扩展的地址结构是 chrome://[扩展ID]，那么我们的 CSS 文件中的 @font-face 的路径中的扩展ID该怎么获取呢？
通过看文档，找到了预设值 __MSG_@@extension_id__，这是出处：https://developer.chrome.com/extensions/i18n#overview-predefined
那么我们去修改下 element-variables.scss 中的 font-path 像这样：
$--font-path: 'chrome-extension://__MSG_@@extension_id__/fonts';
这样，最关键的两个问题就解决了，最后只要在 webpack.config.js 中需要复制的操作里，增加复制字体文件的操作即可，就像这样：
new CopyPlugin([
......
{ from: '../node_modules/element-ui/lib/theme-chalk/fonts', to: 'fonts' },
......
]),
通过这样设置后，我们通过扩展插入到网页中的 CSS 文件就能直接访问到扩展中的资源文件了。
感谢你的阅读，我是中文区见证人之一，欢迎通过 SteemConnect 来给我投票，或者打开 https://steemitwallet.com/~witnesses 页面，输入 ety001 进行投票。
中文区的见证人目前有：
支持一下他们（按字母顺序），一人可以有30票：
Thank you for reading. I'm a witness. I would really appreciate your witness vote! You can vote by SteemConnect. Or open https://steemitwallet.com/~witnesses page, input ety001 to vote.
