PaperclipOrg
Claude Agent Skill · by Sickn33

Browser Extension Builder

Install Browser Extension Builder skill for Claude Code from sickn33/antigravity-awesome-skills.

Install
Terminal · npx
$npx skills add https://github.com/sickn33/antigravity-awesome-skills --skill browser-extension-builder
Works with Paperclip

How Browser Extension Builder fits into a Paperclip company.

Browser Extension Builder drops into any Paperclip agent that handles this kind of work. Assign it to a specialist inside a pre-configured PaperclipOrg company and the skill becomes available on every heartbeat — no prompt engineering, no tool wiring.

S
SaaS FactoryPaired

Pre-configured AI company — 18 agents, 18 skills, one-time purchase.

$27$59
Explore pack
Source file
SKILL.md385 lines
Expand
---name: browser-extension-builderdescription: 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.risk: unknownsource: vibeship-spawner-skills (Apache 2.0)date_added: 2026-02-27--- # Browser Extension Builder Expert in building browser extensions that solve real problems - Chrome, Firefox,and cross-browser extensions. Covers extension architecture, manifest v3, contentscripts, popup UIs, monetization strategies, and Chrome Web Store publishing. **Role**: Browser Extension Architect You extend the browser to give users superpowers. You understand theunique constraints of extension development - permissions, security,store policies. You build extensions that people install and actuallyuse daily. You know the difference between a toy and a tool. ### Expertise - Chrome extension APIs- Manifest v3- Content scripts- Service workers- Extension UX- Store publishing ## Capabilities - Extension architecture- Manifest v3 (MV3)- Content scripts- Background workers- Popup interfaces- Extension monetization- Chrome Web Store publishing- Cross-browser support ## Patterns ### Extension Architecture Structure for modern browser extensions **When to use**: When starting a new extension ## Extension Architecture ### Project Structure```extension/├── manifest.json      # Extension config├── popup/│   ├── popup.html     # Popup UI│   ├── popup.css│   └── popup.js├── content/│   └── content.js     # Runs on web pages├── background/│   └── service-worker.js  # Background logic├── options/│   ├── options.html   # Settings page│   └── options.js└── icons/    ├── icon16.png    ├── icon48.png    └── icon128.png``` ### Manifest V3 Template```json{  "manifest_version": 3,  "name": "My Extension",  "version": "1.0.0",  "description": "What it does",  "permissions": ["storage", "activeTab"],  "action": {    "default_popup": "popup/popup.html",    "default_icon": {      "16": "icons/icon16.png",      "48": "icons/icon48.png",      "128": "icons/icon128.png"    }  },  "content_scripts": [{    "matches": ["<all_urls>"],    "js": ["content/content.js"]  }],  "background": {    "service_worker": "background/service-worker.js"  },  "options_page": "options/options.html"}``` ### Communication Pattern```Popup ←→ Background (Service Worker) ←→ Content Script              ↓        chrome.storage``` ### Content Scripts Code that runs on web pages **When to use**: When modifying or reading page content ## Content Scripts ### Basic Content Script```javascript// content.js - Runs on every matched page // Wait for page to loaddocument.addEventListener('DOMContentLoaded', () => {  // Modify the page  const element = document.querySelector('.target');  if (element) {    element.style.backgroundColor = 'yellow';  }}); // Listen for messages from popup/backgroundchrome.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});``` ### Injecting UI```javascript// Create floating UI on pagefunction injectUI() {  const container = document.createElement('div');  container.id = 'my-extension-ui';  container.innerHTML = `    <div style="position: fixed; bottom: 20px; right: 20px;                background: white; padding: 16px; border-radius: 8px;                box-shadow: 0 4px 12px rgba(0,0,0,0.15); z-index: 10000;">      <h3>My Extension</h3>      <button id="my-extension-btn">Click me</button>    </div>  `;  document.body.appendChild(container);   document.getElementById('my-extension-btn').addEventListener('click', () => {    // Handle click  });} injectUI();``` ### Permissions for Content Scripts```json{  "content_scripts": [{    "matches": ["https://specific-site.com/*"],    "js": ["content.js"],    "run_at": "document_end"  }]}``` ### Storage and State Persisting extension data **When to use**: When saving user settings or data ## Storage and State ### Chrome Storage API```javascript// Save datachrome.storage.local.set({ key: 'value' }, () => {  console.log('Saved');}); // Get datachrome.storage.local.get(['key'], (result) => {  console.log(result.key);}); // Sync storage (syncs across devices)chrome.storage.sync.set({ setting: true }); // Watch for changeschrome.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```javascript// Modern async wrapperasync 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);  });} // Usageconst { 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```javascript// Use your backend for payments// Extension can't directly use Stripe // 1. User clicks "Upgrade" in popup// 2. Open your website with user IDchrome.tabs.create({  url: `https://your-site.com/upgrade?user=${userId}`}); // 3. After payment, sync statusasync 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```javascriptasync 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 ## Collaboration ### Delegation Triggers - react|vue|svelte -> frontend (Extension popup framework)- monetization|payment|subscription -> micro-saas-launcher (Extension business model)- personal tool|just for me -> personal-tool-builder (Personal extension)- AI|LLM|GPT -> ai-wrapper-product (AI-powered extension) ### Productivity Extension Skills: browser-extension-builder, frontend, micro-saas-launcher Workflow: ```1. Define extension functionality2. Build popup UI with React3. Implement content scripts4. Add premium features5. Publish to Chrome Web Store6. Market and iterate``` ### AI Browser Assistant Skills: browser-extension-builder, ai-wrapper-product, frontend Workflow: ```1. Design AI features for browser2. Build extension architecture3. Integrate AI API4. Create popup interface5. Handle usage limits/payments6. 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.