Chrome插件開發（四）

時間 2019-11-07

標籤 chrome 插件開發欄目 Chrome 简体版

原文原文鏈接

在前面咱們編寫了三個比較實用的插件，在實際工做中，咱們還會使用不少其餘的插件，好比掘金，Pocket之類的，咱們可能須要常常啓用或禁用插件或者刪除插件，若是每次都要點到更多工具->擴展程序中去作這些操做，會至關煩躁，本節咱們將實現一個能夠方便管理插件的插件，咱們先看看插件運行的截圖：javascript

插件實現了對其餘插件的啓用/禁用/移除等功能，下面咱們來講一下如何實現這個插件。css

老規矩，在正式開始編寫以前，咱們先了解一下須要使用到的API：html

一、chrome.management.getAll 返回全部已安裝的擴展java

二、chrome.management.get 根據ID獲取某一個插件的詳細信息jquery

三、chrome.management.setEnabled 啓用/禁用一個插件chrome

四、chrome.management.uninstall 從已經安裝列表中移除一個插件json

關於chrome.management相關API的使用方法，能夠參考：http://open.chrome.360.cn/extension_dev/management.html工具

因爲咱們使用了chrome.management相關API，因此咱們須要在manifest.json文件中申請management權限。this

接下來咱們就開始編寫插件，首先咱們須要渲染出插件列表，固然要排除自身，否則一不當心禁用或移除了自身，那還管理個毛，咱們這裏經過插件的name來排除自身，首先咱們先定義兩個變量：spa

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() {
18   var _this = $(this),
19     _li = _this.parents('li'),
20     _able = _li.find('.able'),
21     _id = _li.attr('id');
22   chrome.management.get(_id, function(eInfo) {
23     if (eInfo.enabled) {
24       chrome.management.setEnabled(_id, false, function() {
25       _able.removeClass('fa-times').addClass('fa-check');
26       });
27     } else {
28       chrome.management.setEnabled(_id, true, function() {
29       _able.removeClass('fa-check').addClass('fa-times');
30       });
31     }
32   });
33 });
34  
35 $list.on('click', '.trash', function() {
36   var _this = $(this),
37     _li = _this.parents('li'),
38     _id = _li.attr('id');
39   chrome.management.uninstall(_id, function() {
40     if (chrome.runtime.lastError) {
41       console.log(chrome.runtime.lastError.message);
42     } else {
43       _li.fadeOut('normal', function() {
44         _li.remove();
45       });
46     }
47   });
48 });

上面就是咱們如何實現的思路，接下來看一下目錄結構：

核心mainfest.json代碼

 1 {
 2     "name" : "ExtensionManagement",
 3     "version" : "1.0",
 4     "description" : "管理chrome擴展",
 5     "manifest_version" : 2,
 6     "icons": {
 7         "16": "images/ico-48.png",
 8         "48": "images/ico-48.png",
 9         "128": "images/ico-48.png"
10     },
11     "permissions" : ["management", "https://*/*","http://*/*"],
12     "browser_action" : {
13     "default_popup" : "popup.html"
14     }
15 }

popup.html 代碼

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>擴展管理頁</title>
 5     <link rel="stylesheet" type="text/css" href="css/style.css">
 6     <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
 7 </head>
 8 <body>
 9 <ul id="list"></ul>
10 <script type="text/javascript" src="js/jquery.min.js"></script>
11 <script type="text/javascript" src="js/popup.js"></script>
12 </body>
13 </html>

style.css 代碼

 1 #list {
 2     padding: 0;
 3     margin: 0;
 4     list-style-type: none;
 5     font-family: 'Microsoft Yahei';
 6     padding: 0 15px;
 7     font-size: 16px;
 8 }
 9 
10 #list li {
11     height: 32px;
12     width: 250px;
13     line-height: 32px;
14     border-bottom: 1px dashed #eee;
15 }
16 
17 #list li a {
18     color: #000;
19     text-decoration: none;
20     white-space: nowrap;
21     overflow: hidden;
22     text-overflow: ellipsis;
23     width: 80%;
24     float: left;
25 }
26 
27 #list li .icons {
28     float: right;
29 }
30 
31 #list li .icons span {
32     margin-left: 10px;
33     cursor: pointer;
34 }
35 
36 #list li .icons span.fa-times {
37     color: #f00;
38 }
39 
40 #list li .icons span.fa-check {
41     color: #0f0;
42 }

popup.js 代碼

 1 var $list = $('#list');
 2 var currentExtensionName = 'ExtensionManagement';
 3 
 4 chrome.management.getAll(function (eInfo) {
 5     var list = eInfo.map(function (ex) {
 6         if (ex.name === currentExtensionName) {
 7             return '';
 8         }
 9         var activeClass = ex.enabled ? 'fa-times' : 'fa-check';
10         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>';
11     });
12     renderList(list);
13 });
14 
15 $list.on('click', '.able', function () {
16     var _this = $(this),
17         _id = _this.parents('li').attr('id');
18     chrome.management.get(_id, function (eInfo) {
19         if (eInfo.enabled) {
20             chrome.management.setEnabled(_id, false, function () {
21                 _this.removeClass('fa-times').addClass('fa-check');
22             });
23         } else {
24             chrome.management.setEnabled(_id, true, function () {
25                 _this.removeClass('fa-check').addClass('fa-times');
26             });
27         }
28     });
29 });
30 
31 $list.on('click', 'a', function () {
32     var _this = $(this),
33         _li = _this.parents('li'),
34         _able = _li.find('.able'),
35         _id = _li.attr('id');
36     chrome.management.get(_id, function (eInfo) {
37         if (eInfo.enabled) {
38             chrome.management.setEnabled(_id, false, function () {
39                 _able.removeClass('fa-times').addClass('fa-check');
40             });
41         } else {
42             chrome.management.setEnabled(_id, true, function () {
43                 _able.removeClass('fa-check').addClass('fa-times');
44             });
45         }
46     });
47 });
48 
49 $list.on('click', '.trash', function () {
50     var _this = $(this),
51         _li = _this.parents('li'),
52         _id = _li.attr('id');
53     chrome.management.uninstall(_id, function () {
54         if (chrome.runtime.lastError) {
55             console.log(chrome.runtime.lastError.message);
56         } else {
57             _li.fadeOut('normal', function () {
58                 _li.remove();
59             });
60         }
61     });
62 });
63 
64 function renderList(list) {
65     $list.html(list.join(''));
66 }