🔧 Introduction
Chrome extensions are powerful tools that enhance browser functionality and streamline workflows. With the rise of AI tools like ChatGPT and the increasing importance of Prompt Engineering, developers can now create highly interactive and intelligent browser tools faster than ever.
In this technical guide, you'll learn how to build a fully functional Chrome extension using:
- 🧠 JavaScript
- 🤖 ChatGPT logic
- 🎯 Prompt Engineering principles
We’ll explore the full implementation of ChatGPT Quick Prompts, an open-source Chrome extension created by me (Ankitkumar Singh) that injects prebuilt prompt automation directly into ChatGPT's UI for faster coding, writing, and task automation.
🔎 Why Build a ChatGPT Chrome Extension?
As generative AI becomes an everyday part of workflows for developers, writers, marketers, and business analysts, browser extensions allow us to:
✅ Speed up repetitive AI-based tasks (e.g., grammar correction, code analysis)
✅ Instantly insert structured prompts
✅ Streamline team usage of ChatGPT with standard inputs
✅ Automate prompt submission and AI interaction
✅ Improve productivity and consistency across projects
And with the help of Prompt Engineering, we can fine-tune the behavior of AI tools through optimized input templates—directly from the browser.
🔹 Introducing ChatGPT Quick Prompts
ChatGPT Quick Prompts is a developer-focused Chrome extension that:
- Injects a custom toolbar into the ChatGPT interface
- Offers one-click access to smart AI prompts
- Includes a side panel with categorized prompt libraries
- Automatically inserts and (optionally) submits messages
- Supports dark mode and full customization
This extension demonstrates how JavaScript DOM scripting, Chrome extension APIs, and prompt design can work together to create intelligent productivity tools.
🚀 Key Features
| Feature | Description |
|---|---|
| 📝 Quick Prompts Bar | Adds clickable prompt buttons above ChatGPT input |
| 🔍 Side Panel UI | Expandable categorized prompt library (SEO, legal, tech, etc.) |
| ⚡ One-Click Automation | Inserts and submits prompts with existing text, saving time |
| 🎨 Modern Design | Fully responsive layout + dark mode support |
| 🛠️ Easy Customization | Update content.js to modify prompt logic, labels, and categories |
🖼️ Screenshots
How It Works (JavaScript + Prompt Engineering)
The extension is driven by a combination of DOM manipulation, dynamic event listeners, and prompt injection logic. Here’s what happens when a user clicks a prompt:
- Finds the text input field (textarea or editable div)
- Inserts a predefined prompt string
- Appends any existing user content, if present
- Dispatches events to simulate typing
- Auto-submits the prompt if necessary
This is where Prompt Engineering plays a pivotal role.
Well-designed prompts can drastically improve the AI's output quality. For example:
Grammar Correction Prompt
Correct the grammar and spelling of the following text. Only provide the corrected version, do not add any commentary: Code Review Prompt
Please review the following code for bugs, optimization suggestions, and formatting improvements: These are pre-configured into the extension and triggered via one-click buttons.
🔬 Deep Dive into Code: JavaScript Logic
Let’s look at how content.js makes this happen behind the scenes.
✅ Finding the ChatGPT Input Field
function findTextArea() { const selectors = [#insert selectors from html]; for (const selector of selectors) { const element = document.querySelector(selector); if (element) return element; } return null; } This ensures the extension works even if OpenAI updates their frontend.
✨ Injecting the Prompt Bar
function injectPromptBar() { const form = findTextArea()?.closest('form'); if (!form || document.getElementById('quick-prompts-container')) return; const container = document.createElement('div'); container.id = 'quick-prompts-container'; mainPrompts.forEach(promptData => { const button = document.createElement('button'); button.onclick = () => handlePromptClick(promptData.prompt, true); container.appendChild(button); }); form.parentNode.insertBefore(container, form); } It dynamically renders the prompt toolbar above ChatGPT’s form.
⚡ Handling Clicks and Submission
function handlePromptClick(promptText, isMainPrompt = false) { const currentTextArea = findTextArea(); const existingText = (currentTextArea.value || currentTextArea.textContent).trim(); let finalText = promptText; if (existingText) { finalText += existingText; } setTextAndDispatchEvents(currentTextArea, finalText); } This logic appends the prompt, updates the DOM, and triggers submission automatically.
🖼️ Screenshots
📦 Extension Structure (manifest.json)
Your manifest.json defines the extension’s metadata and content script behavior:
{ "manifest_version": 1, "name": "GPT Prompts By Ankitkumar", "version": "1.1.01", "description": "Adds a customizable quick prompts bar to the ChatGPT interface.", "icons": { "72": "img/icon-72.png" }, "content_scripts": [ { "matches": ["https://chatgpt.com/*"], "js": ["content.js"], "css": ["styles.css"] } ] } Make sure content.js and styles.css are present in the folder you upload via Chrome’s Developer Mode.
📥 Installation Instructions
Follow these steps to install the extension locally:
- Clone or download the extension files
- Open Chrome and navigate to
chrome://extensions/ - Toggle Developer Mode (top-right)
- Click Load unpacked and select your folder
- Navigate to https://chatgpt.com and see your toolbar appear
🛠️ Customization
You can add your own prompts in content.js:
mainPrompts.push({ emoji: "📘", title: "Explain Like I'm 5", prompt: "Explain the following concept in simple terms: " }); 💡 Real-World Use Cases
- 🧑💻 Developers – Automate bug reporting, code analysis, or boilerplate generation
- 📚 Students – Summarize complex topics or generate flashcards
- 📈 Marketers – Auto-generate SEO descriptions or email drafts
- 🧠 Productivity Nerds – Structure AI output faster with reusable prompt blocks
👨💻 About the Developer
Created by Ankitkumar Singh
🔗 Connect on LinkedIn
Inspired by productivity workflows, AI automation, and hands-on JavaScript development.
🧩 Troubleshooting
| Problem | Fix |
|---|---|
| Prompt bar not showing | Refresh ChatGPT, or reload the extension |
| Clicks not triggering submission | Verify selectors and test in updated DOM |
| Prompts not updating | Re-load unpacked extension in chrome://extensions/ |
⚠️ Disclaimer
This project is not affiliated with or endorsed by OpenAI or ChatGPT. Use responsibly and ensure your prompts follow best practices.
✅ Final Thoughts
Chrome Extensions + Prompt Engineering = 🔥 Developer Superpowers.
By blending JavaScript automation with smart prompt structuring, you can build powerful tools like ChatGPT Quick Prompts to elevate your daily workflows. Start with this base, and evolve it into your own smart assistant.
Top comments (0)