Chrome Extension: Not loading source-maps

Question

I am not able to load sourcemap in Chrome Extension for some reason.

The folder which is being loaded for Chrome Extension has .map just next to .js file. With the .js file having the line //# sourceMappingURL=1.9215106f1980d05d2b4c.js.map referencing the .map file path.

However, the Chrome dev-tools is not loading the maps for some reason.

I double checked the Chrome settings to make sure that the js source maps is turned on and it is working with a simple Angular project.

Also, made sure I have the following in the manifest file:

  "web_accessible_resources":[
    "*.map"
  ],

Answer 1

Attention! This code is meant for development purposes and not meant for production environments, as it makes use of eval. Mozilla does recomment not to use this.

Setting the following property in webpack.config.js worked for me:

module.exports = {
    //Configuration parameters

    devtool: 'eval-source-map',

    //Other configuration parameters
}

Edit: You'll also have to update manifest.json to allow eval:

"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"

List of devTool styles: https://webpack.js.org/configuration/devtool/#devtool

webpack.config.js explained: https://webpack.js.org/configuration/