源地图（用于浏览器扩展）在 Chrome 75、Edge 77 中对我不起作用

Question

我创建了一个用 .html 和 typescript 编写的示例浏览器扩展，它在 Chrome、Firefox 和 Edge（金丝雀）中运行良好。Typescript 编译器从 .ts 文件生成了 .js 和 .js.map 文件。

我想调试源代码，在那里我可以在打字稿代码中放置断点。我可以在 Firefox 中执行此操作，但不能在 Chrome 或 Edge 中执行。Chrome 和 Edge 注意到要添加 .map 和 .ts 文件，我只能从源加载它们，断点对我不起作用。

我读了过去的文章。

• 源地图是否适用于 Chrome 扩展？
• Chrome 扩展：不加载源映射
• https://developers.google.com/web/tools/chrome-devtools/javascript/source-maps
• https://bugs.chromium.org/p/chromium/issues/detail?id=212374
• https://developer.chrome.com/extensions/manifest/web_accessible_resources

我在 manifest.json 中尝试了不同的设置。

如果我找到方法，我可以用示例扩展名附加整个 zip。扩展中的整个文件列表是：background.html、background.js、background.js.map、background.ts、base.js、base.js.map、base.ts、content.js、content.js.map , content.ts, manifest.json, popup.html, popup.js, popup.js.map, popup.ts, readme.md, tsconfig.json, tsext16.PNG, tsext19.PNG,

完整的 manifest.json 是

{
    "manifest_version": 2,

    "name": "Typescript Sourcemaps in Browser Extensions",
    "version": "1",
    "description": "Sourcemaps with Extensions",

    "icons": {
        "16": "tsext16.png"
    },
    "permissions": [
        "activeTab"
    ],
    "browser_action": {
        "default_icon": {
            "16": "tsext16.png",
            "19": "tsext19.png"
        },
        "default_popup": "popup.html",
        "default_title": "Typescript example popup"
    },
    "background": {
        "scripts": [
            "base.js",
            "background.js"
        ]
    },
    "content_scripts": [{
        "matches": ["http://*/*", "https://*/*"],
        "js": [
            "base.js",
            "content.js"
            ]
    }],
    "web_accessible_resources": [
        "background.js.map",
        "background.ts",
        "*"
    ]
}

查看源窗格时，仅显示 .js 文件。在 .js 文件的顶部，有一条消息“检测到源映射”。但是，我不知道如何以可以使断点工作的方式加载 .ts 文件（例如 popup.ts）。如果我从“文件系统”加载它，我可以在任何 .ts 文件中标记断点，但执行不会停止，并且选项卡中显示的文件名有一个附加图标（这可能意味着“仅用于查看，未连接到调试器”）类似于“新文档”。

我可以在当前的 Firefox 67 中调试这个示例扩展。我可以将网页的源映射获取到 Chrome 中。我尝试了 Windows 10 和 Windows 7，都是 x64。

Answer 1

这可能是一个chrome 错误，我在一年前报告过，并且仍然处于开放状态。

要验证，请安装 chrome <=71并尝试调试。非常欢迎您在错误页面上与 Chrome 开发人员互动。