🧩 Coder Copilot Extensions

Developer Reference — How to create a .ccex extension

1. File Structure

A .ccex file is just a ZIP archive renamed to .ccex. It must follow this layout:

extension/
  bin/
    extension.js  ← main entry point (required)
  assets/  ← css, html, etc (optional)
  README.md  ← optional
  LICENSE.txt  ← optional
[metadata].json  ← required, at root level

Tip: The metadata file can be named anything ending in .json as long as it's at the root of the archive (not inside a folder).

2. Metadata File

The metadata JSON tells Coder Copilot about your extension.

// metadata.json
{
  "name": "my-extension",
  "author": "YourName",
  "description": "What this extension does.",
  "category": ["Utility"],
  "links": {
    "github": "https://github.com/you/repo",
    "npmjs": "https://npmjs.com/package/pkg",
    "website": "https://yoursite.com"
  }
}

Required fields

name author description category

Available categories

Utility Tool Misc MCP API IDE Other

Links (optional)

Supported platforms: github, npmjs, website. All are optional.

3. extension.js — Entry Point

This is the script Coder Copilot runs when your extension loads. It executes inside the renderer (browser) context, so you have full access to the DOM.

// extension/bin/extension.js
(function () {
  'use strict';

  function init() {
    // your code here — DOM is ready
    console.log('[my-extension] Hello!');
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }

})();

Tip: Always wrap your code in an IIFE (function(){ ... })() to avoid polluting the global scope.

4. Injecting CSS

The simplest way to restyle the app is to inject a <style> tag directly from your script. This is the most reliable method — no file path issues.

const CSS = `
  .input-shell {
    border-color: red !important;
  }
`;

const style = document.createElement('style');
style.id = 'my-extension-styles';
style.textContent = CSS;
document.head.appendChild(style);

Key selectors in Coder Copilot

/* Prompt input wrapper (border, glow) */
.input-shell { }

/* The textarea itself */
#msg-input { }

/* Send button */
#send-btn { }

/* Sidebar */
#sidebar { }

/* Chat messages area */
#messages { }

/* Top model picker bar */
#topbar { }

5. Packaging as .ccex

ZIP your files, then rename the .zip to .ccex. Make sure metadata.json is at the root of the archive.

On Windows (PowerShell)

# From inside your extension folder:
Compress-Archive -Path metadata.json, extension -DestinationPath my-extension.zip
Rename-Item my-extension.zip my-extension.ccex

On Mac / Linux

zip -r my-extension.ccex metadata.json extension/

Common mistake: Don't zip a parent folder — zip the contents directly so metadata.json is at the root, not inside a subfolder.

6. Installing & Testing

Open Coder Copilot → Extensions tab → click + → pick your .ccex file → toggle it on → restart the app.

Errors are saved to:

%APPDATA%\Coder Copilot\extension-errors.log

You can also open DevTools (Ctrl+Shift+I) and check the Console for [extensions] log lines.

Coder Copilot — Extension SDK · CodeStuff