Slash commands for GitHub markdown fields. Includes /giphy GIF search and insert.

GitHub Slash Palette

• Adds slash command palette to GitHub markdown textareas
• /giphy to search and insert GIFs
• Easily extensible with new commands

See docs/commands/README.md for a full list and usage details.

• Bun (v1.0+)

bun install
bun run build

1. Build: bun install && bun run build
2. Open chrome://extensions
3. Enable Developer mode
4. Click Load unpacked
5. Select the dist folder

1. Go to GitHub
2. Open an issue or PR comment field
3. Type /giphy cats (or /gsp for command list)
4. Use arrow keys to navigate
5. Press Enter to insert
6. Press Esc to close

For development with automatic rebuilding:

bun run dev

This starts Bun in watch mode. Reload the extension in Chrome to see changes.

To check bundle sizes:

bun run analyze

This reports the size of each bundle after building.

Run Playwright E2E tests:

bun run test:e2e

src/
├── api/                # API clients (e.g., giphy.ts)
├── assets/             # Static assets (icons, images)
├── content/            # Content scripts
│   ├── commands/       # Slash command implementations
│   │   ├── giphy.ts
│   │   ├── gsp.ts
│   │   ├── index.ts
│   │   ├── registry.ts
│   │   └── registry.test.ts
│   ├── picker/         # Picker UI (supports .tsx files)
│   │   ├── picker.ts
│   │   ├── state.ts
│   │   └── styles.ts
│   ├── index.ts        # Content entry
│   └── types.ts
├── utils/              # Shared utilities
│   ├── dom.ts
│   ├── dom.test.ts
│   ├── math.ts
│   ├── math.test.ts
│   ├── storage.ts
│   ├── storage.test.ts
│   └── theme.ts
dist/                   # Build output (load in Chrome)
docs/                   # Documentation
│   └── commands/       # Per-command docs
│       ├── README.md
│       ├── giphy/README.md
│       └── gsp/README.md
e2e/                    # End-to-end tests (Playwright)
scripts/                # Build scripts
│   └── build.ts
PRIVACY.md              # Privacy policy
package.json            # Project metadata & scripts
tsconfig.json           # TypeScript config
vitest.config.ts        # Test config
playwright.config.ts    # E2E test config

1. Create a new file in src/content/commands/ and implement your command.
2. Register it in src/content/commands/registry.ts and import in src/content/index.ts.
3. Add end-user docs under docs/commands/<command>/README.md.

Example skeleton:

import { registerCommand, type CommandSpec } from "./registry.ts";

const myCommand: CommandSpec = {
  preflight: async () => ({ showSetup: false }),
  getEmptyState: async () => ({ items: [] }),
  getResults: async (query) => ({ items: [] }),
  renderItems: (items, suggestTitle) => { /* ... */ },
  renderCurrent: () => { /* ... */ },
  onSelect: (item) => { /* ... */ },
};

registerCommand("mycommand", myCommand);

1. Type /giphy
2. Paste your key in the setup panel
3. Press Test to verify
4. Press Save

1. Open chrome://extensions
2. Find GitHub Slash Palette
3. Click Details
4. Click Extension options
5. Paste the key and Save

Where is the key stored?

The key is stored using chrome.storage.local on your device only.

• Build Tool: Bun - Fast all-in-one JavaScript runtime
• UI Support: React/JSX available for components
• Testing: Vitest (unit tests) + Playwright (E2E tests)
• Language: TypeScript with JSX support
• Linting: ESLint + Prettier

See PRIVACY.md for the privacy policy.