Debug Chrome Extensions within Visual Studio Code

Question

I'm trying to develop a Chrome extension within Visual Studio Code and I can't for the life of me figure out how to debug it properly. I can install the extension in Chrome and debug it there with Inspect popup, but I can't find the background.js or any other JavaScript files. I've installed Debugger for Chrome in Visual Studio Code although it doesn't seem to work for Chrome extensions.

Anyone have any ideas?

Answer 1

Instead of having native configuration support like Firefox does, you need to supply arguments to load the extension before running Chrome, specifically the load-extension argument.

Add this line inside your Chrome configuration object with the launch request, located on your .vscode/launch.json file. This assumes that your manifest.json file is directly on the workspace folder. If your manifest.json file is located in another folder, change the ${workspaceFolder} accordingly.

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

For example, this is how I do it on the launch.json file in my workspace.

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