@musashishao/agent-kit 1.8.2 → 1.9.1

package/.agent/skills/browser-extension-builder/SKILL.md

@@ -0,0 +1,422 @@
+---
+name: browser-extension-builder
+description: "Build browser extensions for Chrome, Firefox, and Edge. Covers manifest v3, content scripts, background workers, and popup UIs."
+version: "1.0.0"
+---
+
+# 🧩 Browser Extension Builder
+
+You are a browser extension developer who builds extensions that enhance web experiences. You understand Manifest V3, the Chrome Extensions API, cross-browser compatibility, and extension store requirements.
+
+---
+
+## When to Use This Skill
+
+- Building productivity extensions
+- Content modification/injection
+- Web scraping extensions
+- Authentication helpers
+- Ad blockers and privacy tools
+- Developer tools extensions
+
+---
+
+## Capabilities
+
+- `manifest-v3`
+- `content-scripts`
+- `background-workers`
+- `popup-ui`
+- `storage-api`
+- `messaging`
+- `cross-browser`
+
+---
+
+## 1. Project Structure
+
+```
+extension/
+├── manifest.json          # Extension manifest
+├── popup/
+│   ├── popup.html         # Popup UI
+│   ├── popup.css
+│   └── popup.js
+├── background/
+│   └── service-worker.js  # Background script
+├── content/
+│   └── content.js         # Content script
+├── options/
+│   ├── options.html       # Settings page
+│   └── options.js
+├── icons/
+│   ├── icon-16.png
+│   ├── icon-48.png
+│   └── icon-128.png
+└── lib/
+    └── utils.js           # Shared utilities
+```
+
+---
+
+## 2. Manifest V3
+
+```json
+{
+  "manifest_version": 3,
+  "name": "My Extension",
+  "version": "1.0.0",
+  "description": "A helpful browser extension",
+  
+  "permissions": [
+    "storage",
+    "activeTab",
+    "scripting"
+  ],
+  
+  "host_permissions": [
+    "https://*.example.com/*"
+  ],
+  
+  "action": {
+    "default_popup": "popup/popup.html",
+    "default_icon": {
+      "16": "icons/icon-16.png",
+      "48": "icons/icon-48.png",
+      "128": "icons/icon-128.png"
+    }
+  },
+  
+  "background": {
+    "service_worker": "background/service-worker.js",
+    "type": "module"
+  },
+  
+  "content_scripts": [
+    {
+      "matches": ["https://*.example.com/*"],
+      "js": ["content/content.js"],
+      "css": ["content/content.css"],
+      "run_at": "document_end"
+    }
+  ],
+  
+  "options_page": "options/options.html",
+  
+  "icons": {
+    "16": "icons/icon-16.png",
+    "48": "icons/icon-48.png",
+    "128": "icons/icon-128.png"
+  },
+  
+  "web_accessible_resources": [
+    {
+      "resources": ["images/*"],
+      "matches": ["https://*.example.com/*"]
+    }
+  ]
+}
+```
+
+---
+
+## 3. Background Service Worker
+
+```javascript
+// background/service-worker.js
+
+// Initialize on install
+chrome.runtime.onInstalled.addListener((details) => {
+  if (details.reason === 'install') {
+    // Set default settings
+    chrome.storage.sync.set({
+      enabled: true,
+      theme: 'light',
+    });
+    
+    // Open onboarding page
+    chrome.tabs.create({ url: 'onboarding/welcome.html' });
+  }
+});
+
+// Handle messages from content scripts and popup
+chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
+  if (message.type === 'GET_DATA') {
+    fetchData(message.url).then(sendResponse);
+    return true; // Keep channel open for async response
+  }
+  
+  if (message.type === 'SAVE_DATA') {
+    chrome.storage.local.set({ data: message.data });
+    sendResponse({ success: true });
+  }
+});
+
+// Context menu
+chrome.runtime.onInstalled.addListener(() => {
+  chrome.contextMenus.create({
+    id: 'saveToExtension',
+    title: 'Save to My Extension',
+    contexts: ['selection', 'link'],
+  });
+});
+
+chrome.contextMenus.onClicked.addListener((info, tab) => {
+  if (info.menuItemId === 'saveToExtension') {
+    const content = info.selectionText || info.linkUrl;
+    saveContent(content);
+  }
+});
+
+// Alarms for scheduled tasks
+chrome.alarms.create('dailySync', { periodInMinutes: 1440 });
+
+chrome.alarms.onAlarm.addListener((alarm) => {
+  if (alarm.name === 'dailySync') {
+    syncData();
+  }
+});
+
+async function fetchData(url) {
+  const response = await fetch(url);
+  return response.json();
+}
+```
+
+---
+
+## 4. Content Script
+
+```javascript
+// content/content.js
+
+// Wait for DOM ready
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', init);
+} else {
+  init();
+}
+
+function init() {
+  // Inject UI
+  injectUI();
+  
+  // Observe DOM changes
+  observeDOM();
+  
+  // Listen for messages
+  chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
+    if (message.type === 'HIGHLIGHT_TEXT') {
+      highlightText(message.text);
+      sendResponse({ success: true });
+    }
+  });
+}
+
+function injectUI() {
+  const container = document.createElement('div');
+  container.id = 'my-extension-container';
+  container.innerHTML = `
+    <button id="ext-toggle">Toggle Extension</button>
+    <div id="ext-panel" class="hidden">
+      <h3>Extension Panel</h3>
+      <div id="ext-content"></div>
+    </div>
+  `;
+  
+  document.body.appendChild(container);
+  
+  // Add event listeners
+  document.getElementById('ext-toggle').addEventListener('click', togglePanel);
+}
+
+function observeDOM() {
+  const observer = new MutationObserver((mutations) => {
+    mutations.forEach((mutation) => {
+      if (mutation.type === 'childList') {
+        // Handle new content
+        processNewContent(mutation.addedNodes);
+      }
+    });
+  });
+  
+  observer.observe(document.body, {
+    childList: true,
+    subtree: true,
+  });
+}
+
+// Send message to background
+function sendToBackground(data) {
+  chrome.runtime.sendMessage({ type: 'CONTENT_DATA', data });
+}
+```
+
+---
+
+## 5. Popup UI
+
+```html
+<!-- popup/popup.html -->
+<!DOCTYPE html>
+<html>
+<head>
+  <link rel="stylesheet" href="popup.css">
+</head>
+<body>
+  <div class="popup-container">
+    <h1>My Extension</h1>
+    
+    <div class="toggle-section">
+      <label>
+        <input type="checkbox" id="enabled">
+        Enable Extension
+      </label>
+    </div>
+    
+    <div class="stats">
+      <span id="count">0</span> items saved
+    </div>
+    
+    <button id="action-btn" class="primary-btn">
+      Do Action
+    </button>
+    
+    <div id="status"></div>
+  </div>
+  
+  <script src="popup.js"></script>
+</body>
+</html>
+```
+
+```javascript
+// popup/popup.js
+document.addEventListener('DOMContentLoaded', async () => {
+  // Load saved settings
+  const { enabled = true, count = 0 } = await chrome.storage.sync.get(['enabled', 'count']);
+  
+  document.getElementById('enabled').checked = enabled;
+  document.getElementById('count').textContent = count;
+  
+  // Toggle handler
+  document.getElementById('enabled').addEventListener('change', async (e) => {
+    await chrome.storage.sync.set({ enabled: e.target.checked });
+    
+    // Notify content scripts
+    const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
+    chrome.tabs.sendMessage(tab.id, { type: 'TOGGLE', enabled: e.target.checked });
+  });
+  
+  // Action button
+  document.getElementById('action-btn').addEventListener('click', async () => {
+    const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
+    
+    // Execute script in current tab
+    await chrome.scripting.executeScript({
+      target: { tabId: tab.id },
+      func: () => {
+        // This runs in the page context
+        const data = document.querySelector('.data')?.textContent;
+        return data;
+      },
+    });
+    
+    showStatus('Action completed!');
+  });
+});
+
+function showStatus(message) {
+  const status = document.getElementById('status');
+  status.textContent = message;
+  setTimeout(() => status.textContent = '', 3000);
+}
+```
+
+---
+
+## 6. Storage API
+
+```javascript
+// Sync storage (synced across devices)
+await chrome.storage.sync.set({ 
+  settings: { theme: 'dark', notifications: true }
+});
+
+const { settings } = await chrome.storage.sync.get('settings');
+
+// Local storage (device only, larger limit)
+await chrome.storage.local.set({ largeData: [...] });
+
+// Listen for changes
+chrome.storage.onChanged.addListener((changes, area) => {
+  if (area === 'sync' && changes.settings) {
+    applySettings(changes.settings.newValue);
+  }
+});
+
+// Clear storage
+await chrome.storage.local.clear();
+```
+
+---
+
+## 7. Cross-Browser Support
+
+```javascript
+// Use webextension-polyfill for Firefox compatibility
+// npm install webextension-polyfill
+
+// Or use a wrapper
+const browser = typeof chrome !== 'undefined' ? chrome : browser;
+
+// Feature detection
+function hasPermission(permission) {
+  return new Promise((resolve) => {
+    chrome.permissions.contains({ permissions: [permission] }, resolve);
+  });
+}
+
+// Manifest differences
+// manifest.json for Chrome
+{
+  "background": {
+    "service_worker": "background.js"
+  }
+}
+
+// manifest.json for Firefox
+{
+  "background": {
+    "scripts": ["background.js"]
+  }
+}
+```
+
+---
+
+## 8. Publishing Checklist
+
+| Platform | Store | Requirements |
+|----------|-------|--------------|
+| Chrome | Chrome Web Store | $5 dev fee, review 1-3 days |
+| Firefox | AMO | Free, review 1-2 days |
+| Edge | Edge Add-ons | Free, review 1-3 days |
+
+### Pre-Submission
+
+- [ ] Test all functionality
+- [ ] Remove console.logs
+- [ ] Minimize permissions (explain each)
+- [ ] Privacy policy (if using user data)
+- [ ] Screenshots (1280x800)
+- [ ] Promotional images
+- [ ] Description and changelog
+
+---
+
+## Related Skills
+
+- `react-patterns` - React for popup UI
+- `browser-automation` - Web automation
+- `typescript-expert` - TypeScript support