Copydeck

A local-first Chrome Extension that saves, organizes, searches, and injects prompts directly into AI chat interfaces.

Copydeck is a privacy-focused prompt management vault built entirely in the browser. Save, search, tag, and reuse your AI prompts — then inject them directly into ChatGPT, Claude, Perplexity, and Google Gemini without leaving the active tab. All data stays local. No accounts, no servers, no tracking.

Core Features

• Save & Organize: Create prompt templates with titles, tags, color accents, and pin important prompts to the top.
• Direct DOM Injection: Inject prompts straight into the chat input of ChatGPT, Claude, Perplexity, and Google Gemini with a single click.
• Variable Template System: Define dynamic placeholders using {{variable}} syntax and fill them in at injection time.
• Fuzzy Search: Instantly find prompts across titles, tags, and body content using Fuse.js.
• Tag-Based Filtering: Filter your library by tags, or switch between All, Pinned, and Recent views.
• Floating Draggable Launcher: A snap-dock launcher button that attaches to supported chat input areas. Draggable and repositionable.
• Import / Export: Export your entire prompt library as JSON for backup, and import it on another device.
• Right-Click Context Menu: Select any text on a page and use the right-click menu to save it as a new prompt.
• Keyboard Shortcuts: Summon Copydeck with Ctrl+Shift+P, navigate with arrow keys, select with Enter, dismiss with Escape.
• Shadow DOM Isolation: The injected floating UI runs inside a Shadow DOM — styles never leak into or out of the host page.
• Local-First Architecture: All prompts, metadata, and settings live in your browser's IndexedDB. Nothing leaves your machine.
• Onboarding Wizard: First-time users are guided through a setup flow that explains core features and workflow.

---

Product Walkthrough

The Copydeck launcher button snaps cleanly onto any supported AI input area.

Browse, search, and manage your library from the slide-out panel.

Author prompts with dynamic variables, add tags, and customize colors.

Select any prompt from your library to instantly inject it at your active cursor.

---

Usage

Copydeck hooks directly into your browser workflow to store, search, and reuse prompt templates.

Basic Workflow

1. Locate the Launcher: Open any supported AI chat interface (ChatGPT, Claude, Perplexity, or Google Gemini). A purple Copydeck floating launcher icon will appear attached to the chat input area.
2. Access your Library: Click the launcher button to open the slide-out Copydeck panel.
3. Search & Filter: Type in the search bar to find prompts instantly, or filter by tabs (All, Pinned, Recent) and tags.
4. Inject: Click any prompt card to write the prompt template directly into the active chat input.

How to Create a Prompt

1. Click the New Prompt button at the bottom of the sidebar.
2. Fill in the Title and Prompt body.
   • Use {{variable_name}} inside your prompt text to define placeholder fields that you can fill in dynamically at injection time.
3. Add optional comma-separated Tags for categorization.
4. Choose a custom Color Accent to visually group or highlight the prompt card.
5. Optionally toggle Pin to top to keep this prompt pinned at the top of your list.
6. Click Save Prompt.

How to Reuse a Prompt

• When you click a prompt card containing variables (e.g., {{topic}}), Copydeck will highlight those variables inline for you to fill in.
• The completed prompt is injected directly into the host chat input.

Save via Context Menu

1. Select any text on a webpage.
2. Right-click and choose Save to Copydeck.
3. The selected text is saved as a new prompt in your library.

Note

Local-First Privacy: Copydeck does not connect to any servers. All prompts, metadata, and configuration remain inside your browser profile's local IndexedDB instance. No accounts are required, and no data leaves your machine unless you explicitly use the JSON Export feature.

---

Keyboard Shortcuts

Shortcut	Action
Ctrl+Shift+P (Cmd+Shift+P on Mac)	Open / close Copydeck popup
↑ / ↓ Arrow Keys	Navigate through prompt list
Enter	Select / inject the highlighted prompt
Escape	Close the Copydeck panel

---

Supported Platforms

Platform	URL	Injection
ChatGPT	chatgpt.com, chat.openai.com	✅ Direct DOM
Claude	claude.ai	✅ Direct DOM
Perplexity	perplexity.ai	✅ Direct DOM
Google Gemini	gemini.google.com	✅ Direct DOM

---

Tech Stack

