Using icons (e.g. font awesome)

[tommedema]

I've tried to use react-fa by setting up the following loaders:

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

This works fine on development when injecting into a HTTP page. However, when navigating to a HTTPS page, the url-loader will try to access woff2 files from a unsecured endpoint. The exact error is:

addStyles.js?b980:242Mixed Content: The page at 'https://tweakers.net/?brudy' was loaded over HTTPS, but requested an insecure font 'http://localhost:3000/js/926c93d201fe51c8f351e858468980c3.woff2'. This request has been blocked; the content must be served over HTTPS.

This seems like a tricky issue that would be a good addition to the boilerplate. Do you have an idea on how to resolve this?

Similarly, when building the extension, rather than running with webpack-dev-server, the files cannot be loaded at all.

[jhen0409]

the content must be served over HTTPS.

The problem is same with https://github.com/jhen0409/react-chrome-extension-boilerplate/pull/37#issuecomment-217719393.

Similarly, when building the extension, rather than running with webpack-dev-server, the files cannot be loaded at all.

You need to add publicPath chrome-extension://{extension-id}/ to production config, then set web_accessible_resources in manifest.json.

[tommedema]

@jhen0409 about the second issue: how can I know the extension ID prior to building it? and what to set web_accessible_resources to?

[jhen0409]

about the second issue: how can I know the extension ID prior to building it?

This is a difficult problem, if not publish will not be determined id. I'm looking for a simple way to transform publicPath, made it can get extension id, maybe a Webpack plugin? I'll take the time to try.

and what to set web_accessible_resources to?

Add you want allow access files to this place, like .ttf file in production.

[jhen0409]

Closed via #41, just set __webpack_public_path__ dynamically at runtime in the entry point. Also let HMR works via https://github.com/glenjamin/webpack-hot-middleware/pull/109 (webpack-hot-middleware@^2.11.0).