Chrome扩展内容脚本调用devtools API报错，如何动态添加DevTools面板？

阿华AIGC实验室

2026-5-19

关于内容脚本调用DevTools API的问题解答

兄弟，先给你把核心结论摆出来：内容脚本（content-script）完全无法调用chrome.devtools系列API，这就是你碰到Uncaught TypeError: Cannot read property 'panels' of undefined报错的根本原因。

为什么会这样？

Chrome的扩展架构对不同运行上下文的API权限做了严格隔离：

内容脚本运行在目标网页的上下文环境中，只能访问有限的Chrome API（比如chrome.runtime、chrome.storage），chrome.devtools这类API不在其权限范围内。
你提到添加"devtools"权限不被允许？大概率是格式错了——这个权限在Manifest里需要以对象形式声明（比如"devtools": {}），但就算声明对了，内容脚本也用不了这个API，因为上下文不匹配。

正确创建自定义DevTools面板的步骤

要实现自定义DevTools面板，必须使用DevTools扩展页面，具体操作如下：

配置manifest.json
在扩展的清单文件里声明devtools_page字段，指向一个专门的HTML入口文件，同时正确声明devtools权限：

{
  "name": "我的自定义DevTools面板",
  "version": "1.0",
  "manifest_version": 3,
  "devtools_page": "devtools.html",
  "permissions": [],
  "devtools": {}
}

编写DevTools入口页面devtools.html
这个页面只需要引入一个JS文件，用来处理面板创建逻辑：
```

<!DOCTYPE html>
<html>
<body>
  <script src="devtools.js"></script>
</body>
</html>
```

在devtools.js中创建面板
只有在这个DevTools上下文的JS文件里，才能调用chrome.devtools.panels.create()：

// devtools.js
chrome.devtools.panels.create(
  "我的面板", // 面板显示名称
  "", // 可选：面板图标路径（留空则用默认图标）
  "panel-content.html", // 面板加载的内容页面
  (panel) => {
    // 面板创建成功后的回调，可添加初始化逻辑
    console.log("自定义DevTools面板已创建！");
  }
);

编写面板内容页面panel-content.html
这里就是你自定义面板的UI和业务逻辑，比如：

<!-- panel-content.html -->
<!DOCTYPE html>
<html>
<body style="padding: 16px;">
  <h3>这是我的自定义DevTools面板</h3>
  <p>可以在这里添加任何你需要的功能</p>
</body>
</html>