3

I'm developing a webextension for Chrome. The code is written in typescript and then bundled with parcel.

The generated output looks correct to me, but chrome is unable to load the sourcemaps for a contentscript written in typescript. To let you reproduce the issue, I have set up this minimal sample: https://github.com/lhk/chrome_ts_sourcemaps

git clone https://github.com/lhk/chrome_ts_sourcemaps
cd chrome_ts_sourcemaps
npm install
parcel build src/manifest.json

This creates a dist/ folder which can be loaded as an extension into chrome. As you can see, the generated code contains sourcemaps:

console.log("I'm the contentscript");
},{}]},{},["rrAT"], null)
//# sourceMappingURL=/index.map

My example contains two scripts: A contentscript and a script included in the popup.html of a browseraction. They both print something to the console, which makes it easy to find them in chrome:

popup log

contentscript log

The console.log from the popup is already recognized as popup.ts:1. Chrome knows that this was a typescript file.

But the contentscript is not mapped to its original source. How can I make chrome use the sourcemap ?

lhk
  • 27,458
  • 30
  • 122
  • 201
  • As @Ihk mentioned in [his answer](https://stackoverflow.com/a/53096933/309031), the issue is not in Chrome. Chrome supports an extension source maps out of the box: https://stackoverflow.com/a/62142425/309031 – Nik Sumeiko Jun 02 '20 at 07:21

1 Answers1

1

The problem are the sourcemap paths. The leading / is incorrect for files within folders. These files need either their full path, including the parent folder, or just their name, without a slash.

For someone also using parcel, the correct behaviour can be switched on with an additional option:

--public-url ./

The related issue is: https://github.com/parcel-bundler/parcel/issues/2209

lhk
  • 27,458
  • 30
  • 122
  • 201