professional-senior-chrome-extension-architect-developer
Build secure Chrome extensions with MV3 architecture
Building Chrome extensions requires understanding service workers, security patterns, and Chrome Web Store compliance. This skill provides architectural guidance, code templates, and security best practices for creating professional extensions with optional AI integration.
下載技能 ZIP
在 Claude 中上傳
前往 設定 → 功能 → 技能 → 上傳技能
開啟並開始使用
測試它
正在使用「professional-senior-chrome-extension-architect-developer」。 Create a new Chrome extension that analyzes page SEO and shows a score in a floating button
預期結果:
- Manifest configuration with permissions: activeTab, scripting, storage, tabs
- Content script that collects: title, meta description, headings, images, links
- Service worker with scoring algorithm and OpenAI integration option
- Popup UI for API key management and initiating analysis
- Shadow DOM styling for the floating analysis button
- Security checklist: no eval, API key in session storage, minimal permissions
正在使用「professional-senior-chrome-extension-architect-developer」。 Build a tab counter extension that shows the count in the extension badge
預期結果:
- Manifest V3 with tabs permission and action configuration
- Service worker using chrome.tabs.query to count tabs
- Badge update logic with chrome.action.setBadgeText
- Event-driven architecture (no polling, uses onCreated/onRemoved listeners)
- Minimal host permissions (no all_urls needed)
安全審計
低風險This is a legitimate Chrome extension development skill with minimal risk. It provides architectural guidance, code templates, and security patterns for building Manifest V3 extensions. The static scanner flagged documentation examples and educational content as security issues. The actual implementation demonstrates secure coding patterns: API keys stored in chrome.storage.session (RAM-only), no eval() in runtime code, Shadow DOM for UI isolation, and minimal permissions. The skill explicitly promotes security best practices including no remote code loading, proper consent flows, and CSP compliance.
低風險問題 (1)
風險因素
🌐 網路存取 (1)
⚡ 包含腳本 (1)
📁 檔案系統存取 (1)
品質評分
你能建構什麼
Design new extension architecture
Create a new Chrome extension with proper MV3 structure, security patterns, and AI integration from scratch.
Review extension security
Audit existing extensions for security issues like eval(), remote code, improper token storage, and permission overreach.
Migrate legacy extensions
Convert Manifest V2 extensions to V3 with service worker patterns, declarativeNetRequest, and modern security practices.
試試這些提示
Create a simple Manifest V3 Chrome extension with a popup that counts open tabs. Include the manifest.json, background service worker, and popup UI with proper permissions.
Add OpenAI API integration to my Chrome extension. Store the API key securely in chrome.storage.session. Create a service worker function that sends page content to GPT and displays the AI response in the popup.
Review my Chrome extension for security issues. Check for: eval() usage, remote script loading, tokens in localStorage, excessive permissions, missing CSP, and Shadow DOM usage. Report findings with fixes.
Prepare my extension for Chrome Web Store submission. Include privacy policy, proper permission justifications, manifest validation, and compliance with CWS policies.
最佳實務
- Always use chrome.storage.session for API keys and tokens - never localStorage for sensitive data
- Inject UI elements with Shadow DOM to prevent style conflicts with host page
- Request minimal permissions and use optional permissions for features that can be enabled later
避免
- Using eval() or dynamic code execution - violates CSP and creates security vulnerabilities
- Loading scripts from external CDNs - enables supply chain attacks
- Storing credentials in localStorage - accessible by any script on the page