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()，这是无法使用的 - 无论是内联还是以前调用，结果存储到变量中以便访问 - 因为这是注释和注释被忽略了。

用于指定地图文件的

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'

Devtools debugging tab

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

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

Answer 2

firefox bugtracker中已报告此问题： Bug 1437937: WebExtensions Doesn't Find Source Maps，但已经开放了一年。

当这样的基础知识被破坏时，Mozilla如何期望人们为Firefox开发？

解决方法如下：https://github.com/webpack/webpack/issues/1194#issuecomment-402494524

基本上，您必须将源地图URL更改为公开的URL（http://localhost/..。），并使该地图文件在此处可用：/

如何在Firefox WebExtension中包含JavaScript源映射文件？

2 个答案: