Chrome插件开发系列五:插件管理器

原创 Dean 系列文章 二维码阅读
2018-10-24 22:15

在本系列前面几节中,我们编写了四个比较实用的插件,在实际工作中,我们还会使用很多其他的插件,比如掘金,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 '<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>';
  });
  $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();
        });
    }
  });
});

好了,插件编写系列到本节就结束了,其实如果要继续讲的话还有话题可以讲,但是讲来讲去也就那些东西,关键是思路,只要思路够清晰,剩下的就是一些API的调用了,当然我这边也还有编写一些其他的插件比如google访问啦,百度云视频外链生成工具啦之类的,有兴趣的朋友可以加我的联系方式私下聊。

最后附上插件的源码,如需下载,请点击这里

本文地址:https://www.deanhan.cn/chrome-extension-management.html
版权声明:本文为原创文章,版权归 Dean 所有,欢迎分享本文,转载请保留出处!
  • 支付宝二维码 支付宝
  • 微信二维码 微信