Estoy trabajando en una extensión de Chrome que me permitirá descargar los archivos de fuentes desde cualquier sitio web. Estoy haciendo esto usando la API de solicitud web de Chrome para obtener todas las hojas de estilo de un sitio web y analizar las declaraciones @font-face .

Mientras hago esto, creo una estructura de datos que se parece a esto:

 Fira: [ { URL: "/_next/static/media/FiraCode-VF.145e4ac7976fbd199e74c748a51585ee.woff2" format: woff2 font-style: "normal" font-weight: "300" } ] IBMPlexMono: (2) [{…}, {…}] Inter: (2) [{…}, {…}]

Lo único con lo que estoy luchando es con la resolución de estas URL relativas a su URL completa. El ejemplo anterior, por ejemplo, proviene de https://tailwindcss.com . Así que podría anteponer fácilmente el dominio raíz y resolverlo en https://tailwindcss.com/_next/static/media/FiraCode-VF.145e4ac7976fbd199e74c748a51585ee.woff2 . Esto me permitirá descargar la fuente.

Sin embargo, en un sitio como https://creativemarket.com/ obtendré algo parecido a esto:

 Averta: [ { URL: “../fonts/averta-regular-webfont.woff2” format: woff2 font-style: "normal" font-weight: "400" } ] IBMPlexMono: (2) [{…}, {…}] Inter: (2) [{…}, {…}]

Eso significa que tendría que obtener la URL desde la que se emitió la solicitud y luego recorrer la ruta para resolver la URL.

Así que mi pregunta específica es la siguiente:

¿Hay alguna manera de saber si necesitaré anteponer el dominio raíz o la URL solicitante para obtener la ruta completa?

En otras palabras, ¿cómo habría sabido en https://tailwindcss.com que la URL relativa es relativa al dominio raíz?