Comienzo una extensión de Chrome que se activa en instagram.com. Quería cargar una fuente local pero cuando abro la extensión aparece este error cuando la fuente se está cargando

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

En mi pestaña de red cuando la fuente se está cargando, tengo una net::ERR_FAILED con detalles:

 General Request URL: chrome-extension://invalid/ Referrer Policy: strict-origin-when-cross-origin Request Headers Provisional headers are shown Learn more DNT: 1 Origin: https://www.instagram.com Referer

Sigo esta solución para cargar la fuente local https://stackoverflow.com/a/54957601/16813072

aquí está mi código

manifiesto.json

 { ... "content_scripts": [ { "matches": ["*://*.instagram.com/*"], "js": ["content_script.js"], "run_at": "document_start", "web_accessible_resources": [ "assets/ClashGrotesk-Variable.ttf" ] } ], "web_accessible_resources": [ "assets/inject.js", "assets/ClashGrotesk-Variable.ttf", ], ... }

aplicación.tsx

Yo uso styled-components

 const GlobalStyle = createGlobalStyle` @font-face { font-family: 'ClashGrotesk-Variable'; src: url('chrome-extension://__MSG_@@extension_id__/assets/ClashGrotesk-Variable.ttf'); font-weight: 200 700; font-display: swap; font-style: normal; } html body { font-family: 'ClashGrotesk-Variable'; } `

¿Mi código parece correcto?

Actualizar :

Parece funcionar con chrome.runtime.getURL

en aplicación.tsx

 const url = chrome.runtime.getURL('assets/ClashGrotesk-Variable.ttf') const GlobalStyle = createGlobalStyle` @font-face { font-family: 'ClashGrotesk-Variable'; src: url(${url}); font-weight: 200 700; font-display: swap; font-style: normal; } html body { font-family: 'ClashGrotesk-Variable'; } `