Currently in the process of developing a web extension using TypeScript, I have encountered an issue with sourcemaps not loading properly. The use of parcel to bundle my extension has made the bundling process simple and straightforward. However, while the sourcemaps for contentscripts are functioning correctly and can be used for debugging, the same cannot be said for the background scripts.
Upon attempting to debug in Firefox, I received an error message regarding the failure to fetch the resource when trying to load the sourcemap for the background script. This led me to believe that there may be a problem with how the sourcemaps are being provided to the browser. Even though the syntax for both scripts is identical, it appears that Firefox might require a different method of hosting for the background script.
To showcase this issue, I have created a repository which can be accessed at https://github.com/lhk/webextension_typescript_webpack. Following the outlined steps, you can reproduce the problem and observe the error message in the debug console output.
npm install -g parcel-bundlergit clone https://github.com/lhk/webextension_typescript_webpackgit checkout parcel_branchnpm installparcel build src/manifest.json
UPDATE: During my investigation, I came across an issue on GitHub related to Firefox's handling of certain types of sourcemaps within web extensions. It seems that Firefox has specific requirements for sourcemaps, which may explain why they work for contentscripts but not for background scripts.