为什么我在尝试加载本地字体时出现 chrome-extension://invalid/ 错误

Question

我启动了一个 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

我按照这个解决方案加载本地字体

这是我的代码

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

我的代码看起来正确吗？

更新 :

似乎适用于 chrome.runtime.getURL

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

Answer 1

我们可以使用 chrome.runtime.getURL API 来获取我们资源的 URL 然后我们可以提供 URL在 font-face 的 src 中。

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

参考资料

Google Chrome extension relative path
https://developer.chrome.com/docs/extensions/reference/runtime/#method-getURL

为什么我在尝试加载本地字体时出现 chrome-extension://invalid/ 错误

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

javascript

google-chrome-extension

chrome-extension-manifest-v2