在前面我们编写了三个比较实用的插件，在实际工作中，我们还会使用很多其他的插件，比如掘金，Pocket之类的，我们可能需要经常启用或禁用插件或者删除插件，如果每次都要点到更多工具->扩展程序中去做这些操作，会相当烦躁，本节我们将实现一个可以方便管理插件的插件，我们先看看插件运行的截图：

插件实现了对其他插件的启用/禁用/移除等功能，下面我们来说一下如何实现这个插件。

老规矩，在正式开始编写之前，我们先了解一下需要使用到的API：

1、chrome.management.getAll 返回所有已安装的扩展

2、chrome.management.get 根据ID获取某一个插件的详细信息

3、chrome.management.setEnabled 启用/禁用一个插件

4、chrome.management.uninstall 从已经安装列表中移除一个插件

关于chrome.management相关API的使用方法，可以参考：http://open.chrome.360.cn/extension_dev/management.html

由于我们使用了chrome.management相关API，所以我们需要在manifest.json文件中申请management权限。

接下来我们就开始编写插件，首先我们需要渲染出插件列表，当然要排除自身，不然一不小心禁用或移除了自身，那还管理个毛，我们这里通过插件的name来排除自身，首先我们先定义两个变量：

var $list = $('#list');
var currentExtensionName = 'ExtensionManagement';

$list是渲染的容器节点，currentExtensionName定义的当前插件的名称，接下来，我们获取所有安装的插件排除自身并将其他的渲染出其他插件。

chrome.management.getAll(function(eInfo){
var list = eInfo.map(function(ex) {
if (ex.name === currentExtensionName) {
return '';
}
var activeClass = ex.enabled ? 'fa-times' : 'fa-check';
return '

' + ex.shortName + '

';
});
$list.html(list.join(''));
});

现在我们已经将插件渲染到了页面中，并按照其状态添加了启用/禁用/移除等链接，接下来我们就需要实现启用/禁用/移除等功能了。

$list.on('click', '.able', function() {
var _this = $(this),
_id = _this.parents('li').attr('id');
chrome.management.get(_id, function(eInfo) {
if (eInfo.enabled) {
chrome.management.setEnabled(_id, false, function() {
_this.removeClass('fa-times').addClass('fa-check');
});
} else {
chrome.management.setEnabled(_id, true, function() {
_this.removeClass('fa-check').addClass('fa-times');
});
}
});
});

$list.on('click', 'a', function() {
var _this = $(this),
_li = _this.parents('li'),
_able = _li.find('.able'),
_id = _li.attr('id');
chrome.management.get(_id, function(eInfo) {
if (eInfo.enabled) {
chrome.management.setEnabled(_id, false, function() {
_able.removeClass('fa-times').addClass('fa-check');
});
} else {
chrome.management.setEnabled(_id, true, function() {
_able.removeClass('fa-check').addClass('fa-times');
});
}
});
});

$list.on('click', '.trash', function() {
var _this = $(this),
_li = _this.parents('li'),
_id = _li.attr('id');
chrome.management.uninstall(_id, function() {
if (chrome.runtime.lastError) {
console.log(chrome.runtime.lastError.message);
} else {
_li.fadeOut('normal', function() {
_li.remove();
});
}
});
});

上面就是我们如何实现的思路，接下来看一下目录结构：

核心mainfest.json代码

{
"name" : "ExtensionManagement",
"version" : "1.0",
"description" : "管理chrome扩展",
"manifest_version" : 2,
"icons": {
"16": "images/ico-48.png",
"48": "images/ico-48.png",
"128": "images/ico-48.png"
},
"permissions" : ["management", "https://*/*","http://*/*"],
"browser_action" : {
"default_popup" : "popup.html"
}
}

popup.html 代码

style.css 代码

#list {
padding:;
margin:;
list-style-type: none;
font-family: 'Microsoft Yahei';
padding: 0 15px;
font-size: 16px;
}

#list li {
height: 32px;
width: 250px;
line-height: 32px;
border-bottom: 1px dashed #eee;
}

#list li a {
color: #000;
text-decoration: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 80%;
float: left;
}

#list li .icons {
float: right;
}

#list li .icons span {
margin-left: 10px;
cursor: pointer;
}

#list li .icons span.fa-times {
color: #f00;
}

#list li .icons span.fa-check {
color: #0f0;
}

popup.js 代码

var $list = $('#list');
var currentExtensionName = 'ExtensionManagement';

chrome.management.getAll(function (eInfo) {
var list = eInfo.map(function (ex) {
if (ex.name === currentExtensionName) {
return '';
}
var activeClass = ex.enabled ? 'fa-times' : 'fa-check';
return '

' + ex.shortName + '

';
});
renderList(list);
});

$list.on('click', '.able', function () {
var _this = $(this),
_id = _this.parents('li').attr('id');
chrome.management.get(_id, function (eInfo) {
if (eInfo.enabled) {
chrome.management.setEnabled(_id, false, function () {
_this.removeClass('fa-times').addClass('fa-check');
});
} else {
chrome.management.setEnabled(_id, true, function () {
_this.removeClass('fa-check').addClass('fa-times');
});
}
});
});

$list.on('click', 'a', function () {
var _this = $(this),
_li = _this.parents('li'),
_able = _li.find('.able'),
_id = _li.attr('id');
chrome.management.get(_id, function (eInfo) {
if (eInfo.enabled) {
chrome.management.setEnabled(_id, false, function () {
_able.removeClass('fa-times').addClass('fa-check');
});
} else {
chrome.management.setEnabled(_id, true, function () {
_able.removeClass('fa-check').addClass('fa-times');
});
}
});
});

$list.on('click', '.trash', function () {
var _this = $(this),
_li = _this.parents('li'),
_id = _li.attr('id');
chrome.management.uninstall(_id, function () {
if (chrome.runtime.lastError) {
console.log(chrome.runtime.lastError.message);
} else {
_li.fadeOut('normal', function () {
_li.remove();
});
}
});
});

function renderList(list) {
$list.html(list.join(''));
}