google-chrome-extension - 在 Visual Studio Code 中调试 Chrome 扩展

Question

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

谁有想法？

Answer 1

不像 Firefox 那样拥有 native 配置支持，你需要在运行 Chrome 之前提供参数来加载扩展，特别是 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}"]
        }
    ]
}