Layer	Technology
Framework	React 18
Language	TypeScript
Styling	Tailwind CSS
Database	Dexie.js (IndexedDB wrapper)
Search	Fuse.js
Icons	Lucide React
Build Tool	Vite (multi-build: popup + content scripts)
Extension Standard	Chrome Manifest V3

Project Structure

copydeck-extension/
├── public/
│   └── icons/              # Extension icons (16, 48, 128)
├── src/
│   ├── background/
│   │   └── index.ts        # Service worker (context menus, message relay)
│   ├── components/
│   │   ├── EmptyState.tsx
│   │   ├── ErrorBoundary.tsx # Catch rendering crashes & export backup
│   │   ├── Header.tsx
│   │   ├── InlineVariables.tsx
│   │   ├── LibraryManager.tsx
│   │   ├── NewPromptForm.tsx
│   │   ├── OnboardingModal.tsx
│   │   ├── PromptCard.tsx
│   │   ├── PromptList.tsx
│   │   ├── SearchBar.tsx
│   │   ├── SettingsPanel.tsx
│   │   ├── TabSwitch.tsx
│   │   ├── TagFilter.tsx
│   │   └── Toast.tsx
│   ├── content/
│   │   ├── index.tsx       # Content script entry (Shadow DOM mount)
│   │   ├── FloatingUI.tsx  # Draggable floating panel + prompt list
│   │   ├── styles.css      # Scoped styles for Shadow DOM
│   │   ├── chatgpt.ts      # ChatGPT DOM injection logic
│   │   ├── claude.ts       # Claude DOM injection logic
│   │   ├── perplexity.ts   # Perplexity DOM injection logic
│   │   └── gemini.ts       # Google Gemini DOM injection logic
│   ├── hooks/
│   │   └── useToast.ts     # Toast notification hook
│   ├── lib/
│   │   ├── db.ts           # Dexie database schema + client helpers
│   │   ├── dbServer.ts     # Database operations for service worker
│   │   ├── search.ts       # Fuse.js search configuration
│   │   └── utils.ts        # Shared utility functions
│   ├── types/
│   │   └── index.ts        # Shared TypeScript interfaces
│   ├── App.tsx             # Main popup component
│   ├── main.tsx            # Popup entry point
│   └── index.css           # Global styles
├── docs/
│   └── images/             # Product walkthrough screenshots
├── index.html              # Popup UI HTML template
├── manifest.json           # Chrome Extension Manifest V3
├── vite.config.ts          # Vite build config (popup + background)
├── vite.content.config.ts  # Vite build config (content script isolation)
├── tailwind.config.js      # Tailwind CSS configuration
├── postcss.config.js       # PostCSS configuration
├── tsconfig.json           # TypeScript configuration
└── package.json            # Dependencies and scripts

Local Setup

1. Clone the repository
2. Install dependencies:

   npm install

Development Commands

To run the project in development mode (which opens a Vite dev server for the popup UI):

npm run dev

Build Command

To compile the extension for Chrome:

npm run build

This runs tsc, builds the popup and background scripts, and then separately builds the isolated content scripts into the dist/ directory.

How to Load the Extension in Chrome

1. Run npm run build to generate the dist/ folder.
2. Open Chrome and navigate to chrome://extensions/.
3. Enable Developer mode in the top right corner.
4. Click Load unpacked in the top left.
5. Select the dist/ folder inside the project directory.
6. The extension is now installed. You can pin it to your toolbar.

How Local Storage Works

Copydeck relies entirely on IndexedDB (via Dexie.js) to store all prompts and settings. Your data is strictly bound to your local browser profile. It also uses chrome.storage.local to temporarily persist the position of the floating UI and any pending text saved via the right-click context menu.

Known Limitations

• The floating UI injection supports ChatGPT, Claude, Perplexity, and Google Gemini. On unsupported sites, the floating UI will not appear.
• JSON exports must be manually synced if you wish to use Copydeck across multiple devices.
• Keyboard navigation (arrow keys, Enter, Escape) is scoped to the Copydeck panel when it is open.

Roadmap

• Prompt Versioning: Track edit history and easily roll back changes.
• Folder Organization: Group prompts into customizable collections.
• Local Analytics: Track most-used prompts and generate usage digests.
• Starter Templates: A library of built-in prompts that you can copy to your vault.

License

MIT License. See LICENSE for details.

Author

Built by Pranit Patil.