我可以在 chrome 扩展中启用源映射吗？

Posted 2023-02-21

【中文标题】我可以在 chrome 扩展中启用源映射吗？

【英文标题】：Can I enable sourcemaps in a chrome extension?

【发布时间】：2021-12-13 18:48:28

【问题描述】：

我正在做一些测试开发并使用 Svelte 和 ParcelJS 创建一个 Chrome 扩展，并希望在 chrome 开发工具中查看源映射。但是，在查看任何页面时，我只能看到捆绑代码看到此错误：

DevTools 无法加载 SourceMap：无法加载 chrome-extension://debafkiakedogoflaalmbbfbbccnfbib/Background/index.js.map 的内容：HTTP 错误：状态代码 404，net::ERR_UNKNOWN_URL_SCHEME

加载器似乎不喜欢chrome-extension url 方案。我尝试将“dist”添加为覆盖目录，但无论加载源映射似乎都忽略了它 并且仍然使用“chrome-extension”方案。

我可以通过手动将 url 更改为另一个架构来使其正常工作，要么是 file:/// url，要么在 dist 目录中运行一个简单的 http 服务器并使用 http:// url：

//# sourceMappingURL=file:///c:/git/svelte-extension/dist//Background/index.js.map`
//# sourceMappingURL=http://localhost:8080/Background/index.js.map`

有没有办法让 chrome 覆盖目录或告诉 parcel 创建这些 url？

【问题讨论】：

FWIW 我在 webpack 中使用 data:application/json URL，源 URL 显示为 webpack://....

Parcel doesn't seem to support 内联源映射，但 webpack does. 他们应该完全跳过这个问题。

关于在扩展中内联源映射的注释：它解决了我的 chrome 无法加载外部映射的问题，但我的包变得更大了。当我的一个 js 包大于 4MB 时，我不得不切换回外部包，这是 Mozilla Addons 不允许的，因为它们的自动代码审查无法处理它。

【参考方案1】：

在开发过程中尝试使用内联源映射。 Chrome 不会加载 Chrome 扩展源映射文件，但内联源映射确实有效。

背景

Chrome 总是无法从 chrome-extension:// URL 方案加载源映射文件。 Chrome v80 开始报告DevTools failed to load SourceMap 错误。

这可能很快就会改变，因为有a fix in the works。一些安全问题阻碍了这一点，所以请多多关照。

这里有两个相关的 Chromium 错误跟踪：

https://bugs.chromium.org/p/chromium/issues/detail?id=1052872#c14 https://bugs.chromium.org/p/chromium/issues/detail?id=1053535

【讨论】：

我在使用 webpack 时遇到了类似的问题。我想查看我的原始代码进行调试，但不能，因为 Chrome 无法读取源映射。从devtool: "source-map" 到devtool: "inline-source-map" 为我解决了这个问题。