Chrome插件开发（四）

在前面我们编写了三个比较实用的插件，在实际工作中，我们还会使用很多其他的插件，比如掘金，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来排除自身，首先我们先定义两个变量：

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

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

 1 chrome.management.getAll(function(eInfo){
 2   var list = eInfo.map(function(ex) {
 3     if (ex.name === currentExtensionName) {
 4     return '';
 5   }
 6   var activeClass = ex.enabled ? 'fa-times' : 'fa-check';
 7   return '<li id="' + ex.id + '"><a href="' + 'javascript:void(0)" title="' + ex.shortName + '">' + ex.shortName + '</a><div class="icons"><span class="fa able ' + activeClass + '"></span><span class="fa trash fa-trash-o"></span></div></li>';
 8   });
 9   $list.html(list.join(''));
10 });

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

 1 $list.on('click', '.able', function() {
 2   var _this = $(this),
 3     _id = _this.parents('li').attr('id');
 4   chrome.management.get(_id, function(eInfo) {
 5     if (eInfo.enabled) {
 6       chrome.management.setEnabled(_id, false, function() {
 7       _this.removeClass('fa-times').addClass('fa-check');
 8       });
 9     } else {
10       chrome.management.setEnabled(_id, true, function() {
11       _this.removeClass('fa-check').addClass('fa-times');
12       });
13     }
14   });
15 });
16  
17 $list.on('click', 'a', function(