Search code examples
javascripttypescriptnpmfirefox-addon-webextensionsparceljs

Firefox: how to serve sourcemaps for web extension

I'm developing a webextension based on typescript. For debugging, I need sourcemaps, both in the background and contentscripts.

Currently, I'm using parcel to bundle my extension (but I don't think this problem is related to parcel). With the plugin for webextensions, the bundling process becomes as easy as parcel build src/manifest.json.

This also compiles typescript and creates appropriate sourcemaps. I can see the sourcemaps for contentscripts and debug with them. But on the background, the sourcemaps aren't loaded.

Firefox complains:

Source map error: TypeError: NetworkError when attempting to fetch resource.
Resource URL: moz-extension://aabd65f9-70d4-43bc-afb8-d04b6eca3602/background.js
Source Map URL: /background.map[Learn More]

So it seems to me, as if this was some problem in providing the sourcemap to the browser. I can see that it is created. It is loaded correctly for the contentscript. And I can see that the syntax for the two scripts is identical. Maybe Firefox expects a different way of hosting for the background ?

To reproduce the problem, I have set up this repository: https://github.com/lhk/webextension_typescript_webpack

  • npm install -g parcel-bundler
  • git clone https://github.com/lhk/webextension_typescript_webpack
  • git checkout parcel_branch
  • npm install
  • parcel build src/manifest.json

Then load it into Firefox and observe the debug console output. It produces the above error message.

UPDATE: I found this issue: https://github.com/webextension-toolbox/webextension-toolbox/issues/58

Apparently, Firefox can only deal with a specific set of sourcemaps, when working on webextensions. But I don't understand why the sourcemaps work for the contentscript.

Solution

  • I've already appended this as an update to my question, but actually I think it is an answer.

    There exists an issue describing just this problem on github. The final comment is still up-to-date: https://github.com/webpack/webpack/issues/1194#issuecomment-402494524

    The problem is a bug in firefox. A bug report has also already been filed with Mozilla: https://bugzilla.mozilla.org/show_bug.cgi?id=1437937