How to reference the ExtensionID in css?

Add-ons Development
#1

I am working on a browser-extension for Chrome, firefox, Opera and Edge. I am trying to keep the codebase as compatible as possible for all 4 browsers (to keep future updates as easy to work with as possible).
I have come across an issue I havent been able to solve. In the chrome extension I have included a font as a WOFF2 file and reference it inside the CSS like this:

src: url(“chrome-extension://MSG@@extension_id_/Bebas_neue.woff2”) format(“woff2”);}

The format MSG@@extension_id_ doesn’t seem to work in firefox - but how do I reference the extension ID inside a css file?

BTW I am SO glad to see Injectable stylesheets is close to being implemented in Firefox - working with Shadow DOM this is a major leap forward!!

#2

Kind of found a solution: Referencing the font as a DATA URI seems to work in all 4 browsers - only downside is that it gets a tad long in the CSS. I used this page to generate the URI: https://dopiaza.org/tools/datauri/index.php

#3

This could be related to Firefox using randomized UUIDs for extensions upon installation.

Can you use runtime.getURL() to get the correct path to your font files?

1 Like
#4 
src: url(“chrome-extension://__MSG_@@extension_id__/Bebas_neue.woff2”) format(“woff2”);}

Obviously can’t work, because Firefox uses the scheme moz-extension: and not chrome-extension://

1 Like
#5

I believe the correct solution would be to use a relative URI, which will work no matter the protocol or base URL.

1 Like
#6

I can’t believe the solution was that easy :smirk:

The relative URL was the obvious solution!

Thanks a lot: Works really well in all 4 browsers…

1 Like
#7

LOL point taken! - to my defence the extensions code has “Chrome” 50+ other places where it works well in Firefox :laughing:
moz-extension://__MSG_@@extension_id... Didn’t work either - but as freaktechnik pointed out: I obviously just had to swap the URL for a relative URL…

#8

It should also work if you use /Bebas_neue.woff2 AFAIK, i.e. an absolute URL, but without specyfing the “domain”/“protocol”.