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

Beyer

hi there, did you find out how to load source maps? – Mcgrath

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/

Churchly

it didn't work for me. Moreover, extensions can't use 'eval' according to: developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/… – Celenacelene

ok found the solution, you have to add "content_security_policy" to manifest, I'll edit the answer – Celenacelene

bArmageddon Thanks for the hint. I forgot about that. – Churchly

This may no longer work in manifest v3 since it is not possible to include unsafe-eval – Kiesha