Creating a VSCode extension for all other extensions

Earlier this week, I wanted to a couple of action buttons to the Visual Studio Code sidebar. To do this, you will need to register a button for the activity bar and create a view panel to show your sidebar actions.

As this extension would only have two to three actions, it would be a bit overkill, but the use case was still there. A button makes it easier than searching the command in the command palette. This use case made me wonder, can I create an extension that another extension can use to share or enhance their experience.

I wanted to make it easier for extensions to add their actions to a side panel without too much overhead. With this idea in mind, I started developing.

The extension

The extension I created is the Extension panel, and it offers a sidebar view panel which allows other extensions to link their actions to it.

The communication flow

As extensions run in their context, I needed to find a simple way to make it possible to share the configuration between them.

The trick here is to use a VSCode command. The extension panel code, will try to execute the <publisher>.<your-extension-name>.panel.registration command. To register your extension, all you need to do is specify this command with a configuration like this:

context.subscriptions.push(vscode.commands.registerCommand('<publisher>.<your-extension-name>.panel.registration', () => {
        return {
            id: '<your-extension-name>',
            title: 'Extension actions',
            description: 'Actions for testing purposes only.',
            actions: [{
                title: 'Action 1',
                command: 'vscode-extension-panel.panel.test',
                data: true,
                type: "checkbox"
            }, {
                title: 'Action 2',
                command: 'vscode-extension-panel.panel.test',
                data: 'Just extra text',
                type: "button"
            }]
        };
    })
);

When the extension panel's code executes the registration command, it will retrieve the specified configuration and show the defined actions.

When there is no registration command present, it will fail internally and skip the extension.

If you are an extension developer for Visual Studio Code, add your actions without writing a whole new sidebar panel. I recommend you to give the Extension Panel a try.

PS: If you would use the extension, please submit a PR to add your extension to the README.