I'm working on a chrome extension that will allow me to download the font files from any website. I'm doing this by using chrome's Web Request API to grab all the stylesheets from a website and parse the @font-face
declarations.
As I do this, I create a data structure that looks something like this:
Fira: [
{
URL: "/_next/static/media/FiraCode-VF.145e4ac7976fbd199e74c748a51585ee.woff2"
format: woff2
font-style: "normal"
font-weight: "300"
}
]
IBMPlexMono: (2) [{…}, {…}]
Inter: (2) [{…}, {…}]
The one thing I'm struggling with is resolving these relative URLs to their full URL. The example above, for instance, comes from https://tailwindcss.com. So I could easily prepend the root domain and resolve it to https://tailwindcss.com/_next/static/media/FiraCode-VF.145e4ac7976fbd199e74c748a51585ee.woff2. This will allow me to download the font.
However, on a site like https://creativemarket.com/ I'll get something that looks like this:
Averta: [
{
URL: “../fonts/averta-regular-webfont.woff2”
format: woff2
font-style: "normal"
font-weight: "400"
}
]
IBMPlexMono: (2) [{…}, {…}]
Inter: (2) [{…}, {…}]
That means I would have to get the URL from which the request was issued, and then traverse the path to resolve the URL.
So my specific question is as follows:
Is there a way to tell whether I'm going to need to prepend the root domain or the requesting URL in order to get the full path?
In other words, how would I have known on https://tailwindcss.com that the relative URL is relative to the root domain.