Chrome扩展需在manifest.json中正确声明devtools_page为根目录HTML文件（如"devtools.html"），并通过该页面调用chrome.devtools.panels.create()创建面板，图标路径须为扩展内相对路径且提供16×16/32×32两套尺寸；面板iframe无法直接调用chrome.devtools API，须经background page中转；需监听onNavigate/onDisconnect及时清理资源，并检查inspectedWindow有效性。
Chrome 扩展无法加载自定义 DevTools 面板？检查 manifest.json 的 devtools_page 声明
Chrome 不允许直接通过 content script 或 background script 注入 DevTools 面板，必须显式声明 devtools_page。漏写、路径错误或用了相对路径（如 ./devtools.html）都会导致面板完全不出现，且控制台无报错。
正确做法是：
-
devtools_page必须是根目录下的 HTML 文件路径（如"devtools.html"），不能带查询参数或 hash - 该 HTML 文件中只能通过
chrome.devtools.panels.create()创建面板，不能执行业务逻辑（比如发请求、操作 DOM）——那些得交给独立的 JS 脚本 - 确保
manifest.json中已声明"permissions": ["devtools"]（Chrome 111+ 已不强制，但旧版本仍需）
chrome.devtools.panels.create() 的第三个参数是图标路径，不是 URL 或 base64
这个参数常被误传为任意字符串，实际只接受扩展包内的相对路径（如 "icons/panel-16.png"），且图标必须满足尺寸要求：16×16 和 32×32（推荐提供两套适配高分屏）。传错路径不会报错，但面板图标显示为默认齿轮。
常见陷阱：
立即学习“前端免费学习笔记（深入）”；
- 路径含前导斜杠（
"/icons/..."）→ 失效 - 使用 data URL 或网络地址 → 完全忽略
- 图标文件未在
web_accessible_resources中声明 → 在某些 Chrome 版本下加载失败 - 未提供 32×32 图标 → 高分屏下模糊或 fallback 到 16×16 拉伸
面板 iframe 内无法直接访问 chrome.devtools API？用 chrome.runtime.getBackgroundPage() 中转
DevTools 面板本质是一个受限 iframe，它没有 chrome.devtools 的完整上下文（比如拿不到当前 inspectedWindow）。所有需要与调试目标交互的操作（如监听 network、注入脚本、读取 inspectedWindow.eval），都得通过 background page 或 service worker 中转。
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
典型通信链路：
- 面板页（
devtools.html）调用chrome.runtime.sendMessage({type: "getNetworkData"}) - background script 监听并调用
chrome.devtools.network.getHAR()等 API - 再把结果发回面板页渲染
注意：chrome.devtools.inspectedWindow.eval() 只能在 devtools_page 或 background 中调用，不能在面板 iframe 的 JS 里直调 —— 否则报 Cannot access 'chrome.devtools' from this context。
面板关闭后 background 仍在运行，但 inspectedWindow 引用会失效
DevTools 面板关闭不等于调试会话结束。只要 DevTools 窗口开着，background page 就持续存活，但 chrome.devtools.inspectedWindow 对象只在面板激活时有效。一旦用户切换到 Elements / Console 面板，你的监听可能突然收不到事件。
安全做法：
- 监听
chrome.devtools.inspectedWindow.onNavigate和onDisconnect，及时清理定时器、WebSocket 或 event listener - 每次调用
inspectedWindow.eval前，先检查chrome.devtools.inspectedWindow.tabId是否仍有效（可对比当前 active tab） - 避免长期持有对
inspectedWindow的引用 —— 它不是稳定对象，而是会随调试目标变化而重置
最易忽略的一点：本地开发时反复 reload 扩展，background page 不重启，但 inspectedWindow 状态已不同步，此时手动刷新 DevTools 窗口才能恢复。
