"__MSG_@@extension_id__" doesn't work and webfonts don't load

Question

I'm developing a Google Chrome Extension which is injecting a stylesheet into a specific website I defined in manifest.json.

In the stylesheet are webfonts included with @font-face and src: url("chrome-extension://__MSG_@@extension_id__/assets/fonts/[...], but __MSG_@@extension_id__ doesn't seem to work and webfonts like Font Awesome just end up still showing squares.

manifest.json

"manifest_version": 2,

"content_scripts": [
        {
        "matches": [
            "http://[url].com/*"
        ],
        "css": ["assets/css/main.css"]
    }
],

"web_accessible_resources": ["assets/fonts/*", "assets/img/*"]

main.css

@font-face {
      font-family: 'FontAwesome';
      src: url("chrome-extension://__MSG_@@extension_id__/assets/fonts/fontawesome/fontawesome-webfont.eot?v=4.3.0");
      src: url("chrome-extension://__MSG_@@extension_id__/assets/fonts/fontawesome/fontawesome-webfont.eot?#iefix&v=4.3.0") format("embedded-opentype"), 
           url("chrome-extension://__MSG_@@extension_id__/assets/fonts/fontawesome/fontawesome-webfont.woff2?v=4.3.0") format("woff2"), 
           url("chrome-extension://__MSG_@@extension_id__/assets/fonts/fontawesome/fontawesome-webfont.woff?v=4.3.0") format("woff"), 
           url("chrome-extension://__MSG_@@extension_id__/assets/fonts/fontawesome/fontawesome-webfont.ttf?v=4.3.0") format("truetype"), 
           url("chrome-extension://__MSG_@@extension_id__/assets/fonts/fontawesome/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular") format("svg");
      font-weight: normal;
      font-style: normal; }

I've already tried hardcoding my Extension ID in the url and it worked on my iMac and displayed Font Awesome correctly, but when I switched to my Macbook and hardcoded the new Extension ID in, it doesn't work anymore, but I'm sure I've did nothing wrong, since I just needed to change the ID. Now I wanted to try __MSG_@@extension_id__ but it also doesn't work. Another try to embed the fonts with Base64 also failed. My other webfonts are Roboto and Open Sans included the same way.

It's like the Chrome Extension can't access to the fonts.

Relative URLs don't work, since these won't access the local extension but the website path. The fonts are stored in the extension itself. This is why the fonts and img folders need to be accessible with the `manifest.json` — timche, Jul 14 '15 at 09:12
if `main.css` is inside your extension then it uses local extension's paths. Look [here](https://github.com/thmzlt/github-tree/blob/master/font-awesome.css). — wOxxOm, Jul 14 '15 at 09:19
Yeah, but this will only work inside the extension itself like options.html but I'm using content scripts to inject the main.css into a website. http://stackoverflow.com/questions/3958617/google-chrome-extension-relative-path — timche, Jul 14 '15 at 09:22
I see. Maybe a more fully qualified path would work in manifest: `"assets/fonts/fontawesome/*"` ? — wOxxOm, Jul 14 '15 at 09:28
@timche paths in a css file are relative to the css location, not the webpage's. http://stackoverflow.com/questions/2718532/is-a-relative-path-in-a-css-file-relative-to-the-css-file — rsanchez, Jul 14 '15 at 09:30
I already tried this, but it didn't work. The `*` wildcard allows all files and sub-folders, since on my iMac the hardcoded id can access the font. — timche, Jul 14 '15 at 09:31
I'd try `tabs.insertCSS`: 1. read css file using `getPackageDirectoryEntry`, 2. manually replace `chrome-extension://__MSG_@@extension_id__` using `chrome.extension.getURL`. — wOxxOm, Jul 14 '15 at 09:48
Like I've written above, hardcoding works on my iMac but not on my Macbook and I don't know why. The extension ID will be generated relative to the path where the extension folder is located. This is a problem which I may to solve first. — timche, Jul 14 '15 at 09:51

score -1 · Answer 1 · answered Sep 03 '21 at 05:20

I saw the last comment on the question, Same problem 4 years later :D. I am sure almost everyone already finds out the solution or they have got the things done in their way. But I think this will help others as the same question is being asked again and again.

Answer

const urlFontAwesomeWebFontEot = chrome.runtime.getURL('assets/fonts/fontawesome/fontawesome-webfont.eot')

const urlFontAwesomeWebFontSvg = chrome.runtime.getURL('assets/fonts/fontawesome/fontawesome-webfont.svg')

@font-face {
      font-family: 'FontAwesome';
      src: url(${urlFontAwesomeWebFontEot});
      src: url(${urlFontAwesomeWebFontSvg}) format("svg");
      font-weight: normal;
      font-style: normal; }

I just created variables for two URLs but you can create as per your requirements.

chrome.runtime.getURL API help to get resource's absolute URL pointing extension

References

score -1 · Answer 2 · answered Jan 05 '22 at 10:18

I extend Dinesh's answer - there is the code that is ready to be pasted into js file:

const urlFontAwesomeWebFontEot = chrome.runtime.getURL('assets/fonts/fontawesome/fontawesome-webfont.eot')
const urlFontAwesomeWebFontSvg = chrome.runtime.getURL('assets/fonts/fontawesome/fontawesome-webfont.svg')

const newFontStyleSheet = document.createElement("style");

newFontStyleSheet.textContent = `
@font-face {
      font-family: 'FontAwesome';
      src: url(${urlFontAwesomeWebFontEot});
      src: url(${urlFontAwesomeWebFontSvg}) format("svg");
      font-weight: normal;
      font-style: normal; }
`;

document.head.appendChild(newFontStyleSheet);

score -1 · Answer 3 · answered Jan 14 '22 at 11:58

Just follow below steps:

Lets assume we have a font in fonts folder:

\fonts
    font.woff
manifest.json

update your manifest.json with

...

"web_accessible_resources": [
    "fonts/*"
],

...

in CSS file provide url chrome-extension://__MSG_@@extension_id__/fonts/font.woff

If you don't provide web_accessible_resources permissions, request for font will be blocked (since manifest version 2 including ver 2).

References:

"__MSG_@@extension_id__" doesn't work and webfonts don't load

3 Answers3

Just follow below steps:

Linked