- The Artificial Newsletter
- Posts
- ✉️ How to Build Your Own Prompt Manager (and Save 5 Hours Every Week)
✉️ How to Build Your Own Prompt Manager (and Save 5 Hours Every Week)
— Issue #6 of The Artificial Newsletter
Sankalp Srivastava
April 30, 2025
🧠 Why I Built a Prompt Manager
If you use AI daily — emails, resumes, brainstorming, research —
you know one thing:
"The faster you can access your best prompts, the faster you can win."
✅ No more retyping.
✅ No more searching old chats.
So I built my own Prompt Manager, and then made it even better:
I turned it into a personal Chrome Extension!
Today, you’ll learn how you can too.
🛠️ What I Built
✅ A simple web app to:
Save my best prompts
Organize by category (Emails, Writing, Resume)
Copy any prompt instantly
✅ Then turned it into:
A Chrome Extension I can access anytime without opening files manually!
📚 The 5 Files You’ll Create (Names Must Match)
File Name | Purpose |
|---|---|
| Structure: Textboxes, Buttons, Display |
| Style: Clean layout, colors |
| Logic: Save, retrieve, copy prompts |
| Tells Chrome how to load your extension |
| Icon for your extension (your choice!). icon128.png will be added in a folder named icons and it can be any pic of your choice |
✅ Keep all these files inside one main folder.
✅ Folder structure matters — Chrome requires it to recognize your app!
🖼️ Visualize It Like This:
📄 popup.html --> Structure (Textbox, Button, Display)
🎨 styles.css --> Look & Feel (Colors, Padding)
⚙️ popup.js --> Save, Copy, Show Prompts 🧩 manifest.json --> The "instruction manual" for Chrome
🖼 icon128.png --> Extension Icon (your choice!)
START BUILDING THE FILES: simple edit the files created above in a text editor, copy the code below and paste it in the file, save!!
popup.html (The Structure)
<!DOCTYPE html>
<html>
<head>
<title>Prompt Pocket</title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>Prompt Pocket</h1>
<input id="title" placeholder="Title" />
<textarea id="prompt" placeholder="Write your prompt..."></textarea>
<button id="save">Save Prompt</button>
<ul id="prompt-list"></ul>
<script src="popup.js"></script>
</body>
</html>3. styles.css (The Styling)
body {
font-family: Arial, sans-serif;
padding: 10px;
width: 300px;
}
input, textarea {
width: 100%;
margin-bottom: 5px;
}
button {
margin-right: 5px;
margin-top: 5px;
}
ul {
list-style: none;
padding: 0;
}
li {
border: 1px solid #ddd;
padding: 5px;
margin-bottom: 5px;
}4. popup.js (The Logic)
document.addEventListener('DOMContentLoaded', function () {
const titleInput = document.getElementById('title');
const promptInput = document.getElementById('prompt');
const saveButton = document.getElementById('save');
const list = document.getElementById('prompt-list');
saveButton.addEventListener('click', async () => {
const title = titleInput.value.trim();
const prompt = promptInput.value.trim();
if (!title || !prompt) return;
const stored = await chrome.storage.local.get('prompts');
const prompts = stored.prompts || [];
prompts.push({ title, prompt });
await chrome.storage.local.set({ prompts });
titleInput.value = '';
promptInput.value = '';
renderPrompts();
});
async function renderPrompts() {
const stored = await chrome.storage.local.get('prompts');const prompts = stored.prompts || [];
list.innerHTML = '';
prompts.forEach(({ title, prompt }, index) => {
const li = document.createElement('li');
li.innerHTML = `
<strong>${title}</strong>
<div style="margin-top: 4px;">
<button class="copy" data-index="${index}">Copy</button>
<button class="delete" data-index="${index}">Delete</button>
</div>
<small>${prompt}</small>
`;
list.appendChild(li);
});
document.querySelectorAll('.copy').forEach(btn => {
btn.addEventListener('click', async (e) => {
const idx = e.target.getAttribute('data-index');
const stored = await chrome.storage.local.get('prompts');
const prompts = stored.prompts || [];
await navigator.clipboard.writeText(prompts[idx].prompt);
alert('Prompt copied!');
});
});
document.querySelectorAll('.delete').forEach(btn => {
btn.addEventListener('click', async (e) => {
const idx = e.target.getAttribute('data-index');
const stored = await chrome.storage.local.get('prompts');
const prompts = stored.prompts || [];
prompts.splice(idx, 1);
await chrome.storage.local.set({ prompts });
renderPrompts();
});
});
}
renderPrompts();
});🛠️ What Your manifest.json Will Look Like
{
"manifest_version": 3,
"name": "Prompt Pocket",
"version": "1.0",
"description": "Save and reuse your favorite ChatGPT prompts.",
"permissions": ["storage"],
"action": {
"default_popup": "popup.html",
"default_icon": "icons/icon128.png"
}
}
✅ manifest.json is critical.
✅ It connects your HTML+JS+CSS into something Chrome can load.
📥 Quick Steps to Add It As a Chrome Extension
Open Chrome → Go to
chrome://extensions/Turn ON Developer Mode (top right)
Click Load Unpacked
Select your Prompt Manager folder
Done! Your personal Prompt Manager appears as an Extension 🎉
✅ Now one-click access to all your prompts!
🎯 Why This Saves Me 5+ Hours Every Week
My best prompts are organized by category
1-click copy whenever needed
No re-typing, no rethinking
AI becomes faster, sharper, more useful for me
One small tool → Massive daily efficiency boost.
🧩 Final Tip
For your icon128.png, pick any fun clean image:
A clipboard (📋)
A magic wand (✨)
Your own logo (if you want branding)
👋 Next up in The Artificial Newsletter:
"How I Use ChatGPT + Draw.io to Turn Complex Ideas into Visual Flowcharts (No Design Skills Needed!)"
Stay tuned — you’re building systems around AI, one mini-project at a time 🚀
🚀 Summary
✅ Built a DIY Prompt Manager
✅ Organized Prompts for Reuse
✅ Made it a Chrome Extension for Instant Access
You’re not just learning AI.
You’re making AI work like your personal assistant now.
STUCK!! donwload ready to use code below…
|
