javascriptgoogle-chrome-extensionchrome-extension-manifest-v2

Why i am getting chrome-extension://invalid/ error when trying to load local font

I start a chrome extension that is triggered on instagram.com. I wanted to load a local font but when I open the extension I get this error when font is loading

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

In my network tab when font is loading I have a net::ERR_FAILED with details:

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

I follow this solution to load local font https://stackoverflow.com/a/54957601/16813072

here is my code

manifest.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",
  ],
  ...
}

app.tsx

I use 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';
  }
  `

Does my code seems correct ?

Update :

Seems to work with chrome.runtime.getURL

in app.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';
  }
`
Solution

  • We can use chrome.runtime.getURL API to get the URL of our resource and then we can provide that URL in src of font-face.

    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';
  }
`

    References