chromeChrome DevTools Protocol, extension Manifest V3, and debugging patterns that prevent common automation failures.
Install via ClawdBot CLI:
clawdbot install ivangdavila/chromeGet tab WebSocket URL first: Never connect to ws://localhost:9222/devtools/browser directly. Fetch http://localhost:9222/json/list and use webSocketDebuggerUrl from the active tab.
Enable domains before use: Runtime.enable and Page.enable must be called before any Runtime.evaluate or Page.navigate commands.
CDP is async: Wait for response before sending next command. Use Promise-based wrapper with response ID tracking.
Screenshot on high-DPI: Include fromSurface: true and scale: 2 in Page.captureScreenshot params for Retina displays.
Get response body separately: Network.responseReceived doesn't include body. Call Network.getResponseBody with requestId after response completes.
Permissions split: Use permissions for APIs, host_permissions for URLs. Never use http:/// in permissions.
Service workers terminate: No persistent state. Use chrome.storage.local instead of global variables. Use chrome.alarms instead of setInterval.
Content script isolation: Can't access page globals. Use chrome.scripting.executeScript with func for page context. Use window.postMessage for content↔page communication.
Storage is async: chrome.storage.local.get() returns Promise, not data. Always await. Handle QUOTA_EXCEEDED errors.
Detect actual Chrome (not Edge/Brave): Check window.chrome && navigator.vendor === "Google Inc." and exclude Opera/Edge.
Extension context types:
chrome.runtime.id exists → content scriptchrome.runtime.getManifest exists → popup/background/optionschrome.loadTimes exists but no runtime → regular Chrome web pageManifest version check: Wrap chrome.runtime.getManifest() in try-catch. Use chrome.action for V3, chrome.browserAction for V2.
Memory API conditional: Check 'memory' in performance before accessing performance.memory.usedJSHeapSize.
Use performance marks: performance.mark() and performance.measure() for sub-frame timing. Clear marks to prevent memory leaks.
Layout thrash detection: PerformanceObserver with entryTypes: ['measure', 'paint', 'largest-contentful-paint']. Flag entries >16.67ms.
Block before navigate: Call Network.setBlockedURLs before Page.navigate, not after.
Request interception: Use Network.setRequestInterception with requestStage: 'Request' for granular control. Return errorReason: 'BlockedByClient' to block.
Mixed content: HTTPS pages can't load HTTP resources. Check location.protocol vs resource URL.
CORS errors: TypeError on cross-origin fetch usually means CORS. Check DevTools Network tab for specific error.
Secure context required: File System Access API, Clipboard API require window.isSecureContext === true and user gesture.
Generated Mar 1, 2026
Use Chrome DevTools Protocol to automate testing of product pages, including screenshot capture on high-DPI displays and network request interception for performance monitoring. This ensures cross-browser compatibility and detects layout thrash in real-time during user interactions.
Leverage Manifest V3 to build extensions with service workers for background tasks, using chrome.storage.local for state management and content script isolation for secure page interactions. This enables features like ad-blocking or data scraping while maintaining user privacy.
Implement context detection to verify Chrome environments and use network debugging to block insecure resources, ensuring HTTPS compliance and preventing mixed content issues. This helps organizations audit web applications for security vulnerabilities.
Utilize performance debugging with marks and observers to measure load times and detect layout thrash, optimizing media-heavy sites for faster rendering. This improves user experience on platforms like news or streaming services.
Apply CDP async commands and response body fetching to automate data extraction from financial portals, ensuring reliable navigation and error handling. This supports tasks like transaction monitoring or report generation in secure contexts.
Offer a cloud-based platform that uses Chrome automation skills to provide continuous testing services for web applications. Revenue is generated through subscription tiers based on test frequency and complexity, targeting developers and QA teams.
Provide bespoke Chrome extension development services using Manifest V3, focusing on productivity or security enhancements for businesses. Revenue comes from project-based fees and ongoing maintenance contracts, serving clients in various industries.
Develop a tool that leverages Chrome's performance APIs to offer real-time analytics on website speed and user experience. Revenue is generated via freemium models with advanced features for enterprise clients, such as detailed reporting and alerts.
💬 Integration Tip
Start by fetching the WebSocket URL from localhost:9222/json/list before connecting to CDP, and always enable Runtime and Page domains to avoid common automation failures.
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
Expert frontend design guidelines for creating beautiful, modern UIs. Use when building landing pages, dashboards, or any user interface.
Use when building UI with shadcn/ui components, Tailwind CSS layouts, form patterns with react-hook-form and zod, theming, dark mode, sidebar layouts, mobile navigation, or any shadcn component question.
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when building web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
Create distinctive, production-grade static sites with React, Tailwind CSS, and shadcn/ui — no mockups needed. Generates bold, memorable designs from plain text requirements with anti-AI-slop aesthetics, mobile-first responsive patterns, and single-file bundling. Use when building landing pages, marketing sites, portfolios, dashboards, or any static web UI. Supports both Vite (pure static) and Next.js (Vercel deploy) workflows.
AI skill for automated UI audits. Evaluate interfaces against proven UX principles for visual hierarchy, accessibility, cognitive load, navigation, and more. Based on Making UX Decisions by Tommy Geoco.