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

Question

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

Try to give a relative path in src of font-face. Like ( URL('./assets/ClashGrotesk-Variable.ttf') — Dinesh Patil, Sep 02 '21 at 13:44
@DineshPatil with relative path my extension tries to get fonts on following url `https://www.instagram.com/mlle_zaza/assets/ClashGrotesk-Variable.ttf`which of course id not working. — Alan_, Sep 02 '21 at 14:06
try this, var url = chrome.extension.getURL('sprites.png');, references: https://stackoverflow.com/questions/3958617/google-chrome-extension-relative-path, Read commnets of this question will definitely help you https://stackoverflow.com/questions/31401981/msg-extension-id-doesnt-work-and-webfonts-dont-load — Dinesh Patil, Sep 02 '21 at 14:27
@DineshPatil Thank you it work with `const urlClashGrotesk = chrome.runtime.getURL('assets/ClashGrotesk-Variable.ttf')` then use this url in css @font-face : `src: url(${urlClashGrotesk})` — Alan_, Sep 02 '21 at 22:15
Hello, @Alan_, you can do one awesome thing. You know you can add your answer in the answer section rather than updating the question. Also can approve the answer which gave you solution. So If in the future someone tries to find the answer for the same problem, So they can easily check the approved answer and get the solution. For now I am adding the answer. Thanks — Dinesh Patil, Sep 03 '21 at 05:33

score 0 · Accepted Answer · answered Sep 03 '21 at 05:37

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

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

1 Answers1