Setup and context
Google Antigravity IDE revolutionizes Chrome extension development by combining a powerful integrated development environment with AI-assisted code generation. Historically, building browser tools required juggling multiple text editors and browser consoles—a tedious workflow. With Antigravity, you can go from prototype to publication in hours, all while leveraging intelligent code suggestions tailored to the Chrome Extensions API.
Why Antigravity is Ideal for Chrome Extension Development
1. Integrated Browser Preview
Antigravity features a built-in preview pane that shows your extension's behavior in real-time alongside your code editor. Rather than switching between windows, you get a split-screen workflow where editing and testing happen simultaneously, dramatically improving iteration speed.
2. AI-Generated manifest.json
The manifest.json file is notoriously error-prone because its specification is complex and version-dependent. Antigravity's AI can generate correct, Manifest V3-compliant configurations from simple descriptions. Tell it "build an extension that scrapes page text," and it auto-generates the appropriate permissions and host_permissions blocks.
3. Unified API Reference
Chrome Extensions API changes between versions, and deprecated methods are easy to misuse. Antigravity's code assistant references the latest Manifest V3 specification, reducing the risk of using outdated or incompatible APIs.
4. Integrated Debugging Console
Output from your content scripts, background workers, and popup pages converges in a single console, making it simpler to trace complex interactions and identify bugs.
Manifest V3: Essential Configuration
Every Chrome extension declares its capabilities and permissions in manifest.json. Manifest V3 (the current standard) introduces stricter security requirements compared to V2.
{
"manifest_version": 3,
"name": "Page Summarizer",
"version": "1.0.0",
"description": "AI-powered page summarization in one click",
"permissions": ["activeTab", "scripting"],
"host_permissions": ["<all_urls>"],
"action": {
"default_title": "Click to summarize",
"default_popup": "popup.html"
},
"background": {
"service_worker": "background.js"
},
"icons": {
"16": "images/icon-16.png",
"48": "images/icon-48.png",
"128": "images/icon-128.png"
}
}Key points:
manifest_version: 3is mandatory (V2 is deprecated)permissionsandhost_permissionsare now separate declarations- Background scripts run as Service Workers, not persistent scripts
- The
actionfield configures the popup UI
Project Structure and Setup
A typical Chrome extension project follows this layout:
my-chrome-extension/
├── manifest.json # Extension configuration
├── popup.html # Popup UI
├── popup.js # Popup logic
├── content.js # Content script
├── background.js # Background worker
└── images/
├── icon-16.png
├── icon-48.png
└── icon-128.png
In Antigravity, create a new project and use the AI assistant to scaffold this structure and generate each file.
Building Components with AI Assistance
Content Script: Collecting Page Data
Content scripts run automatically when a page loads, giving you access to the page's DOM and content. They can't access the page's JavaScript scope directly, but they can read and modify the page structure.
Ask Antigravity: "Create a content script that collects all text from the page and sends it to the background script." You'll get something like:
// content.js - Collect page text and send to background
const pageText = document.body.innerText;
const pageTitle = document.title;
// Send to background script
chrome.runtime.sendMessage(
{
type: 'PAGE_TEXT',
text: pageText,
title: pageTitle,
url: window.location.href
},
(response) => {
console.log('Background response:', response);
}
);What this code does:
- Extracts page text via
document.body.innerText - Sends it asynchronously to the background worker
- Logs the response for debugging
Background Worker: Processing and External APIs
The background worker persists while the extension is enabled and can handle messages from multiple tabs. In Manifest V3, it runs as a Service Worker (not a persistent background page).
// background.js - Handle incoming messages and call APIs
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
if (request.type === 'PAGE_TEXT') {
// Process the text (e.g., send to summarization API)
summarizeText(request.text)
.then(summary => {
sendResponse({
success: true,
summary: summary
});
})
.catch(error => {
sendResponse({
success: false,
error: error.message
});
});
// Signal that we'll respond asynchronously
return true;
}
});
async function summarizeText(text) {
// Call an external API
const response = await fetch('https://api.example.com/summarize', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer YOUR_API_KEY`
},
body: JSON.stringify({ text: text })
});
const data = await response.json();
return data.summary;
}Execution flow:
chrome.runtime.onMessage.addListener()receives messages from content scriptssummarizeText()makes an async API callsendResponse()delivers the result back to the senderreturn truesignals that the response is asynchronous
Popup UI: User-Facing Interface
The popup appears when the user clicks the extension icon. It's a simple HTML/CSS/JS application.
<!-- popup.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body {
width: 400px;
padding: 15px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
#summary {
margin-top: 15px;
padding: 10px;
background-color: #f0f0f0;
border-radius: 5px;
max-height: 200px;
overflow-y: auto;
}
button {
padding: 8px 16px;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<h2>Page Summarizer</h2>
<button id="summarize-btn">Summarize This Page</button>
<div id="summary"></div>
<script src="popup.js"></script>
</body>
</html>// popup.js - Handle user interactions
document.getElementById('summarize-btn').addEventListener('click', async () => {
const btn = document.getElementById('summarize-btn');
btn.disabled = true;
btn.textContent = 'Summarizing...';
// Query the active tab
const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
// Send message to content script on that tab
chrome.tabs.sendMessage(tab.id, { type: 'GET_SUMMARY' }, (response) => {
if (response && response.success) {
document.getElementById('summary').textContent = response.summary;
btn.textContent = 'Summarize This Page';
} else {
document.getElementById('summary').textContent = 'Error: ' + (response?.error || 'Unknown error');
}
btn.disabled = false;
});
});Debugging and Local Testing
Antigravity's debugging features let you inspect your extension's behavior in detail.
Step 1: Enable Debug Output
Use console.log() throughout your scripts and monitor the output in Antigravity's integrated console.
// Example debug logging
console.log('Content script loaded on:', window.location.href);
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
console.log('Received message:', request);
// Handle request...
});Step 2: Verify Message Passing
Test that messages flow correctly between your content script and background worker.
// In content.js: Send a test message
chrome.runtime.sendMessage(
{ type: 'TEST', payload: 'Hello from content' },
(response) => {
console.log('Got response:', response); // If this logs, messaging works
}
);Step 3: Inspect Storage
If your extension uses chrome.storage.local, verify that data is persisting correctly.
// Read stored data
chrome.storage.local.get(['myKey'], (result) => {
console.log('Stored value:', result.myKey);
});Publishing to the Chrome Web Store
1. Create a Developer Account
Visit the Chrome Web Store Developer Dashboard and sign in with your Google account. A one-time $5 registration fee is required.
2. Prepare Assets
The Chrome Web Store requires:
- Icon: 128×128 pixels (PNG)
- Screenshots: 1280×800 or 640×400 pixels (up to 5 images)
- Description: Localized text for each language you support
Generate polished images and descriptions in Antigravity beforehand for a professional listing.
3. Package and Submit
# Create a ZIP archive of your extension
zip -r my-extension.zip manifest.json popup.html popup.js content.js background.js images/
# Upload via the Chrome Web Store Developer DashboardApproval typically takes 1-3 days.
Related Resources
The Antigravity Getting Started Guide covers IDE basics and project creation.
For building more complex tools, refer to the CLI Tool Development Guide.
When integrating with backend services, the MCP Server Building Guide provides essential patterns.
Recommended Tools
These resources help refine browser automation and data extraction workflows:
Conclusion
Antigravity transforms Chrome extension development into a faster, more intuitive process. By leveraging AI-assisted code generation, an integrated development environment, and streamlined debugging, you can build sophisticated browser tools with minimal friction.
Key takeaways:
- Master Manifest V3 structure and requirements
- Use AI to scaffold content scripts, background workers, and popup UIs
- Leverage debugging tools to verify inter-script communication
- Follow the Chrome Web Store publication workflow