Introduction
In this tutorial, you'll learn how to create a simple AI-powered automation tool that works within the Chrome browser - similar to what the AI startup Relay was working on before its shutdown. This hands-on project will teach you how to build a basic Chrome extension that can interact with AI services to help users accomplish tasks more efficiently. You'll understand how AI automation works in browsers and how to implement it using JavaScript and web APIs.
Prerequisites
- A basic understanding of HTML, CSS, and JavaScript
- Google Chrome browser installed on your computer
- A text editor (like VS Code, Sublime Text, or Atom)
- Basic knowledge of how Chrome extensions work
Step-by-Step Instructions
1. Setting Up Your Chrome Extension Project
1.1 Create Project Folder
First, create a new folder on your computer called ai-chrome-extension. This will be your project directory where you'll store all the files for your extension.
1.2 Create the Manifest File
The manifest file is the heart of every Chrome extension. It tells Chrome what your extension does and what permissions it needs. Create a file named manifest.json in your project folder with the following content:
{
"manifest_version": 3,
"name": "AI Task Assistant",
"version": "1.0",
"description": "A simple AI automation tool for Chrome",
"permissions": [
"activeTab",
"storage"
],
"action": {
"default_popup": "popup.html",
"default_title": "AI Assistant"
},
"background": {
"service_worker": "background.js"
}
}Why this matters: The manifest file defines your extension's basic properties, permissions, and entry points. The activeTab permission allows your extension to interact with the currently active browser tab, which is essential for AI automation tasks.
2. Creating the User Interface
2.1 Create the Popup HTML
Create a file named popup.html in your project folder. This is the interface that appears when users click your extension icon:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body { width: 300px; padding: 10px; font-family: Arial, sans-serif; }
button { width: 100%; padding: 10px; margin: 5px 0; background: #4285f4; color: white; border: none; border-radius: 4px; }
#output { margin-top: 10px; padding: 10px; background: #f5f5f5; border-radius: 4px; min-height: 50px; }
</style>
</head>
<body>
<h3>AI Task Assistant</h3>
<button id="summarizeBtn">Summarize Page</button>
<button id="translateBtn">Translate Text</button>
<button id="generateBtn">Generate Ideas</button>
<div id="output">Results will appear here</div>
<script src="popup.js"></script>
</body>
</html>2.2 Create the Popup JavaScript
Create a file named popup.js with the following code:
document.addEventListener('DOMContentLoaded', function() {
// Get buttons
const summarizeBtn = document.getElementById('summarizeBtn');
const translateBtn = document.getElementById('translateBtn');
const generateBtn = document.getElementById('generateBtn');
const output = document.getElementById('output');
// Add event listeners
summarizeBtn.addEventListener('click', async () => {
output.textContent = 'Processing...';
const result = await summarizeCurrentPage();
output.textContent = result;
});
translateBtn.addEventListener('click', async () => {
output.textContent = 'Processing...';
const result = await translateSelectedText();
output.textContent = result;
});
generateBtn.addEventListener('click', async () => {
output.textContent = 'Processing...';
const result = await generateIdeas();
output.textContent = result;
});
});
// Simulated AI functions
async function summarizeCurrentPage() {
// In a real implementation, this would call an AI API
return 'This is a simulated summary of the current page content. In a real AI automation tool, this would use an API like OpenAI or Google's AI services.';
}
async function translateSelectedText() {
// In a real implementation, this would call an AI translation API
return 'This is a simulated translation of selected text. A real implementation would use Google Translate API or similar services.';
}
async function generateIdeas() {
// In a real implementation, this would call an AI idea generation API
return 'Here are some generated ideas: 1. Create a blog post about AI automation 2. Build a mobile app 3. Develop a web tool for productivity';
}Why this matters: This creates the user interface and handles button clicks. The popup interface is what users interact with when they want to use your AI automation features.
3. Creating Background Functionality
3.1 Create Background Script
Create a file named background.js to handle background tasks:
chrome.runtime.onInstalled.addListener(() => {
console.log('AI Task Assistant extension installed');
});
// Listen for messages from popup
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
if (request.action === "getSelectedText") {
// In a real implementation, this would extract selected text
sendResponse({text: "Sample selected text for translation"});
}
});4. Loading Your Extension
4.1 Open Chrome and Access Extensions
Open Google Chrome and navigate to chrome://extensions in the address bar.
4.2 Enable Developer Mode
Toggle the switch in the top right corner to enable Developer Mode.
4.3 Load Your Extension
Click the "Load unpacked" button and select your ai-chrome-extension folder. Your extension should now appear in the extensions list.
4.4 Test Your Extension
Click the puzzle piece icon in your browser toolbar, find your AI Task Assistant extension, and click the extension icon. You should see the popup interface with three buttons.
Why this matters: This step allows you to test your extension in a real browser environment and verify that everything works as expected before implementing actual AI APIs.
5. Integrating Real AI APIs (Optional Advanced Step)
Once you have the basic extension working, you can integrate with real AI services. For example, to use OpenAI's API, you would need to:
- Create an API key at OpenAI Platform
- Modify your JavaScript functions to make API calls
- Handle authentication and rate limiting
Here's an example of how you might modify the summarize function to actually call an API:
async function summarizeCurrentPage() {
try {
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: "Summarize this webpage content: " + document.body.innerText.substring(0, 1000),
max_tokens: 150
})
});
const data = await response.json();
return data.choices[0].text.trim();
} catch (error) {
return 'Error: Could not summarize content';
}
}Why this matters: This shows how you would actually implement the AI automation that Relay was working on - connecting your extension to real AI services to perform meaningful tasks.
Summary
In this tutorial, you've learned how to create a Chrome extension that serves as a foundation for AI automation tools. You've built a basic user interface with three AI-powered buttons (summarize, translate, generate ideas) and set up the extension structure that would be needed for more advanced AI integrations. While this example uses simulated responses, the framework you've created can easily be extended to connect to real AI APIs like OpenAI, Google AI services, or other machine learning platforms. This demonstrates the core concept behind companies like Relay - creating browser-based tools that help users work more efficiently with AI technology.
The key takeaway is understanding how Chrome extensions can serve as interfaces for AI automation, allowing users to perform tasks like summarizing web pages, translating text, or generating ideas with just a few clicks - exactly what the AI automation space is focused on.
