Slash commands for GitHub markdown fields. Includes GIF search, emoji picker, Mermaid diagrams, and more.

GitHub Slash Palette

Try the extension without installing it. All deployments (main + PR previews): Deployments Index

• Adds slash command palette to GitHub markdown textareas
• Type // to see all available commands
• //giphy to search and insert GIFs
• //emoji to search and insert emojis
• //font to style text with sizes, colors, and formatting
• //kbd to format keyboard shortcuts
• //link to insert markdown links with auto-generated titles
• //link ci to link to CI jobs and artifacts (requires GitHub token)
• //mention for context-aware participant mentions
• //mermaid to insert diagram templates
• //now to insert formatted timestamps
• Uses // prefix to avoid conflicts with GitHub's native / commands
• 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 just // for command list)
4. Use arrow keys to navigate
5. Press Enter to insert
6. Press Esc to close

Note: We use // (double slash) to avoid conflicts with GitHub's native / commands like /code, /table, etc.

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/
├── assets/             # Static assets (icons, images)
├── content/            # Content scripts
│   ├── commands/       # Slash command implementations
│   │   ├── <command>/  # Each command in its own folder
│   │   │   ├── api.ts       # Data layer (API calls, storage)
│   │   │   ├── api.test.ts  # API tests
│   │   │   ├── command.ts   # CommandSpec implementation
│   │   │   ├── command.test.ts
│   │   │   └── index.ts     # Barrel exports
│   │   ├── grid-handlers.ts # Shared grid rendering handlers
│   │   ├── registry.ts      # Command registry
│   │   └── index.ts         # Command exports
│   ├── picker/         # Picker UI (React components)
│   │   ├── components/ # React UI components
│   │   ├── state.ts    # Global picker state
│   │   └── styles.ts   # Shared styles
│   ├── index.ts        # Content entry
│   └── types.ts        # Shared types
├── options/            # Options page
│   ├── components/     # React options components
│   └── github/         # GitHub API options
├── utils/              # Shared utilities
│   ├── dom.ts          # DOM manipulation
│   ├── filter-sort.ts  # Generic filtering/sorting
│   ├── math.ts         # Math utilities
│   ├── storage.ts      # Chrome storage wrapper
│   ├── svg.ts          # SVG utilities
│   ├── theme.ts        # Theme detection
│   └── tile-builder.ts # SVG tile generation
dist/                   # Build output (load in Chrome)
docs/commands/          # Per-command documentation
e2e/                    # End-to-end tests (Playwright)
scripts/                # Build scripts

1. Create a new folder src/content/commands/<command>/ with:
   • api.ts - Data layer (API calls, storage)
   • command.ts - CommandSpec implementation
   • index.ts - Barrel exports
2. Export the command from src/content/commands/index.ts.
3. Add end-user docs under docs/commands/<command>/README.md.

Example skeleton:

import { registerCommand, type CommandSpec } from "../registry.ts"
import { createGridHandlers } from "../grid-handlers.ts"
import { insertTextAtCursor } from "../../picker/index.ts"
import type { PickerItem } from "../../types.ts"

type MyItem = { id: string; label: string }

const myCommand: CommandSpec = {
  preflight: async () => ({ showSetup: false }),
  getEmptyState: async () => ({ items: [], suggest: [] }),
  getResults: async (query) => ({ items: [] }),
  ...createGridHandlers<MyItem>((item) => insertTextAtCursor(item.label)),
}

registerCommand("mycommand", myCommand)

Some features require a GitHub Personal Access Token (PAT):

• //link ci - Link to CI jobs and artifacts

1. Type //link ci or click the settings gear
2. Find GitHub Token section
3. Paste your token and click Save

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

Token requirements:

• Create a Personal Access Token
• For public repos: public_repo scope
• For private repos: repo scope

Where is the token stored?

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

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

A GitHub Actions workflow is available for publishing releases to the Chrome Web Store using Google's official Chrome Web Store API.

1. Go to Actions → Publish to Chrome Web Store
2. Click Run workflow
3. Enter the version to publish (e.g., 0.0.4)
4. Click Run workflow

The workflow:

1. Downloads the release artifact from GitHub Releases
2. Authenticates with Google OAuth2
3. Uploads the extension using the official Chrome Web Store API
4. Publishes the extension for review

Configure these secrets in repository settings (Settings → Secrets and variables → Actions):

1. Go to Google Cloud Console
2. Create a project (or select existing)
3. Enable the Chrome Web Store API
4. Create OAuth 2.0 credentials (Web application type) with redirect URI https://developers.google.com/oauthplayground
5. Use the OAuth Playground to obtain a refresh token with scope https://www.googleapis.com/auth/chromewebstore

For detailed instructions, see the Chrome Web Store API documentation.

See PRIVACY.md for the privacy policy.

See LICENSE.