Почему я получаю chrome-extension://invalid/ error при попытке загрузить локальный шрифт

Question

Почему я получаю chrome-extension://invalid/ error при попытке загрузить локальный шрифт

Я запускаю расширение Chrome, которое запускается на instagram.com. Я хотел загрузить локальный шрифт, но когда открываю расширение, я получаю эту ошибку, когда шрифт загружается.

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

На вкладке сети при загрузке шрифта у меня есть net::ERR_FAILED с деталями:

      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

Я следую этому решению, чтобы загрузить локальный шрифт /questions/42517501/kak-ispolzovat-fontawesome-v-chrome-extension/42517508#42517508

вот мой код

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

я использую 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';
  }
  `

Мой код кажется правильным?

2

javascript google-chrome-extension chrome-extension-manifest-v2

Источник

02 сен '21 в 16:37

1 ответ

Другие вопросы по тегам javascript google-chrome-extension chrome-extension-manifest-v2

user10802524 03 сен '21 в 08:37 2021-09-03 08:37 · Answer 1 · 2021-09-03 08:37

Мы можем использовать chrome.runtime.getURL API, чтобы получить URL-адрес нашего ресурса, а затем мы можем предоставить этот URL-адрес в src 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';
  }
`

использованная литература