Why doesn't my page-mod contentStyle font-face rule in Firefox Addon work?

Question

I'm trying to inject a font-face into pages using the page-mod module in Firefox Addon SDK. Here is the string I've constructed:

var fontString = "@font-face{" +
    "font-family:'Glyphicons Halflings';" +
    "src:url(" + data.url('fonts/glyphicons-halflings-regular.eot') + ");" +
    "src:url(" + data.url('fonts/glyphicons-halflings-regular.eot') + "?#iefix) format('embedded-opentype')," +
    "url(" + data.url('fonts/glyphicons-halflings-regular.woff') + ") format('woff')," +
    "url(" + data.url('fonts/glyphicons-halflings-regular.ttf') + ") format('truetype')," +
    "url(" + data.url('fonts/glyphicons-halflings-regular.svg') + "#glyphicons-halflingsregular) format('svg');}";

and I log the string to console after it's created and it outputs:

@font-face{font-family:'Glyphicons Halflings';src:url(resource://jid1-sqpdj54n2pcvoq-at-jetpack/firefoxaddon/data/fonts/glyphicons-halflings-regular.eot);src:url(resource://jid1-sqpdj54n2pcvoq-at-jetpack/firefoxaddon/data/fonts/glyphicons-halflings-regular.eot?#iefix) format('embedded-opentype'),url(resource://jid1-sqpdj54n2pcvoq-at-jetpack/firefoxaddon/data/fonts/glyphicons-halflings-regular.woff) format('woff'),url(resource://jid1-sqpdj54n2pcvoq-at-jetpack/firefoxaddon/data/fonts/glyphicons-halflings-regular.ttf) format('truetype'),url(resource://jid1-sqpdj54n2pcvoq-at-jetpack/firefoxaddon/data/fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular) format('svg');}

I've tested that this output CSS works by copy and pasting it into a panel page and it works fine. The resources urls are correct. However, when I try and inject it into other pages as a contentStyle rule the page doesn't recognize the font. Here is my code:

require("sdk/page-mod").PageMod({
    include: "*",
    contentScriptFile: [...],
    contentStyle: fontString,
    onAttach: function (worker) {
        console.log('Attached');
    }
});

I've verified that onAttach is being called after each page loads. Also, all the scripts that I am injecting with the same page mod (I didn't include them in the code snippet for brevity) are being injected and work fine. Also, if I change fontString to something simple like body{background-color:red;} it also works fine. Why doesn't the page recognize the font?

Do you see any CSS errors or warnings associated with your code? Or, have you tried putting your css into a separate css file and using contentStyleFile? I don't think you need data.url to get the full resource url, relative urls should work. — therealjeffg, Feb 20 '14 at 17:46
No, relative URLs will not work in contentStyleFile. From the [page-mod API page](https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/page-mod), >You can't currently use relative URLs in stylesheets loaded in this way. For example, consider a CSS file that references an external file like this: background: rgb(249, 249, 249) url('../../img/my-background.png') repeat-x top center; If you attach this file using contentStyleFile, "my-background.png" will not be found. As a workaround for this, you can build an absolute URL to a file in your "data" directory — Andrew Toth, Feb 21 '14 at 17:26

score 0 · Answer 1 · answered Mar 09 '14 at 13:58

0

This is a XSS restriction. If it's possible to convert the font data to a data uri data: then that may work.

Otherwise you may have to file a bug and we can get someone on this.

answered Mar 09 '14 at 13:58

erikvold

15,988
11
54
98

score 0 · Answer 2 · answered Mar 09 '14 at 22:01

For the timebeing, while thats a bug, try this method, use components so go var {Cc, Cu, Ci} = require('chrome'); at top and then paste this somewhere:

var sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
var ios = Cc['@mozilla.org/network/io-service;1'].getService(Ci.nsIIOService);

var css = var fontString = "@font-face{" +
    "font-family:'Glyphicons Halflings';" +
    "src:url(" + data.url('fonts/glyphicons-halflings-regular.eot') + ");" +
    "src:url(" + data.url('fonts/glyphicons-halflings-regular.eot') + "?#iefix) format('embedded-opentype')," +
    "url(" + data.url('fonts/glyphicons-halflings-regular.woff') + ") format('woff')," +
    "url(" + data.url('fonts/glyphicons-halflings-regular.ttf') + ") format('truetype')," +
    "url(" + data.url('fonts/glyphicons-halflings-regular.svg') + "#glyphicons-halflingsregular) format('svg');}";

//var cssEnc = 'data:text/css;base64,' + window.btoa(css);
var cssEnc = encodeURIComponent(css);
var cssUri = makeURI('data:text/css,' + cssEnc);
sss.loadAndRegisterSheet(cssUri, sss.USER_SHEET);

to unregister the stylehsheet, do this sss.unregisterSheet(cssUri, sss.USER_SHEET);

Why doesn't my page-mod contentStyle font-face rule in Firefox Addon work?

2 Answers2