Example Plugin

This is a complete example plugin that demonstrates all major plugin features. The "Electrobun Demo Plugin" is included in the Colab repository at test-plugin/ as a comprehensive reference implementation.

package.json

{
  "name": "colab-electrobun-demo",
  "version": "1.0.0",
  "description": "Comprehensive demo of the Colab plugin API - powered by Electrobun!",
  "main": "index.ts",
  "keywords": ["colab-plugin"],
  "author": "Colab Team",
  "license": "MIT",
  "colab-plugin": {
    "displayName": "Electrobun Demo Plugin",
    "description": "A comprehensive demo of the Colab plugin API with bunnies and lightning bolts",
    "main": "index.ts",
    "contributes": {
      "commands": [
        { "id": "electrobun.zap", "title": "Zap! Enable Electrobun Mode" },
        { "id": "electrobun.rest", "title": "Rest - Disable Electrobun Mode" },
        { "id": "electrobun.showGitStatus", "title": "Show Git Status" },
        { "id": "electrobun.findFiles", "title": "Find TypeScript Files" },
        { "id": "electrobun.runShell", "title": "Run Shell Command Demo" },
        { "id": "electrobun.openDocs", "title": "Open Electrobun Docs" }
      ],
      "webviewHooks": ["onLoad"]
    },
    "entitlements": {
      "filesystem": { "read": true, "write": true },
      "network": { "internet": true, "domains": ["electrobun.dev"] },
      "process": { "spawn": true },
      "webview": { "scriptInjection": true },
      "terminal": { "commands": true },
      "ui": { "statusBar": true, "contextMenu": true, "fileDecorations": true, "notifications": true },
      "editor": { "completions": true },
      "keybindings": { "global": true }
    },
    "activationEvents": ["*"]
  }
}

index.ts

The full implementation is in the test-plugin/index.ts file in the Colab repository. Here's the basic structure:

import type { PluginAPI, Disposable } from 'colab/src/main/plugins/types';

const disposables: Disposable[] = [];

export async function activate(api: PluginAPI): Promise<void> {
  // Register features and push disposables to the array
  disposables.push(api.commands.registerCommand('myPlugin.command', handler));
  disposables.push(api.terminal.registerCommand('mycmd', terminalHandler));
  // ... see test-plugin/index.ts for complete examples
}

export async function deactivate(): Promise<void> {
  disposables.forEach(d => d.dispose());
  disposables.length = 0;
}

See the API Reference for documentation on each API, and browse the full test-plugin/ source code for working examples of every feature.

Features Demonstrated

1. Webview Preload Scripts - Injects JavaScript that adds an Electrobun badge to web pages
2. Commands - electrobun.zap, electrobun.rest, electrobun.showGitStatus, and more
3. Terminal Commands - Type zap, bunny, or paths in any terminal
4. Code Completions - Type console. in JS/TS files for electrobun-themed snippets
5. Status Bar Item - Shows "Electrobun" status with periodic updates
6. File Decorations - TypeScript files show ⚡, JavaScript files show 🐰, .bunny files show ⚡🐰
7. Context Menu - Right-click to "Electrify this file" or "Create .bunny file"
8. Keyboard Shortcuts - Cmd+Shift+Z triggers the zap command
9. Settings Panel - Configure auto-zap, default zap count, status bar color, and more
10. Custom Slates - Open any .bunny file to see a custom viewer with embedded terminal
11. Persistent State - Tracks activation count and last load time across sessions
12. Git Integration - Shows current branch via the "Show Git Status" command
13. Event Subscriptions - Logs file changes and active editor switches

Running the Example

The test plugin is located in the Colab repository at test-plugin/. To install it:

1. Open Colab
2. Click "Plugins" in the status bar
3. Click "Install from folder"
4. Navigate to and select the test-plugin folder
5. The plugin will be installed and activated automatically

Testing the Features

• Webview: Open a web browser tab - an ⚡🐰 badge appears in the corner
• Terminal: Type zap, bunny, or paths
• Editor: Create a .ts file and type console.
• Status Bar: Look for "⚡🐰 Electrobun" on the right side
• File Tree: TypeScript files show ⚡, JavaScript files show 🐰
• Context Menu: Right-click a file for "Electrify" or "Create .bunny file"
• Keyboard: Press Cmd+Shift+Z anywhere to zap
• Settings: Click on the status bar item to open settings
• Custom Slate: Create a .bunny file and open it to see the custom viewer