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来排除自身，首先我们先定义两个变量：
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();
});
}
});
});
上面就是我们如何实现的思路，接下来看一下目录结构：
核心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 代码
<!DOCTYPE html>
<html>
<head>
<title>扩展管理页</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
</head>
<body>
<ul id="list"></ul>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/popup.js"></script>
</body>
</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 '<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>';
});
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(''));
}
Chrome插件开发（四）的更多相关文章
- Chrome插件开发，美化网页上的文件列表。chrome-extension，background
上一篇文章 通过“content-scripts”的方式向页面注入js和css来美化页面,但是有一个弊端:一旦配置好需要注入的页面,之后如果这个页面地址以后发生变化,或者要新加一些URL进来,那么得修 ...
- Chrome插件开发，美化网页上的文件列表。chrome-extension，content-scripts
趁着2018年还剩最后几天,发几篇博客,荒废太久了,惭愧. 最近也是需求驱动,研究了下Chrome插件开发.来看一下我们公司运维提供的日志查看页面 所有项目的日志都参杂在一起,每次去找都很痛苦.慢慢发 ...
- chrome插件开发-消息机制中的bug与解决方案
序言 最近开发chrome插件,涉及到消息传递机时按照教程去敲代码,结果总是不对.研究了大半天终于找到原因,现在记录下. 程序 插件程序参考官网 chrome官网之消息传递机制, 不能FQ的同事也可以 ...
- Chrome插件开发入门（二）——消息传递机制
Chrome插件开发入门(二)——消息传递机制 由于插件的js运行环境有区别,所以消息传递机制是一个重要内容.阅读了很多博文,大家已经说得很清楚了,直接转一篇@姬小光 的博文,总结的挺好.后面附一 ...
- vue.js 初体验— Chrome 插件开发实录
欢迎大家关注腾讯云技术社区-博客园官方主页,我们将持续在博客园为大家推荐技术精品文章哦~ 作者:陈纬杰 背景 对于经常和动画开发打交道的开发者对于Animate.css这个动画库不会陌生,它把一些常见 ...
- [Chrome插件开发]001.入门
Chrome插件开发入门 Chrome扩展文件 Browser Actions(扩展图标) Page Actions(地址栏图标) popup弹出窗口 Background Pages后台页面 实战讲 ...
- chrome插件开发学习（一）
两个不错的网址: 360chrome插件开发文档:http://open.chrome.360.cn/extension_dev/manifest.html 图灵 chrome插件开发于应用 电子书: ...
- 入门chrome插件开发教程和经验总结，一篇就搞掂！
版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/weixin_44244857/articl ...
- Chrome插件开发入门
最近学习了Chrome插件的开发,总体来说上手还是很容易的,因为浏览器插件本质上依旧是网页,写几个demo基本就了解了他的开发过程. 完整项目:xmy6364/chrome-extension-get ...
随机推荐
- uC/OS-III 时间管理（二）
时间管理就是一种建立在时钟节拍上,对操作系统任务的运行实现时间上管理的一种系统内核机制. 常用以下五个函数: OSTimeDly() OSTimeDlyHMSM() OSTimeDlyResume() ...
- 电脑链接WiFi有网络不能上网问题
刚刚入手了一个小米book pro笔记本突然发现网络链接了,但是却上不了网.找了n种方法,最后发现问题在于电脑的网络适配器中的无线模式出现了问题,下面开始解决方案的详细步骤说明. 一 . 打开电脑管理 ...
- Kafka 学习笔记之 删除Topic
删除Topic 1. 显示所有Topic信息,testTopic是我们将要删除的Topic 2. 首先确认server.properties下面配置是否已经加上delete.topic.enable= ...
- Vue三步完成跨域请求
三步完成跨域请求 ①main.js中: Vue.prototype.HOME = '/api'; ② config/index.js中: module.exports = { dev: { // Pa ...
- hihocoder 数论二·Eular质数筛法
数论二·Eular质数筛法 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 小Ho:小Hi,上次我学会了如何检测一个数是否是质数.于是我又有了一个新的问题,我如何去快速得 ...
- .Net Core中的ObjectPool
一.对象池 运用对象池化技术可以显著地提升性能,尤其是当对象的初始化过程代价较大或者频率较高.下面是ObjectPool源码中涉及的几个类.当你看过.Net Core源码很多时,你会发现,微软的开发很 ...
- top命令之性能分析
top命令详解 当前时间20:27:12 当前系统运行时间3:18秒 1个用户 系统负载平均长度为0.00,0.00,0.00(分别为1分钟.5分钟.15分钟前到现在的平均值) 第二行为进程 ...
- PE 文件格式详解
PE文件 是微软 Win32 环境下可执行文件的标准格式. 所谓的可执行文件并不仅仅是常见的 EXE 文件,DLL,SYS,VXD 等文件也都属于 PE 格式. |-------> DOS_MZ ...
- 攻防世界(XCTF)WEB(进阶区)write up(三)
挑着做一些好玩的ctf题 FlatScience web2 unserialize3upload1wtf.sh-150ics-04web i-got-id-200 FlatScience 扫出来的lo ...
- WCE-hash注入工具使用
wce的使用说明如下 参数解释:-l 列出登录的会话和NTLM凭据(默认值)-s 修改当前登录会话的NTLM凭据 参数:<用户名>:<域 ...