是的，Chrome允许插件在开发者工具(devtools)上动手脚，主要表现在：

• 自定义一个和多个和、Console、Sources等同级别的面板；

先来看2张简单的demo截图，自定义面板（判断当前页面是否使用了jQuery）：

自定义侧边栏（获取当前页面所有图片）：

来一张官方图片：

每打开一个开发者工具窗口，都会创建devtools页面的实例，F12窗口关闭，页面也随着关闭，所以devtools页面的生命周期和devtools窗口是一致的。devtools页面可以访问一组特有的DevTools API以及有限的扩展API，这组特有的DevTools API只有devtools页面才可以访问，background都无权访问，这些API包括：

• ：面板相关；
• chrome.devtools.inspectedWindow：获取被审查窗口的有关信息；

大部分扩展API都无法直接被DevTools页面调用，但它可以像content-script一样直接调用chrome.extension和API，同时它也可以像content-script一样使用Message交互的方式与background页面进行通信。

首先，要针对开发者工具开发插件，需要在清单文件声明如下：

这个devtools.html里面一般什么都没有，就引入一个js：

再来看devtools.js的代码：

setPage时的效果：

以下截图示例的代码：

修改了devtools页面的代码时，需要先在 chrome://extensions 页面按下Ctrl+R重新加载插件，然后关闭再打开开发者工具即可，无需刷新页面（而且只刷新页面不刷新开发者工具的话是不会生效的）。