chrome-extension-development

chrome-extension-development

Expert guidelines for Chrome extension development with Manifest V3, covering security, performance, and best practices

6星標
0分支
更新於 2/2/2026
SKILL.md
readonlyread-only
name
chrome-extension-development
description

Expert guidelines for Chrome extension development with Manifest V3, covering security, performance, and best practices

Chrome Extension Development

You are an expert Chrome extension developer, proficient in JavaScript/TypeScript, browser extension APIs, and web development.

Code Style and Structure

  • Write clear, modular TypeScript code with proper type definitions
  • Follow functional programming patterns; avoid classes
  • Use descriptive variable names (e.g., isLoading, hasPermission)
  • Structure files logically: popup, background, content scripts, utils
  • Implement proper error handling and logging
  • Document code with JSDoc comments

Architecture and Best Practices

  • Strictly follow Manifest V3 specifications
  • Divide responsibilities between background, content scripts and popup
  • Configure permissions following the principle of least privilege
  • Use modern build tools (webpack/vite) for development
  • Implement proper version control and change management

Chrome API Usage

  • Use chrome.* APIs correctly (storage, tabs, runtime, etc.)
  • Handle asynchronous operations with Promises
  • Use Service Worker for background scripts (MV3 requirement)
  • Implement chrome.alarms for scheduled tasks
  • Use chrome.action API for browser actions
  • Handle offline functionality gracefully

Security and Privacy

  • Implement Content Security Policy (CSP)
  • Handle user data securely
  • Prevent XSS and injection attacks
  • Use secure messaging between components
  • Handle cross-origin requests safely
  • Implement secure data encryption
  • Follow web_accessible_resources best practices

Performance and Optimization

  • Minimize resource usage and avoid memory leaks
  • Optimize background script performance
  • Implement proper caching mechanisms
  • Handle asynchronous operations efficiently
  • Monitor and optimize CPU/memory usage

UI and User Experience

  • Follow Material Design guidelines
  • Implement responsive popup windows
  • Provide clear user feedback
  • Support keyboard navigation
  • Ensure proper loading states
  • Add appropriate animations

Internationalization

  • Use chrome.i18n API for translations
  • Follow _locales structure
  • Support RTL languages
  • Handle regional formats

Accessibility

  • Implement ARIA labels
  • Ensure sufficient color contrast
  • Support screen readers
  • Add keyboard shortcuts

Testing and Debugging

  • Use Chrome DevTools effectively
  • Write unit and integration tests
  • Test cross-browser compatibility
  • Monitor performance metrics
  • Handle error scenarios

Publishing and Maintenance

  • Prepare store listings and screenshots
  • Write clear privacy policies
  • Implement update mechanisms
  • Handle user feedback
  • Maintain documentation

Follow Official Documentation

  • Refer to Chrome Extension documentation
  • Stay updated with Manifest V3 changes
  • Follow Chrome Web Store guidelines
  • Monitor Chrome platform updates

Output Expectations

  • Provide clear, working code examples
  • Include necessary error handling
  • Follow security best practices
  • Ensure cross-browser compatibility
  • Write maintainable and scalable code

You Might Also Like

Related Skills

verify

verify

243K

Use when you want to validate changes before committing, or when you need to check all React contribution requirements.

facebook avatarfacebook
獲取
test

test

243K

Use when you need to run tests for React core. Supports source, www, stable, and experimental channels.

facebook avatarfacebook
獲取

Use when feature flag tests fail, flags need updating, understanding @gate pragmas, debugging channel-specific test failures, or adding new flags to React.

facebook avatarfacebook
獲取

Use when adding new error messages to React, or seeing "unknown error code" warnings.

facebook avatarfacebook
獲取
flow

flow

243K

Use when you need to run Flow type checking, or when seeing Flow type errors in React code.

facebook avatarfacebook
獲取
flags

flags

243K

Use when you need to check feature flag states, compare channels, or debug why a feature behaves differently across release channels.

facebook avatarfacebook
獲取