skills/chrome/SKILL.md (3244 bytes)
1 --- 2 name: Chrome 3 slug: chrome 4 version: 1.0.0 5 description: Chrome DevTools Protocol, extension Manifest V3, and debugging patterns that prevent common automation failures. 6 homepage: https://clawic.com/skills/chrome 7 metadata: 8 clawdbot: 9 emoji: 🌐 10 displayName: Chrome 11 --- 12 13 ## Chrome DevTools Protocol (CDP) 14 15 **Get 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. 16 17 **Enable domains before use**: `Runtime.enable` and `Page.enable` must be called before any `Runtime.evaluate` or `Page.navigate` commands. 18 19 **CDP is async**: Wait for response before sending next command. Use Promise-based wrapper with response ID tracking. 20 21 **Screenshot on high-DPI**: Include `fromSurface: true` and `scale: 2` in `Page.captureScreenshot` params for Retina displays. 22 23 **Get response body separately**: `Network.responseReceived` doesn't include body. Call `Network.getResponseBody` with requestId after response completes. 24 25 ## Chrome Extension Manifest V3 26 27 **Permissions split**: Use `permissions` for APIs, `host_permissions` for URLs. Never use `http://*/*` in permissions. 28 29 **Service workers terminate**: No persistent state. Use `chrome.storage.local` instead of global variables. Use `chrome.alarms` instead of `setInterval`. 30 31 **Content script isolation**: Can't access page globals. Use `chrome.scripting.executeScript` with `func` for page context. Use `window.postMessage` for content↔page communication. 32 33 **Storage is async**: `chrome.storage.local.get()` returns Promise, not data. Always await. Handle `QUOTA_EXCEEDED` errors. 34 35 ## Context Detection 36 37 **Detect actual Chrome** (not Edge/Brave): Check `window.chrome && navigator.vendor === "Google Inc."` and exclude Opera/Edge. 38 39 **Extension context types**: 40 - `chrome.runtime.id` exists → content script 41 - `chrome.runtime.getManifest` exists → popup/background/options 42 - `chrome.loadTimes` exists but no runtime → regular Chrome web page 43 44 **Manifest version check**: Wrap `chrome.runtime.getManifest()` in try-catch. Use `chrome.action` for V3, `chrome.browserAction` for V2. 45 46 ## Performance Debugging 47 48 **Memory API conditional**: Check `'memory' in performance` before accessing `performance.memory.usedJSHeapSize`. 49 50 **Use performance marks**: `performance.mark()` and `performance.measure()` for sub-frame timing. Clear marks to prevent memory leaks. 51 52 **Layout thrash detection**: PerformanceObserver with `entryTypes: ['measure', 'paint', 'largest-contentful-paint']`. Flag entries >16.67ms. 53 54 ## Network Debugging 55 56 **Block before navigate**: Call `Network.setBlockedURLs` before `Page.navigate`, not after. 57 58 **Request interception**: Use `Network.setRequestInterception` with `requestStage: 'Request'` for granular control. Return `errorReason: 'BlockedByClient'` to block. 59 60 ## Security Contexts 61 62 **Mixed content**: HTTPS pages can't load HTTP resources. Check `location.protocol` vs resource URL. 63 64 **CORS errors**: `TypeError` on cross-origin fetch usually means CORS. Check DevTools Network tab for specific error. 65 66 **Secure context required**: File System Access API, Clipboard API require `window.isSecureContext === true` and user gesture.