browser-extension-dev

Browser Extension Development

Safety Notice

This listing is imported from skills.sh public index metadata. Review upstream SKILL.md and repository scripts before running.

Copy this and send it to your AI assistant to learn

Install skill "browser-extension-dev" with this command: npx skills add phrazzld/claude-config/phrazzld-claude-config-browser-extension-dev

Browser Extension Development

Manifest V3, minimal permissions, cross-browser first.

Manifest V3

Required for new extensions:

{ "manifest_version": 3, "name": "My Extension", "version": "1.0.0", "permissions": ["storage"], "host_permissions": ["https://api.example.com/"], "background": { "service_worker": "background.js" }, "content_scripts": [{ "matches": ["https://.example.com/*"], "js": ["content.js"] }], "content_security_policy": { "extension_pages": "script-src 'self'; object-src 'none'" } }

Minimal Permissions

Request only what you need. Justify each permission:

Permission Use Case

storage

Save user preferences

activeTab

Access current tab on user action

scripting

Inject scripts programmatically

https://specific.com/*

Access specific API

Never: <all_urls> without documented justification.

Use optional permissions for non-core features:

chrome.permissions.request({ origins: ['https://optional.com/*'] }, (granted) => { if (granted) enableFeature(); });

Message Passing

Always validate messages at boundaries:

// background.js chrome.runtime.onMessage.addListener((message, sender, sendResponse) => { // Validate sender if (!sender.tab) return;

// Validate message structure if (message.type !== 'FETCH_DATA') return; if (typeof message.url !== 'string') return;

// Process safely fetchData(message.url).then(sendResponse); return true; // async response });

Never trust data from content scripts without validation.

Cross-Browser Support

// Use webextension-polyfill for API normalization import browser from 'webextension-polyfill';

// Feature detection if (browser.storage?.sync) { await browser.storage.sync.set({ key: value }); } else { await browser.storage.local.set({ key: value }); }

Test on Chrome, Firefox, Safari, Edge.

Updates

  • Semantic versioning (MAJOR.MINOR.PATCH)

  • Changelog accessible in-extension

  • Gradual rollout for major changes

  • Highlight permission changes to users

  • Maintain backward compatibility

  • Preserve user data across versions

Anti-Patterns

  • <all_urls> permission hoarding

  • eval() or remote code execution

  • Trusting content script data without validation

  • Manifest V2 for new development

  • Chrome-only without cross-browser testing

  • Silent permission scope creep

Source Transparency

This detail page is rendered from real SKILL.md content. Trust labels are metadata-based hints, not a safety guarantee.

Related Skills

Related by shared tags or category signals.

Coding

pencil-to-code

No summary provided by upstream source.

Repository SourceNeeds Review
Coding

python-standards

No summary provided by upstream source.

Repository SourceNeeds Review
Coding

convex-development

No summary provided by upstream source.

Repository SourceNeeds Review