如何在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的"如何 - 使用源地图",

您必须在文件的最后添加注释.

//# 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(),无法使用 - 无论是内联还是先前调用,结果存储到变量以便在此处访问 - 因为这是注释,注释将被忽略.

用于指定映射文件的GENIUS机制.不!

那怎么能实现呢？或者它只能被证实不起作用？还有其他技术吗？这是W3C规范工作组的一部分吗？是否已在任何地方讨论或考虑过这个问题？搜索没有产生任何相关链接.

Answer 1

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

不管怎样，你的源映射文件似乎有问题。如果您使用 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'

开发工具调试选项卡

此外，如果您将扩展程序内部 UUID 粘贴到 Firefox 地址栏中，您将获得带有源映射的扩展程序文件。例如：

moz-extension://7c26e712-c8ac-41ef-b074-500f40601ab2/