firefox-addon-webextensions - 如何在 Firefox WebExtension 中包含 JavaScript 源映射文件？

Question

尝试在 WebExtension 中使用带有源映射的库时，遇到此错误。

Source map error: TypeError: NetworkError when attempting to fetch resource.
Resource URL: moz-extension://090d55cc-e9cf-4627-9511-ce49ed5b54c8/source.js
Source Map URL: source.map

根据 MDN's How to - "Use a Source Map" ,

您必须在文件的末尾添加注释。

//# sourceMappingURL=http://example.com/path/to/your/sourcemap.map

在使用外部库的本地副本的 Firefox WebExtension 上工作时(出于安全性的建议，以及为了速度和可预测的可用性，如果库是自己编写的并且您无权访问 CDN，这可能是必要的网络，或 CDN 版本需要自定义等)，则失败。

// At the bottom of source.js
//# sourceMappingURL=source.map

因为所有扩展 URI 都存在于某个浏览器配置文件中，并且必须根据每次运行 WebExtension 时随机生成的 UUID 显式添加适当的绝对路径前缀。因此，您需要动态指定以下内容。

// At the bottom of source.js
//# sourceMappingURL=moz-extension://090d55cc-e9cf-4627-9511-ce49ed5b54c8/source.map

获取路径的唯一方法是在运行时调用 browser.runtime.getURL() , 不能使用 - 内联或先前调用并将结果存储到变量中以在此处访问 - 因为这是一个注释，并且注释被忽略。

天才指定映射文件的机制。不是!

那么如何实现呢？还是只能确认不行？有没有其他技术？这是某些 W3C 规范工作组的一部分吗？有没有在任何地方讨论或考虑过这个问题？搜索没有产生任何相关链接。

Answer 1

即使您不需要在开发过程中手动设置扩展 ID，我也建议您这样做，因为仅使用随机内部临时 UUID 无法使用某些存储 API 方法。

无论如何，您的源映射文件似乎有问题。如果你使用 webpack，这个简单的配置应该可以工作。
webpack.config.dev.js

output: {
  sourceMapFilename: '[name].map.js',
  filename: '[name].js',
  path: path.resolve(__dirname, `your_output_dir`)
},

devtool: 'cheap-module-source-map'

Devtools debugging tab

此外，如果您将扩展程序内部 UUID 粘贴到 Firefox 地址栏中，您将获得带有源映射的扩展程序文件。例如:
moz-extension://7c26e712-c8ac-41ef-b074-500f40601ab2/