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 ...
随机推荐
- MYSQL-用户密码修改
解决方法如下:1.终端中结束当前正在运行的mysql进程.# sudo /etc/init.d/mysql stop2.用mysql安全模式运行并跳过权限验证.# sudo /usr/bin/mysq ...
- ng 目录详解
在新建的项目中需要我们关注的就是package.json和src文件夹 node_modules (项目所需依赖)是package.json所创建的模块安装到node_modules中 src:是代码 ...
- jQuery查找节点(选择器)
jQuery通过选择器来完成节点的查找: 1.基本选择器: ①通用/所有的选择器:$("*") //使用*号来表示. ②:标签选择器:$("标签名(div)") ...
- Eclipse的debug按钮介绍（三）
本文链接:https://blog.csdn.net/u011781521/article/details/55000066 http://blog.csdn.net/u010075335/ar ...
- JVM（一）内存分配
方法区: ①存储被虚拟机加载的类信息.常量.静态变量.即时编译器编译后的代码数据 ②又称为永久代,仅对于Hotspot来讲,JRockit和IBM J9里面没有永久代的概念,1.8以后是元空间,直接使 ...
- markdown + 七牛云，让写文更容易
常常写博文的人, 总有这样的烦恼: * 文章格式问题,各种文本编辑器格式不统一,在一处写好的文章复制到其他编辑器中格式错乱 * 图片问题,在不同的平台的图片需要重复上传,如果多平台发布很繁琐 由于这样 ...
- Step ‘Publish JUnit test result report’ failed: No test report files were found问题解决
1. 查看配置 2.路径设置错误,修改路径和path一致即可 修改后的测试报告路径 重新构建成功
- Cocos2d-x入门之旅[1]场景
在游戏开发过程中,你可能需要一个主菜单,几个关卡和一个END的界面,如何组织管理这些东西呢? 和其他游戏引擎类似,Cocos也使用了场景(Scene) 这个概念 试想象一部电影或是番剧,你不难发现它是 ...
- 区间 GCD
区间 GCD题目描述最近 JC 同学刚学会 gcd,于是迷上了与 gcd 有关的问题.今天他又出了一道这样的题目,想要考考你,你能顺利完成吗?给定一个长度为 n 的字符串 s[1..n],串仅包含小写 ...
- 【USACO 5.3.1】量取牛奶
农夫约翰要量取 Q(1 <= Q <= 20,000)夸脱(夸脱,quarts,容积单位——译者注) 他的最好的牛奶,并把它装入一个大瓶子中卖出.消费者要多少,他就给多少,从不有任何误差. ...