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

时间 2019-11-07

原文原文链接

上一篇中简单的接触了chrome插件，而且草草的制做一个chrome 插件（-_-只中看，不能用）；此次主要学习，browse action api制做菜单制做和调用系统提醒。html

browse action

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

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

图标

图标优化：最好是19px，这样基本占满，能够直接使用图标也能够用h5 canvas element，同时，图片必定要是背景透明的。canvas

ps处理后页面效果以下：api

tooltip

直接设置default_title 效果是鼠标通过显示标题效果工具

badge:

这个至关于设置图片文字和背景色：提供了两个方法：设置badge文字和颜色能够分别使用setBadgeText()andsetBadgeBackgroundColor()。学习

pophtml：建立菜单

上码：能用代码说话的，不用文字
js优化

/**
 * @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);
    }
});

htmlui

<!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>

效果图
spa

调用系统提醒

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

chrome32 以前的预警接口不太同样，文档中已经说明。
使用预警必定要加上权限统一

"permissions": [
    "notifications"
  ],

调用系统提醒代码

// 用户受权
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");
        };

    }
}

初次进去提醒，受权

提醒效果如右上角所示

经过菜单和提醒，咱们基本就能够完成一个简单的闹钟提醒，每隔30分钟提醒，码农扭扭脑壳，伸伸懒腰，当心肩周炎-_-!

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