webpack.DefinePlugin usage

[ilan-toluna]

Hi
I would like to inject global js variables into the extension.

So i edit webextension-toolbox-config.js like so:

module.exports = {
webpack: (config, { dev, vendor }) => {
config.plugins.push( new webpack.DefinePlugin({ GLOBAL_VAR: "value" }) );
return config;
}
}

However, GLOBAL_VAR is not defined in background context nor in popup

How can we achieve this using the toolbox?

[HaNdTriX]

Hey @ilan-toluna

First of all you have a little error in your code above. You need to JSON.stringify the value (More Info).

Here is the correct configuration:

const webpack = require('webpack')

module.exports = {
  webpack: (config, { dev, vendor }) => {
    config.plugins.push(new webpack.DefinePlugin({
      GLOBAL_VAR: JSON.stringify('value') 
    }))
    return config
  }
}

In addition to that please keep in mind that webpack replaces any occurrence of the keyword GLOBAL_VAR in your code. It won't define the variable for you. In other words: The keyword GLOBAL_VAR must be present at build time.