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.