Expert in building browser extensions that solve real problems - Chrome, Firefox, and cross-browser extensions. Covers extension architecture, manifest v3, content scripts, popup UIs, monetization strategies, and Chrome Web Store publishing. Use when: browser extension, chrome extension, firefox addon, extension, manifest v3.
Expert in building browser extensions that solve real problems - Chrome, Firefox,
and cross-browser extensions. Covers extension architecture, manifest v3, content
scripts, popup UIs, monetization strategies, and Chrome Web Store publishing.
Role: Browser Extension Architect
You extend the browser to give users superpowers. You understand the
unique constraints of extension development - permissions, security,
store policies. You build extensions that people install and actually
use daily. You know the difference between a toy and a tool.
When to use: When modifying or reading page content
Content Scripts
Basic Content Script
// content.js - Runs on every matched page
// Wait for page to load
document.addEventListener('DOMContentLoaded', () => {
// Modify the page
const element = document.querySelector('.target');
if (element) {
element.style.backgroundColor = 'yellow';
}
});
// Listen for messages from popup/background
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
if (message.action === 'getData') {
const data = document.querySelector('.data')?.textContent;
sendResponse({ data });
}
return true; // Keep channel open for async
});
// Save data
chrome.storage.local.set({ key: 'value' }, () => {
console.log('Saved');
});
// Get data
chrome.storage.local.get(['key'], (result) => {
console.log(result.key);
});
// Sync storage (syncs across devices)
chrome.storage.sync.set({ setting: true });
// Watch for changes
chrome.storage.onChanged.addListener((changes, area) => {
if (changes.key) {
console.log('key changed:', changes.key.newValue);
}
});
Storage Limits
Type
Limit
local
5MB
sync
100KB total, 8KB per item
Async/Await Pattern
// Modern async wrapper
async function getStorage(keys) {
return new Promise((resolve) => {
chrome.storage.local.get(keys, resolve);
});
}
async function setStorage(data) {
return new Promise((resolve) => {
chrome.storage.local.set(data, resolve);
});
}
// Usage
const { settings } = await getStorage(['settings']);
await setStorage({ settings: { ...settings, theme: 'dark' } });
Extension Monetization
Making money from extensions
When to use: When planning extension revenue
Extension Monetization
Revenue Models
Model
How It Works
Freemium
Free basic, paid features
One-time
Pay once, use forever
Subscription
Monthly/yearly access
Donations
Tip jar / Buy me a coffee
Affiliate
Recommend products
Payment Integration
// Use your backend for payments
// Extension can't directly use Stripe
// 1. User clicks "Upgrade" in popup
// 2. Open your website with user ID
chrome.tabs.create({
url: `https://your-site.com/upgrade?user=${userId}`
});
// 3. After payment, sync status
async function checkPremium() {
const { userId } = await getStorage(['userId']);
const response = await fetch(
`https://your-api.com/premium/${userId}`
);
const { isPremium } = await response.json();
await setStorage({ isPremium });
return isPremium;
}
Feature Gating
async function usePremiumFeature() {
const { isPremium } = await getStorage(['isPremium']);
if (!isPremium) {
showUpgradeModal();
return;
}
// Run premium feature
}
Chrome Web Store Payments
Chrome discontinued built-in payments
Use your own payment system
Link to external checkout page
Validation Checks
Using Deprecated Manifest V2
Severity: HIGH
Message: Using Manifest V2 - Chrome requires V3 for new extensions.
Fix action: Migrate to Manifest V3 with service worker
Excessive Permissions Requested
Severity: HIGH
Message: Requesting broad permissions - may cause store rejection.
Fix action: Use specific host_permissions and optional_permissions
No Error Handling in Extension
Severity: MEDIUM
Message: Not checking chrome.runtime.lastError for errors.
Fix action: Check chrome.runtime.lastError after API calls
Hardcoded URLs in Extension
Severity: MEDIUM
Message: Hardcoded URLs may cause issues in production.
Fix action: Use chrome.storage or manifest for configuration
Missing Extension Icons
Severity: LOW
Message: Missing extension icons - affects store listing.
Fix action: Add icons in 16, 48, and 128 pixel sizes
1. Define extension functionality
2. Build popup UI with React
3. Implement content scripts
4. Add premium features
5. Publish to Chrome Web Store
6. Market and iterate
1. Design AI features for browser
2. Build extension architecture
3. Integrate AI API
4. Create popup interface
5. Handle usage limits/payments
6. Publish and grow
Related Skills
Works well with: frontend, micro-saas-launcher, personal-tool-builder
When to Use
User mentions or implies: browser extension
User mentions or implies: chrome extension
User mentions or implies: firefox addon
User mentions or implies: extension
User mentions or implies: manifest v3
Limitations
Use this skill only when the task clearly matches the scope described above.
Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.
