Do source maps work for Chrome extensions?

Question

I'm using the Closure compiler to create a Chrome extension and I'd like to get source maps to work for debugging. I can get source maps to work just fine by pointing the browser directly to a page in my source tree with the special sourceMappingURL added to the end of the compiled javascript file (everything is in a single directory):

debugger;document.getElementById("hello").innerHTML="Hello, world!";
//@ sourceMappingURL=background-compiled.map

But when I access the same script as an extension, I can only see the compiled javascript and not the original source. I do have the Chrome debugger configured to enable source maps in both cases, and otherwise they both execute identically with no errors. Do source maps just not work in extensions or is there something I'm missing in setting things up?

I've tried Chrome 25 stable and Chrome 27 canary, same behavior in both.

Answer 1

I had the same problem and after switching to inline source maps, everything worked fine.

The reason is, that chrome extension only support inline source mpas

so, when you use webpack, just add

devtool: "inline-source-map"

There are a range of options possible, see the table in webpack documentation here.

Answer 2

I know I'm incredibly late to the party, but Chrome DOES allow source maps. The problem you may be having is that it refuses to load the maps by default. This can be fixed by adding the map to the web_accessible_resources in your manifest.json file.