Can I enable sourcemaps in a chrome extension?

Question

I'm doing some test development and creating a Chrome extension using Svelte and ParcelJS and would like to see the sourcemaps in chrome dev tools. When looking at any page however I can only see the bundled code see this error:

DevTools failed to load SourceMap: Could not load content for chrome-extension://debafkiakedogoflaalmbbfbbccnfbib/Background/index.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME

It seems the loader does not like the chrome-extension url scheme. I've tried adding 'dist' as an override directory, but whatever loads the sourcemaps seems to ignore it and still uses the 'chrome-extension` scheme.

I am able to get it working by manually changing the url to another schema, either a file:/// url or running a simple http server in the dist directory and using an http:// url:

//# sourceMappingURL=file:///c:/git/svelte-extension/dist//Background/index.js.map`
//# sourceMappingURL=http://localhost:8080/Background/index.js.map`

Is there a way to either get chrome to override the directory or tell parcel to create those urls?

Histaminase

FWIW I'm using data:application/json URLs in webpack and source URLs show up as webpack://.... – Stott

Parcel doesn't seem to support inline source maps, but webpack does. They should skip the issue altogether. – Jordain

A note on inlining source maps in extensions: It solved my problem with chrome not being able to load external ones, but my bundles became much larger. I had to switch back to external ones when one of my js bundles became larger than 4MB which is not allowed by Mozilla Addons on grounds of their automatic code review is not able to process it. – Wiburg

Answer 1

Try using inline sourcemaps during development. Chrome won't load Chrome extension sourcemap files, but inline sourcemaps do work.

Background

Chrome has always silently failed to load sourcemap files from the chrome-extension:// URL scheme. Chrome v80 started reporting the DevTools failed to load SourceMap error.

This may change soon, as there is a fix in the works. Some security concerns are holding this back, so keep your fingers crossed.

Here are two relevant Chromium bugs tracking this:

1. https://bugs.chromium.org/p/chromium/issues/detail?id=1052872#c14
2. https://bugs.chromium.org/p/chromium/issues/detail?id=1053535

Modillion

I was having a similar issue working with webpack. I wanted to see my original code for debugging, but couldn't because Chrome couldn't read the source map. Going from devtool: "source-map" to devtool: "inline-source-map" resolved the issue for me. – Traditionalism

this no longer works in manifest v3. mv3 blocks eval so inline source maps no longer work – Mccartney

@Mccartney Are you sure that error is caused by this? Because I just tested as ppt suggested and it worked fine here. – Alrick