Introduction
In this tutorial, you'll learn how to create Chrome extensions that turn your best AI prompts into one-click tools using Google's Skills technology. This approach allows you to quickly access powerful AI capabilities directly from your browser, making your workflow more efficient. You'll build a practical extension that can interact with AI models through a simple button click.
Prerequisites
- Basic understanding of HTML, CSS, and JavaScript
- Chrome browser installed
- Node.js and npm installed (for development tools)
- Basic knowledge of Chrome extension development
- Access to an AI API (we'll use OpenAI's API as an example)
Step 1: Set Up Your Development Environment
1.1 Create Project Directory
First, create a new directory for your Chrome extension project:
mkdir ai-skill-extension
cd ai-skill-extensionThis creates a dedicated space for your extension files.
1.2 Initialize Package.json
Initialize your project with npm to manage dependencies:
npm init -yThis creates a package.json file that will track your project dependencies.
Step 2: Create Basic Chrome Extension Structure
2.1 Create Manifest File
Create a manifest.json file that defines your extension:
{
"manifest_version": 3,
"name": "AI Prompt Skill",
"version": "1.0",
"description": "Turn your best AI prompts into one-click tools",
"permissions": [
"activeTab",
"storage",
"declarativeNetRequest"
],
"action": {
"default_popup": "popup.html",
"default_title": "AI Prompt Skill",
"default_icon": {
"16": "icon16.png",
"48": "icon48.png",
"128": "icon128.png"
}
},
"background": {
"service_worker": "background.js"
}
}This manifest file tells Chrome about your extension's capabilities, permissions, and entry points.
2.2 Create Popup HTML
Create popup.html to define the user interface:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body { width: 300px; padding: 10px; }
button { width: 100%; margin: 5px 0; padding: 10px; }
textarea { width: 100%; height: 100px; }
</style>
</head>
<body>
<h3>AI Prompt Skill</h3>
<textarea id="promptInput" placeholder="Enter your AI prompt here..."></textarea>
<button id="executeBtn">Execute AI Prompt</button>
<div id="result"></div>
<script src="popup.js"></script>
</body>
</html>This popup will serve as the user interface where users can input prompts and see results.
Step 3: Implement Core Functionality
3.1 Create Background Script
Create background.js to handle extension logic:
chrome.runtime.onInstalled.addListener(() => {
console.log('AI Prompt Skill extension installed');
});
chrome.action.onClicked.addListener((tab) => {
chrome.tabs.create({
url: chrome.runtime.getURL('popup.html'),
active: true
});
});The background script listens for extension installation and handles the icon click to open the popup.
3.2 Implement Popup JavaScript
Create popup.js to handle user interactions:
document.addEventListener('DOMContentLoaded', () => {
const executeBtn = document.getElementById('executeBtn');
const promptInput = document.getElementById('promptInput');
const resultDiv = document.getElementById('result');
executeBtn.addEventListener('click', async () => {
const prompt = promptInput.value;
if (!prompt) return;
try {
resultDiv.innerHTML = 'Processing...';
// Call your AI API
const response = await fetch('https://api.openai.com/v1/completions', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer YOUR_API_KEY_HERE'
},
body: JSON.stringify({
model: 'text-davinci-003',
prompt: prompt,
max_tokens: 150
})
});
const data = await response.json();
resultDiv.innerHTML = data.choices[0].text;
} catch (error) {
resultDiv.innerHTML = 'Error: ' + error.message;
}
});
});This script handles the user's prompt input and sends it to the AI API for processing.
Step 4: Add Advanced Features
4.1 Implement Prompt Templates
Enhance your extension by adding prompt templates:
const promptTemplates = {
'summarize': 'Summarize the following text in 3 bullet points: ',
'translate': 'Translate the following text to French: ',
'brainstorm': 'Brainstorm 5 ideas for: '
};
// Add to popup.js
function loadTemplate(templateName) {
if (promptTemplates[templateName]) {
promptInput.value = promptTemplates[templateName];
}
}Prompt templates save time by providing pre-defined prompt structures for common tasks.
4.2 Add Storage for User Prompts
Allow users to save and recall their favorite prompts:
async function savePrompt(prompt) {
const prompts = await chrome.storage.local.get(['savedPrompts']);
const newPrompts = prompts.savedPrompts || [];
newPrompts.push({
id: Date.now(),
text: prompt,
timestamp: new Date().toISOString()
});
await chrome.storage.local.set({ savedPrompts: newPrompts });
}
async function loadSavedPrompts() {
const prompts = await chrome.storage.local.get(['savedPrompts']);
return prompts.savedPrompts || [];
}Storage allows users to maintain their personal collection of effective prompts.
Step 5: Test and Deploy
5.1 Load Extension in Chrome
Open Chrome and navigate to chrome://extensions/, enable Developer mode, and click "Load unpacked" to select your project directory.
This step allows you to test your extension in the browser environment.
5.2 Test Functionality
Click the extension icon in the toolbar, enter a prompt, and click "Execute AI Prompt" to verify it works correctly.
Test with different prompts and ensure error handling works properly.
Summary
In this tutorial, you've built a Chrome extension that transforms your AI prompts into one-click tools. You learned how to structure a Chrome extension, implement API integration with AI services, and add user-friendly features like prompt templates and storage. This extension can be extended with additional AI models, more sophisticated prompt management, and enhanced user interfaces. The skills you've learned here can be applied to create more complex AI-powered tools that seamlessly integrate into your browser workflow.
