Firefox：如何为 Web 扩展提供源地图答案

【问题标题】：Firefox: how to serve sourcemaps for web extensionFirefox：如何为 Web 扩展提供源地图
【发布时间】：2019-03-04 06:36:43
【问题描述】：

我正在开发一个基于打字稿的网络扩展。为了调试，我需要后台和内容脚本中的源映射。

目前，我正在使用parcel 来捆绑我的扩展程序（但我认为这个问题与包裹无关）。使用plugin 用于网络扩展，捆绑过程变得像parcel build src/manifest.json 一样简单。

这也编译打字稿并创建适当的源映射。我可以看到内容脚本的源映射并使用它们进行调试。但在后台，不会加载源地图。

Firefox 抱怨：

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]

所以在我看来，好像这是向浏览器提供源映射的一些问题。我可以看到它已创建。它已为 contentscript 正确加载。我可以看到这两个脚本的语法是相同的。也许 Firefox 期望以不同的方式托管后台？

为了重现问题，我设置了这个存储库：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

然后将其加载到 Firefox 中并观察调试控制台输出。它会产生上述错误消息。

更新： 我发现了这个问题：https://github.com/webextension-toolbox/webextension-toolbox/issues/58

显然，Firefox 在处理 webextensions 时只能处理一组特定的源映射。但我不明白为什么源地图适用于内容脚本。

【问题讨论】：

标签： javascript typescript npm firefox-addon-webextensions parceljs

【解决方案1】：

我已经将此作为我的问题的更新，但实际上我认为这是一个答案。

在 github 上存在一个描述这个问题的问题。最终评论仍然是最新的：https://github.com/webpack/webpack/issues/1194#issuecomment-402494524

问题是 Firefox 中的一个错误。一个错误报告也已经提交给 Mozilla：https://bugzilla.mozilla.org/show_bug.cgi?id=1437937

【讨论】：