Linking to local files within css file - google-chrome-extension

Question

I'm attempting to completely overhaul a websites css and possibly html and just trying to find a way that works for me.
The problem is that within an extension local css file I'm also trying to define a font url via extension local files.
manifest.json:
{
"name": "Test theme",
"description": "Custom theme for Darkmass.gg.",
"version": "0.0.1",
"manifest_version": 3,
"content_scripts": [
{
"matches": [
"https://*.example.com/*"
],
"css": [
"./css/main.css"
],
"js": [
"./js/app.js"
],
"run_at": "document_end"
}
],
"web_accessible_resources": [
{
"resources": [ "./media/*" ],
"matches": [ "https://*.example.com/*" ]
}
]
}
main.css:
#font-face {
font-family: NFLDolph;
src: url('chrome-extension://ipbedjgbhlnngdddbaojpnaicdpifmgd//media/fonts/NFLDOLPH.TTF');
}
The problem clearly lies with the source url for the NFLDolph font-face, if I just leave it as ./media/fonts/NFLDOLPH.ttf than it just tries to load the font from example.com instead of locally.
And here is the error I get:
Denying load of chrome-extension://ipbedjgbhlnngdddbaojpnaicdpifmgd//media/fonts/NFLDOLPH.TTF. Resources must be listed in the web_accessible_resources manifest key in order to be loaded by pages outside the extension.

Answer 1

I made a sample.
manifest.json
{
"name": "NFLDolph",
"version": "1.0",
"manifest_version": 3,
"content_scripts": [
{
"css": [
"main.css"
],
"matches": [
"<all_urls>"
]
}
],
"web_accessible_resources": [
{
"resources": [
"font/*.TTF"
],
"matches": [
"<all_urls>"
]
}
]
}
main.css
#font-face {
font-family: NFLDolph;
src: url("chrome-extension://__MSG_##extension_id__/font/NFLDOLPH.TTF");
}
* { font-family: NFLDolph, serif }