본문으로 건너뛰기
cccskills
무료GitHub에 공개

chrome-extension-development

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

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

설치 방법 보기

포함된 파일(1)

  • SKILL.md3.1 KB

SKILL.md(원문)

설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.

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

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

같은 저장소의 스킬

Use this skill when building applications with Gemini models, Gemini API, working with multimodal content (text, images, audio, video), implementing function calling, using structured outputs, or needing current model specifications. Covers SDK usage (google-genai for Python, @google/genai for JavaScript/TypeScript, com.google.genai:google-genai for Java, google.golang.org/genai for Go), model selection, and API capabilities.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Maros112358/scepticagent22026년 3월 22일 업데이트

ScepticAgent internal architecture reference. Use whenever the user asks how the extension works, wants to add a new AI provider, add a new highlight category, debug communication between components, understand the agent loop or streaming, or work with provider routing and the Gemini CORS proxy.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Maros112358/scepticagent22026년 3월 22일 업데이트

ScepticAgent AI prompt reference. Use whenever the user asks about the prompts, wants to change analysis behaviour, modify what the AI looks for, adjust highlight categories or scoring, understand what instructions are sent to the AI, or tune the output format of analysis or highlights.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Maros112358/scepticagent22026년 3월 22일 업데이트

ScepticAgent packaging and Chrome Web Store publishing workflow. Use whenever the user wants to build the zip, package the extension, publish or submit to the Chrome Web Store, update the store listing, or deal with manifest/icon/permission requirements for publishing.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Maros112358/scepticagent22026년 3월 22일 업데이트

ScepticAgent UI and styles reference. Use whenever the user wants to change the side panel UI, modify highlight colours, update the markdown renderer, work with CSS architecture, add or change category colours, or understand how the sidepanel renders analysis output.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Maros112358/scepticagent22026년 3월 22일 업데이트

Searches multiple web sources, synthesizes findings, and produces cited research reports using delegated subagents. Use when the user asks to research a topic online, search the web, look something up, find current information, compare options, or produce a research report.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

Maros112358/scepticagent22026년 3월 22일 업데이트

Maros112358의 스킬 모두 보기

이 스킬의 문제 신고