chrome 72更改了源地图的行为

Question

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

该扩展程序与ParcelJS捆绑在一起，但我认为我的问题与捆绑器无关。

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

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

• 73.0.3683.27版（官方内部版本）beta（64位），没问题
• 版本71.0.3578.98（Official Build）稳定的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规则（如果您链接到代码，则还应该在问题中包含它，该链接有时可能会断开）：

content.ts：

console.log('log from typescript')

manifest.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>"
    ]
}

package.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中找到打字稿代码。

Answer 1

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

1. 在webpack配置 devtool : "source-map" -> "eval-source-map" 更改为mode : "development" 。

2. 在manifest.json中添加"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"

除此之外，还要确保您通过在Chrome Devtools-> Sources-> FileSystem中单击将文件夹添加到工作区中来将您的源文件夹（不是由webpack生成的dist）链接到chrome devtools。

恐怕我没有足够的时间去研究如何解决此问题。 也许以后我会通过适当的推理来更新答案。

Answer 2

Firefox有一个类似的问题：无法在弹出脚本和后台脚本中加载源地图。 甚至在docs中也提到过，一种解决方法是将您的源地图托管在本地网络服务器上。

因此，我对此进行了试验，发现它可以解决Chrome的问题。 希望您可以按照以下步骤重现它：

• 安装本地https服务器，例如local-web-server ： npm install local-web-server
• 配置系统以信任该服务器的证书： https : //github.com/lwsjs/local-web-server/wiki/How-to-get-the-%22green-padlock%22-using-the-built-证明中
• 编辑扩展清单以信任本地服务器： "content_security_policy": "script-src 'self' https://127.0.0.1:8000/; object-src 'self'" : "content_security_policy": "script-src 'self' https://127.0.0.1:8000/; object-src 'self'" : "content_security_policy": "script-src 'self' https://127.0.0.1:8000/; object-src 'self'"
• 设置扩展中到本地主机的路径，可以使用parcel进行操作： parcel build src/manifest.json --public-url=https://127.0.0.1:8000/
• cd dist/和ws -https设置本地服务器

现在，将扩展程序重新加载到Chrome中，它可以正常工作（至少对我而言）。