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 ...
随机推荐
- .net core 3.0 Signalr - 06 业务实现-业务分析
## 业务需求 1. 人-项目关系 一个人可以属于多个项目,一个项目可以有多个人加入,通知的时候,可以通知项目内的所有人,也可以通知部分人或者某个责任人. 2. 登录互斥 同一个人不允许登录两次(不同 ...
- 简单动态字符串（SDS）
SDS 前提:在redis中,C字符串只会作为字符串字面量用在一些无须对字符串进行修改的地方,比如打印日志: redisLog(REDIS_WARNING, “Redis is ready to ex ...
- Docker 环境搭建（RedHat 7）
Docker 环境搭建(RedHat 7): CentOS7 下载 http://mirrors.sohu.com/centos/7/isos/x86_64/ 装载镜像文件 安装Linux 7, 参考 ...
- 【linux】Tomcat 安装
登录linux后,切换目录到 /usr/local cd /user/local 在/usr/local目录新建文件夹servers用于存放tomcat文件 mkdir servers 在文件夹ser ...
- Ubuntu部署Tomcat Web服务
在Ubuntu平台中安装TomCat 本文将为大家介绍TomCat在Ubuntu平台中如何进行部署使用,带你快速入门使用TomCat TomCat简介 Tomcat是Apache 软件基金会(Apac ...
- cookie和session,cookie和web storage
一.cookie和session cookie和session的共同之处在于:cookie和session都是用来跟踪浏览器用户身份的会话方式. session指的是访问者从到达某个特定页面到离开为止 ...
- .Net Core3.0使用gRPC
gRPC是什么 gRPC是可以在任何环境中运行的现代开源高性能RPC框架.它可以通过可插拔的支持来有效地连接数据中心内和跨数据中心的服务,以实现负载平衡,跟踪,运行状况检查和身份验证.它也适用于分布式 ...
- Snagit卸载不彻底的问题
Snagit是一款优秀的截图录屏软件,尤其是他的编辑器.方便的复制粘贴功能比较好用. 但是,卸载不完全绝对是一件烦人的事情. 可能的解决方案: 1.sfc /scannow >> CBS. ...
- Python编程系列---使用装饰器传参+字典实现动态路由
# 实现一个空路由表,利用装饰器将url和功能函数的对应关系自动存到这个字典中 router_dict = {} # 定义一个装饰器 # 再给一层函数定义,用来传入一个参数,这个参数就是访问的页面地址 ...
- 【原】centos上安装newman
1.安装node/npm 1.Newman(因为Newman是node编写,需要依赖nodejs):可以使用先下载安装包到 /usr/local路径下 /usr/local# wget https:/ ...