Semantic UI fonts with Webpack in a Chrome extension

instructions.md

To get Semantic UI fonts working:

1. npm install semantic-ui-css

2. Import 'semantic-ui-css/semantic.css' in your entry script. The exact syntax for this varies depending on your chosen module format: import for ES6, require for CommonJS, etc. This tells Webpack to pull the CSS into your bundle.

3. npm install --save-dev style-loader css-loader

4. Use css-loader in your Webpack configuration:

   // webpack.config.js
   module: {
     loaders: [
       { test: /\.css$/, loaders: ['style', 'css'] }
     ]
   }

   This tells Webpack how to handle your import of the CSS. When css-loader parses the CSS, it will find references to the required fonts.

5. npm install --save-dev file-loader url-loader

   file-loader is a peer dependency of url-loader.

6. Add loaders for the fonts to your Webpack configuration:

   // webpack.config.js
   module: {
     loaders: [
       {
         test: /\.(eot|png|svg|[ot]tf|woff2?)(\?v=\d+\.\d+\.\d+)?$/,
         loader: 'url',
         query: {limit: 10000}
       }
     ]
   }

   This will put your fonts in the bundle if they're smaller than 10kb. Otherwise they'll be referenced by URL. Since the fonts will be packaged in your extension, they need a base URL of chrome.extension.getURL(''). The base URL for Webpack imports can be controlled with the output.publicPath option in your Webpack configuration, but we can't know the extension's base URL at build time because it isn't generated until the extension is added to Chrome. We can modify the base URL for Webpack imports at runtime in one way: assigning the value of __webpack_public_path__ in a separate module at the beginning of our entry's module list.

Note: it is not sufficient to assign __webpack_public_path__ in a separate file at the beginning of our extension's content_script's js list. It will be reset by our bundle's Webpack bootstrap.

7. Create a new module:

   // configure-webpack.js
   __webpack_public_path__ = chrome.extension.getURL('')

   The variable assigned must be exactly __webpack_public_path__, not window.__webpack_public_path__ or anything else.

8. Add the module to the beginning of your entry's module list:

   // webpack.config.js
   entry: ['configure-webpack', ...]

9. You might need to adjust Webpack's resolve settings so that it can find the module:

In particular, if the file configure-webpack.js sits next to webpack.config.js:

// webpack.config.js
resolve: { root: __dirname }

10. Let your content script access the fonts that exist as separate files in your extension and weren't packaged in the Webpack bundle (thanks to Aleksandr Motsjonov for pointing this out!):

// manifest.json
"web_accessible_resources": [
  "*.png",
  "*.eot",
  "*.woff",
  "*.woff2",
  "*.ttf",
  "*.svg"
]