how to have webpack include font awesome woff files in a react based chrome extension?

Question

I'm developing a React.js based chrome extension where all assets are bundled with webpack. On development (with webpack-dev-server), I successfully managed to have Chrome load .woff files from localhost:3000. This is part of the loaders of my development webpack config:

  {
    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'
  }

The chrome extension for development has the following privileges (among others):

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

This works fine, I can use react-fa to use font-awesome like so:

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

However, as soon as I stop using webpack-dev-server, and build to an actual bundle to be imported as a Google chrome extension (with the same loaders), I start seeing the following errors in my console:

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

My chrome extension's manifest permissions are set appropriately, I believe:

font-src 'self';

But for some reason the .woff2 file does not seem to be within the bundle, at least not at that address. I checked the bundle/build folder and found the file at /build/js/926c93d201fe51c8f351e858468980c3.woff2.

How would I make sure that the file is indeed accessible at the address chrome-extension://jboakcijpodokbkfeooiffmbbmlfobnl/926c93d201fe51c8f351e858468980c3.woff2?

Maybe you need to add your font path to `web_accessible_resources` if you want it is accessible by other web pages. Not much clear about your question sorry. — Haibara Ai, May 16 '16 at 09:41

Vaibhav Rai · Answer 1 · 2019-03-16T18:58:44.700

This is a hacky way around, so to include the fontawesome on your react chrome extension app first install fontawesome then build the react app i.e., yarn build after that you will see all the static media files in your build/static/media/ directory either copy the name of each file into your /public/manifest.json for example like

  "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"
  ],

or you can copy the name of media files from /build/asset-manifest.json to /public/manifest.json, then again run yarn build, now all the static media files will be added into /build/manifest.json and then upload the build files to chrome://extensions/. This was the solution I found out after hours.

how to have webpack include font awesome woff files in a react based chrome extension?

1 Answers1