chrome 72 更改了源映射行为

我正在为 Chrome 开发一个 Webextension，代码是用 Typescript 编写的，所以我需要源映射。

该扩展与 ParcelJS 捆绑在一起，但我相信我的问题与捆绑器无关。

从 Chrome 70 更新到 72 后，源映射不再起作用。作为一个最小的示例，我可以使用以下代码在 MacOS 14 和 Ubuntu 18.04、Chrome 72 上重现该问题。

这个问题似乎只存在于 Chrome 72 中。不幸的是，在撰写本文时，这是当前的稳定版本：

• 版本73.0.3683.27（官方版本）测试版（64位），没问题
• 版本71.0.3578.98（官方构建）稳定Chromium 64位，没问题
• 版本 72.0.3626.96（官方版本）（64 位），不起作用

为了方便起见，我建立了一个 github 存储库。克隆它并运行以下命令（抱歉，我不确定您是否需要全局安装包捆绑器。为了方便起见，我总是这样做）

git clone https://github.com/lhk/contentscript_smap.git
cd contentscript_smap
# npm install -g parcel-bundler 
npm install -d
parcel build manifest.json

要遵循 Stackoverflow 规则（如果您链接到代码，您还应该将其包含在您的问题中，该链接可能会在某个时候断开）：

内容.ts：

console.log('log from typescript')

清单.json：

{
    "manifest_version": 2,
    "name": "sourcemaps messed up",
    "version": "0.0.1",
    "description": "",
    "author": "",
    "content_scripts": [
        {
            "matches": [
                "<all_urls>"
            ],
            "js": [
                "./content.ts"
            ]
        }
    ],
    "permissions": [
        "activeTab",
        "<all_urls>"
    ]
}

包.json：

{
  "name": "contentscript_smap",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/lhk/contentscript_smap.git"
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/lhk/contentscript_smap/issues"
  },
  "homepage": "https://github.com/lhk/contentscript_smap#readme",
  "dependencies": {
    "parcel-bundler": "^1.11.0",
    "parcel-plugin-web-extension": "^1.5.1",
    "typescript": "^3.3.3"
  }
}

Parcel 将捆绑扩展并生成dist/文件夹，您可以从那里将其安装在 Firefox 和 Chrome 中。

Firefox 运行良好（查看源代码参考内容.TS ):

Chrome 找不到源映射：

这不仅仅是控制台简单地显示编译后的源代码而不是源映射的原始源代码。我在 Chrome 中根本找不到 typescript 代码。

对我来说，这就是解决问题的方法。

1. Change devtool : "source-map" -> "eval-source-map" in 网页包配置 with mode : "development".

2. Add "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'" in 清单.json

除此之外，还要确保您通过单击将源文件夹（不是由 webpack 生成的 dist ）与 chrome devtools 链接将文件夹添加到您的工作区 in the Chrome 开发者工具 -> 来源 -> 文件系统.

恐怕我没有足够的时间来深入研究如何解决这个问题。也许我稍后会用正确的推理来更新答案。