在浏览器扩展中包含本地文件？答案

【问题标题】：Include Local Files in Browser Extension?在浏览器扩展中包含本地文件？
【发布时间】：2013-11-25 12:26:33
【问题描述】：

我目前正在为 Chrome 和 Safari 开发浏览器扩展程序。更具体地说，当用户将鼠标悬停在某些关键字上时，会出现一个工具提示。目前，我正在使用带有指向我网站上托管的某些字体的链接的@font-face。问题是 - 它们需要很长时间才能加载。是否可以在浏览器扩展中本地包含字体而不是从外部链接到它们？你能把字体（甚至图像？）和其他扩展文件打包在一起吗？

【问题讨论】：

标签： html css google-chrome safari font-face

【解决方案1】：

是的，你可以，这很常见。只需确保您有权分发您未创作的所有字体/图像。拥有个人执照不算在内。

每个扩展程序都保存在本地，无论使其运行的代码是否需要互联网访问和服务器端脚本。 Chrome 扩展只是一个保存为crx 存档的目录，它实际上是一个重命名的zip 文件。该目录以及必要的开发人员信息和元数据与任何其他站点的目录一样，具有html、css、javascript、字体、图像等。显然，如果您的扩展程序确实使用服务器端脚本，那些需要托管。如果您正在构建扩展，我相信您知道其中的大部分内容，但我正在详细说明，以便初学者可以跟随。

一般来说，字体是很小的文件（很少超过 200k，除非它们是 grunge 类型，或者您嵌入的字符过多），因此如果它们是自托管的并且加载时间过长，则问题可能出在你的主人。如果我是你，我会使用不需要自托管且免费的 Google 字体。

有several ways 嵌入它们，无论您选择哪个选项。但这里有一个如何链接到本地存储在 .crx 文件中的字体的示例，<style> 标签位于 <head> 标签之间：

<style>

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url("fonts/OpenSans-Regular-webfont.woff") format("woff");
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: local('Open Sans Italic'), local('OpenSans-Italic'), url("fonts/OpenSans-Italic-webfont.woff") format("woff");
}

</style>

显然，所有路径都相对于您的crx 目录中的html 文件。

【讨论】：