Loading embedded fonts from a Chrome Extension content script

Question

This is how I'm loading embedded fonts in my Chrome Extension:

manifest.json:

{
    // more stuff
    "content_scripts": [
        {
            "matches": ["<all_urls>"],
            "css": ["style.css"],
            "js": ["content.js"]
        }
    ],
    // more stuff
    "web_accessible_resources": [
        {
            "resources": ["*.ttf"],
            "matches": ["<all_urls>"]
        }
    ]
}

style.css:

@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 500;
    src: url('chrome-extension://__MSG_@@extension_id__/fonts/Nunito-Medium.ttf');
}

The font loads in my Chrome Extension if the font is being called from style.css. However, if it's being called from content.js (inserted with Webpack), I get this error:

GET chrome-extension://invalid/ net::ERR_FAILED

I think, for some reason, __MSG_@@extension_id__ isn't working when called from content.js.

___CSS_LOADER_EXPORT___.push([module.id, "extension://__MSG_@@extension_id__/fonts/Nunito-Medium.ttf') // more stuff

What could be the reason, and how to make __MSG_@@extension_id__ work in content.js? Or how to load embedded fonts from content.js or any JavaScript file in a Chrome Extension?

The definition of the ttf file storage folder is inconsistent between manifest.json and style.css. — Norio Yamamoto, Jan 10 '23 at 05:39
Have you tried these? https://stackoverflow.com/questions/31401981/msg-extension-id-doesnt-work-and-webfonts-dont-load — Syed Abdullah, Jan 10 '23 at 05:41
@wOxxOm What documentation? This is what I found: "The special message @@extension_id can be used in the CSS and **JavaScript files.**" https://developer.chrome.com/docs/extensions/reference/i18n/ — alexchenco, Jan 10 '23 at 10:30
@wOxxOm Oh, I see. Thanks for spotting that. Maybe convert all this information to an answer? — alexchenco, Jan 10 '23 at 12:21

score 2 · Accepted Answer · answered Jan 10 '23 at 12:54

The documentation says that these magical MSG constants are for "manifest.json and CSS files" and then mistakenly says that @@extension_id can be used in JavaScript files, but it's not true.

In JS code we can use chrome.runtime.getURL:

var url = chrome.runtime.getURL('fonts/Nunito-Medium.ttf');

It's also compatible with "use_dynamic_url": true in web_accessible_resources which uses a special random id instead of the extension id.

Loading embedded fonts from a Chrome Extension content script

1 Answers1