如何将外部资源/字体添加到Firefox扩展中？

我想添加字体到Firefox扩展。如何将外部资源/字体添加到Firefox扩展中？

我已经成功地与PageMode添加样式：

pageMod.PageMod({ ... 
... 
contentStyleFile: [ 
... 
self.data.url('font-awesome.min.css') 
],

的CSS我里面：

font-family:'FontAwesome';src:url('resource://extension_id/fonts/fontawesome-webfont.eot?v=4.0.3')

其中EXTENSION_ID当然是我的ID。

当脚本加载我得到：

下载字体：下载不允许（FONT-FAMILY： “FontAwesome” 样式：正常体重：正常伸展：正常SRC指数：2）：糟糕的URI或跨站点访问不允许来源：资源：？//extension_id/fonts/fontawesome-webfont.ttf v = 4.0.3字体awesome.min.css

来源

2014-01-16 wonglik

我知道我的答案并不完全对应，因为您使用的是绝对URL，但解决方案应该可以工作。让我知道如果它。 – willlma

见文档：PageMod > Options> ContentStyleFile

你可以目前在stylesh中使用相对URL eets以这种方式加载。例如，考虑引用这样一个外部文件中的CSS文件：

background: rgb(249, 249, 249) url('../../img/my-background.png') repeat-x top center;

如果安装使用contentStyleFile这个文件，“我-background.png”不会被发现。

作为解决方法，您可以在“数据”目录中构建文件的绝对URL，并构建将该URL嵌入到规则中的contentStyle选项。例如：

var data = require("sdk/self").data; 
var pageMod = require("sdk/page-mod").PageMod({ 
    include: "*", 
    contentStyleFile: data.url("my-style.css"), 
    // contentStyle is built dynamically here to include an absolute URL 
    // for the file referenced by this CSS rule. 
    // This workaround is needed because we can't use relative URLs 
    // in contentStyleFile or contentStyle. 
    contentStyle: "h1 { background: url(" + data.url("my-pic.jpg") + ")}" 
});

这个附加使用一个单独的文件“我-style.css文件”，使用contentStyleFile加载，对于除了那些引用外部文件中的所有CSS规则。对于需要引用“my-pic.jpg”的规则，该规则存储在附加组件的“data”目录中，它使用contentStyle。

来源

2014-01-17 02:49:06 willlma

这段时间以来无效。文档需要更新，谢谢指出！ – ZER0

我知道在这方面有一些错误，但没有意识到它已经解决了。感谢更新。 – willlma

它没有工作。我最终用base64编码字体。 – wonglik

-1

CSS的资产是相对于CSS加载的。所以你不需要使用绝对路径，而只需要相对路径。

来源

2014-01-19 19:18:42 ZER0

如何将外部资源/字体添加到Firefox扩展中？

回答

相关问题