在Visual Studio Code中调试Chrome扩展

Question

我正在尝试在Visual Studio Code中开发Chrome扩展程序，但我终生无法找出如何正确调试它的方法。我可以在Chrome中安装扩展程序，并使用Inspect弹出窗口在其中进行调试，但是找不到background.js或其他任何JavaScript文件。我已经在Visual Studio Code中安装了适用于Chrome的调试器，尽管它似乎不适用于Chrome扩展程序。

有人有想法么？

Answer 1

您需要在运行 Chrome 之前提供参数来加载扩展，而不是像 Firefox 那样提供本机配置支持，特别是参数load-extension。

将此行添加到您的 Chrome 配置对象中，并包含启动请求（位于您的.vscode/launch.json文件中）。这假设您的manifest.json文件直接位于工作区文件夹中。如果您的manifest.json文件位于另一个文件夹中，请${workspaceFolder}相应地更改。

{
    "runtimeArgs": ["--load-extension=${workspaceFolder}"]
}

例如，这就是我对launch.json工作区中的文件执行此操作的方法。

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome",
            "url": "https://example.com",
            "runtimeArgs": ["--load-extension=${workspaceFolder}"]
        }
    ]
}