2

我正在开发一个基于 React.js 的 chrome 扩展，其中所有资产都与 webpack 捆绑在一起。在开发过程中（使用webpack-dev-server），我成功地让 Chrome.woff从localhost:3000. 这是我的开发 webpack 配置的加载器的一部分：

  {
    test: /\.css$/,
    include: /node_modules/,
    loaders: ['style-loader', 'css-loader'],
  },
  {
    test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
    loader: 'url-loader?limit=10000&mimetype=application/font-woff'
  },
  {
    test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
    loader: 'file-loader'
  }

用于开发的 chrome 扩展具有以下特权（除其他外）：

font-src 'self' http://localhost:3000 https://localhost:3000;

这很好用，我可以像这样使用react-fa来使用 font-awesome：

<Icon name="eye" size="2x" />

但是，一旦我停止使用 webpack-dev-server，并构建到要作为 Google chrome 扩展（使用相同的加载器）导入的实际包，我开始在控制台中看到以下错误：

GET chrome-extension://jboakcijpodokbkfeooiffmbbmlfobnl/926c93d201fe51c8f351e858468980c3.woff2 net::ERR_FILE_NOT_FOUND
?brudy:1

GET chrome-extension://jboakcijpodokbkfeooiffmbbmlfobnl/891e3f340c1126b4c7c142e5f6e86816.woff net::ERR_FILE_NOT_FOUND
?brudy:1

GET chrome-extension://jboakcijpodokbkfeooiffmbbmlfobnl/fb650aaf10736ffb9c4173079616bf01.ttf net::ERR_FILE_NOT_FOUND

我相信我的 chrome 扩展程序的清单权限设置得当：

font-src 'self';

但由于某种原因，该.woff2文件似乎不在捆绑包中，至少不在该地址。我检查了 bundle/build 文件夹并在/build/js/926c93d201fe51c8f351e858468980c3.woff2.

我如何确保该文件确实可以在该地址访问chrome-extension://jboakcijpodokbkfeooiffmbbmlfobnl/926c93d201fe51c8f351e858468980c3.woff2？

4

1 回答 1

1

这是一种 hacky 方式，因此要在您的 react chrome 扩展应用程序中包含 fontawesome，首先安装fontawesome，然后构建 react 应用程序，yarn build之后您将看到build/static/media/目录中的所有静态媒体文件，或者将每个文件的名称复制到您的/public/manifest.json例如喜欢

  "web_accessible_resources":[
    "/static/css/content.css",
    "/static/media/fontawesome-webfont.674f50d2.eot",
    "/static/media/fontawesome-webfont.912ec66d.svg",
    "/static/media/fontawesome-webfont.b06871f2.ttf",
    "/static/media/fontawesome-webfont.af7ae505.woff2",
    "/static/media/fontawesome-webfont.fee66e71.woff"
  ],

或者您可以将媒体文件的名称从复制/build/asset-manifest.json到/public/manifest.json，然后再次运行yarn build，现在所有静态媒体文件都将添加到/build/manifest.json，然后将构建文件上传到 chrome://extensions/。这是我几个小时后发现的解决方案。

于 2019-03-15T17:40:52.220 回答