Chrome技能使用说明

Chrome DevTools Protocol (CDP)

首先获取标签页的WebSocket URL：切勿直接连接至ws://localhost:9222/devtools/browser。请先获取http://localhost:9222/json/list中的数据，并使用webSocketDebuggerUrl字段，该字段对应活动标签页的连接地址。

使用前需启用相关域：Runtime.enable和Page.enable必须在执行任何Runtime.evaluate或Page.navigate命令之前调用。

CDP是异步的：发送下一条命令前需等待响应。建议使用基于Promise的封装，并跟踪响应ID。

在高DPI设备上截图：需包含fromSurface: true和scale: 2在Page.captureScreenshot参数中用于Retina显示屏。

单独获取响应体：Network.responseReceived不包含响应体。在响应完成后，调用Network.getResponseBody并传入requestId。

Chrome扩展程序清单V3

权限拆分：使用permissions用于API，host_permissions用于URL。切勿在权限中使用http://*/*。

Service workers会终止：无持久状态。使用chrome.storage.local而不是使用全局变量。使用chrome.alarms而不是setInterval。

内容脚本隔离：无法访问页面全局变量。使用chrome.scripting.executeScript配合func以在页面上下文中执行。使用window.postMessage进行内容脚本与页面的通信。

存储是异步的：chrome.storage.local.get()返回的是Promise，而非直接数据。务必使用await。处理QUOTA_EXCEEDED错误。

上下文检测

检测真正的Chrome（非Edge/Brave）：检查window.chrome && navigator.vendor === "Google Inc."并排除Opera/Edge。

扩展上下文类型:

• chrome.runtime.id存在 → 内容脚本
• chrome.runtime.getManifest存在 → 弹出窗口/后台/选项页面
• chrome.loadTimes存在但无runtime → 常规Chrome网页

清单版本检查: 将chrome.runtime.getManifest()包裹在try-catch中。使用chrome.action用于V3版本，chrome.browserAction用于V2版本。

性能调试

内存API条件检查: 在访问performance.memory.usedJSHeapSize之前，先检查'memory' in performance。

使用性能标记performance.mark()与performance.measure()用于子帧计时。清除标记以防止内存泄漏。布局抖动检测

：使用entryTypes: ['measure', 'paint', 'largest-contentful-paint']的PerformanceObserver。标记超过16.67毫秒的条目。网络调试

在导航前拦截

：在Page.navigate之前，而非之后，调用Network.setBlockedURLs。请求拦截

：使用Network.setRequestInterception并设置requestStage: 'Request'以进行精细控制。返回errorReason: 'BlockedByClient'以进行拦截。to block.

安全上下文

混合内容：HTTPS页面无法加载HTTP资源。请检查location.protocol与资源URL的对比。

CORS错误：TypeError在跨域请求时通常意味着CORS问题。请检查开发者工具中的网络标签页以获取具体错误信息。

需要安全上下文：文件系统访问API、剪贴板API要求window.isSecureContext === true以及用户手势操作。