【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");
        };

    }
}

初次進去提醒，受權