Add icon to trigger an extension

Hey there… I am trying to add an icon to fire an extension from the editor top bar and wrote the following code in the extension’s contribution.ts file:

class CRnLTabBarToolbarItem implements TabBarToolbarItem {
  id: string;
  command: string;
  priority?: number | undefined;
  group?: string | undefined;
  tooltip?: string | undefined;
  icon?: string | (() => string) | undefined;
  when?: string | undefined;

  constructor() { = "crnl-button";
    this.command =; = "navigation";
    this.tooltip = "Compile and run";
    this.icon = "fa fa-play";
    this.when = "editorLangId == python";

Then I wrote the following code in the frontend-module.ts file bind(TabBarToolbarContribution).to(LighthouseTabBarToolbarContribution); to bind it to the extension and while the icon shows up, it show up everywhere, at the top of the editor like so:


At the top of the terminal like so:


And at the top of the side pane file explorer like so:


How can I only make it appear on top the editor just like some of the vscode extensions, for example, the python extension that creates the following icon at the top of the editor only:


You have to play with the isEnabled and isVisible methods of the command that your toolbar contribution wraps. Here is an example for the Output view:

The trick is hidden in the this.withWidget method. Take a look. I hope this helps!

I am afraid I don’t quite get it, can I get a bit more explanation?

Because I did is just make a new class that implements TabBarToolbarItem and then just added a binding as follows: bind(TabBarToolbarContribution).to(LighthouseTabBarToolbarContribution)

This command is registered somewhere with a handler. The handler for this command has two functions: isEnabled and isVisible. Both functions are optional. When it’s not defined, it is inferred to be true. You have to look into these two functions, in particular the isVisible. Compare your command handler with the example from the Output view.

Alternatively, you can come up with a reproducible example in a public repo, and the community can help with the code.

Thanks… I’ll look into it to see if I can make it work :slight_smile:

So I was able to fix the issue by essentially removing a mistake I had done myself. The issue was occurring as I bound two icons to one widget, essentially writing two classes and then using that to bind different commands. The moment I removed the additional icon, the primary icon now show only on top of the editor as intended.