【chrome 插件二】添加菜单和添加消息提醒

上一篇中简单的接触了chrome插件,并且草草的制作一个chrome 插件(-_-只中看,不能用);这次主要学习,browse action api制作菜单制作和调用系统提醒

browse action

browse action 包括四部分:一个图标,一个tooltip,一个badge和一个pophtml
先上代码和效果

1
2
3
4
5
"browser_action": {
"default_title": "反劫持工具",
"default_icon": "image/icon_19.png",
"default_popup": "html/popup.html"
},

red

图标

图标优化:最好是19px,这样基本占满,可以直接使用图标也可以用h5 canvas element,同时,图片一定要是背景透明的

ps处理后页面效果如下:

title

tooltip

直接设置default_title 效果是鼠标经过显示标题效果

badge:

这个相当于设置图片文字和背景色:提供了两个方法:设置badge文字和颜色可以分别使用setBadgeText()andsetBadgeBackgroundColor()。

pophtml:创建菜单

上码:能用代码说话的,不用文字
js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
/**
* @author: cuixiaohuan
* Date: 16/4/19
* Time: 下午9:41
*/
/**
* 点击菜单的事件
*
* @param e
*/
function click(e) {
chrome.tabs.executeScript(null,
{
// 更改背景色
code: "document.body.style.backgroundColor='" + e.target.id + "'"
}
);
window.close();
}
/**
* 页面加载完成后,监听事件
*/
document.addEventListener('DOMContentLoaded', function () {
var divs = document.querySelectorAll('div');
for (var i = 0; i < divs.length; i++) {
divs[i].addEventListener('click', click);
}
});

html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Set Page Color Popup</title>
<style>
body {
overflow: hidden;
margin: 0px;
padding: 0px;
background: white;
}
div:first-child {
margin-top: 0px;
}
div {
cursor: pointer;
text-align: center;
padding: 1px 3px;
font-family: sans-serif;
font-size: 0.8em;
width: 100px;
margin-top: 1px;
background: #cccccc;
}
div:hover {
background: #aaaaaa;
}
#red {
border: 1px solid red;
color: red;
}
#blue {
border: 1px solid blue;
color: blue;
}
#green {
border: 1px solid green;
color: green;
}
#yellow {
border: 1px solid yellow;
color: yellow;
}
</style>
<script src="../script/changeBackgroud.js"></script>
</head>
<body>
<div id="red">红色小拽</div>
<div id="blue">绿色小拽</div>
<div id="green">蓝色小拽</div>
<div id="yellow">换色小拽</div>
</body>
</html>

效果图
blue

调用系统提醒

notification api 官方文档:https://developer.chrome.com/extensions/notifications
注意

  • chrome32 之前的预警接口不太一样,文档中已经说明。
  • 使用预警一定要加上权限统一
    1
    2
    3
    "permissions": [
    "notifications"
    ],

调用系统提醒代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
// 用户授权
if (Notification.permission == "granted") {
Notification.requestPermission();
}
/**
* 调用系统提醒
*
* 第一次进入页面需要授权,之后弹出提醒
*/
function notifyMe() {
if (!Notification) {
alert('Desktop notifications not available in your browser. Try Chromium.');
return;
}
if (Notification.permission !== "granted"){
Notification.requestPermission();
} else {
var notification = new Notification('小拽提醒', {
icon: 'http://cuihuan.net/wp-content/themes/quench-master/images/cuihuan_title.jpg',
body: "别点击,点击跳转'靠谱崔小拽'"
});
notification.onclick = function () {
window.open("http://cuihuan.net");
};
}
}

初次进去提醒,授权
notify_allow

提醒效果如右上角所示
notify

通过菜单和提醒,我们基本就可以完成一个简单的闹钟提醒,每隔30分钟提醒,码农扭扭脑袋,伸伸懒腰,小心肩周炎-_-!

【转载请注明:【chrome 插件二】弹出菜单和系统提醒学习 | 靠谱崔小拽

崔小拽 wechat
欢迎您扫一扫上面的微信公众号,订阅小拽的博客!