为什么我在尝试加载本地字体时收到 chrome-extension://invalid/ 错误答案

【问题标题】：Why i am getting chrome-extension://invalid/ error when trying to load local font为什么我在尝试加载本地字体时收到 chrome-extension://invalid/ 错误
【发布时间】：2021-10-31 23:55:43
【问题描述】：

我启动了一个在 instagram.com 上触发的 chrome 扩展程序。我想加载本地字体，但是当我打开扩展时，字体加载时出现此错误

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

我按照这个解决方案加载本地字体https://stackoverflow.com/a/54957601/16813072

这是我的代码

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

【问题讨论】：

尝试在 font-face 的 src 中给出一个相对路径。喜欢（网址（'./assets/ClashGrotesk-Variable.ttf'）
@DineshPatil 与相对路径我的扩展程序尝试在以下网址上获取字体https://www.instagram.com/mlle_zaza/assets/ClashGrotesk-Variable.ttf这当然 id 不起作用。
试试这个，var url = chrome.extension.getURL('sprites.png');，参考：stackoverflow.com/questions/3958617/…，阅读这个问题的commnets肯定会帮助你stackoverflow.com/questions/31401981/…
@DineshPatil 谢谢它与const urlClashGrotesk = chrome.runtime.getURL('assets/ClashGrotesk-Variable.ttf') 一起工作，然后在css @font-face 中使用这个url：src: url(${urlClashGrotesk})
你好，@Alan_，你可以做一件很棒的事情。您知道您可以在答案部分添加您的答案，而不是更新问题。也可以批准给你解决方案的答案。因此，如果将来有人试图找到相同问题的答案，那么他们可以轻松检查批准的答案并获得解决方案。现在我正在添加答案。谢谢

标签： javascript google-chrome-extension chrome-extension-manifest-v2

【解决方案1】：

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

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

参考文献

【讨论】：