还有一种插件，属于工具类插件，针对需要对浏览器做测试开发的人员，作为一个web前端人员，在调试的时候，除了需要利用浏览器本身的开发工具对网页做一些调试测试外，也需要针对默写特殊情况或者特殊网页做调试处理，比如VUE开发的调试工具：vue devtools。因为vue是进行数据驱动的，单从chrome里面进行element查看，查不到什么东西，必须要进行对数据动向进行关查。
接下来介绍关于开发者工具插件开发的流程：
配置
上篇讲的关于mainfest.json的配置中有一项是”devtools_page”: “devtools.html”，这个就是插件入口了，下面是我的插件的配置：
{
"manifest_version":2,
"name":"liao",
"version":"1.0.0",
"description":"This is my first extension,just for testing!",
"icons": {
"16": "images/16.png",
"48": "images/48.png",
"128": "images/128.png"
},
"browser_action":{
"default_icon":{
"16": "images/16.png",
"48": "images/48.png",
"128": "images/128.png"
},
"default_title":"Hello",
"default_popup":"popup.html"
},
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
"web_accessible_resources": ["mypanel.html", "devtools.html"],
"devtools_page": "devtools.html",
"background": {
"scripts": [ "background.js" ],
"persistent": true//默认打开，这样控制台上才会出现插件
},
"permissions":["<all_urls>", "webNavigation"],
"content_scripts":[
{
"js":["hook.js"],
"run_at": "document_start",
"matches":["<all_urls>"]
}
],
// 插件主页，这个很重要，不要浪费了这个免费广告位
"homepage_url": "https://luciferlia.github.io./"
}
插件入口是”devtools_page”: “devtools.html”
<meta charset="utf-8">
<script src="devtools.js"></script>
其实真正代码是devtools.js，html文件是“多余”的，不过它这样规定，那我们就按照他的规则来。
devtools.js
chrome.devtools.panels.create("My Panel",
"images/128.png",
"mypanel.html",
function(panel) {
// code invoked on panel creation
}
);
几个参数依次为：panel标题、图标（其实设置了也没地方显示）、要加载的页面、加载成功后的回调。 其中，mypanel.html是插件控制台的展示页面，相当于一个网站或引用的入口index，你可以在这个页面写上你想要的功能设计。
脚本和插件的通讯
进行到这里，开发者工具的大致框架差不多完成了，但是去看控制台，还是没有看到My Panel的工具，这是因为还没有进行通讯，详情可以看看chrome浏览器开发手册，有点麻烦，我查找了很多插件的源码以及和VUE devtools做对比后，写了一个简洁版的通讯脚本，记住在content_scripts里面的script里面调用，hook.js的代码：
function installHook (window) {
var listeners = {}
var hook = {
Vue: null,
on: function on (event, fn) {
event = '$' + event
;(listeners[event] || (listeners[event] = [])).push(fn)
},
once: function once (event, fn) {
event = '$' + event
function on () {
this.off(event, on)
fn.apply(this, arguments)
}
;(listeners[event] || (listeners[event] = [])).push(on)
},
off: function off (event, fn) {
event = '$' + event
if (!arguments.length) {
listeners = {}
} else {
var cbs = listeners[event]
if (cbs) {
if (!fn) {
listeners[event] = null
} else {
for (var i = 0, l = cbs.length; i < l; i++) {
var cb = cbs[i]
if (cb === fn || cb.fn === fn) {
cbs.splice(i, 1)
break
}
}
}
}
}
},
emit: function emit (event) {
var this$1 = this;
event = '$' + event
var cbs = listeners[event]
if (cbs) {
var args = [].slice.call(arguments, 1)
cbs = cbs.slice()
for (var i = 0, l = cbs.length; i < l; i++) {
cbs[i].apply(this$1, args)
}
}
}
}
}
打包发布
现在为止，一个基本的开发者工具插件已经完成了，详细的功能可以自己设计实现加进去，chrome浏览器安装后，按F12，就可以在控制台上看到一个My Panel 插件了，然后是打包发布。
一般来说，你可以直接将插件文件夹拖到浏览器插件设置那，就可以安装成功，但如果想要别人使用，有不让别人看到源码，就需要打包成.ctx文件发布了，具体的操作如下：
插件管理页有个打包扩展程序的按钮，点击后，选择扩展程序根目录，私钥选填，点击确定后就可以获得一个.ctx的文件了，当然你也可以发布到google应用商店去。