谷歌浏览器插件-右键清除历史记录、统计选中字符串

时间：2019-06-03 10:55:04 阅读：217 评论：0 收藏：0 [点我收藏+]

标签：代码段 params isp homepage obj 属性 mat png 记录

　　记录一下自己做的一个右键清除历史记录、统计选中字符串的谷歌插件。

　　其它案例参考地址:https://blog.csdn.net/shellching/article/details/78224230

　　360谷歌插件文档:http://open.chrome.360.cn/extension_dev/overview.html

　　该案例码云git地址:https://gitee.com/lgqxjxcc/gpe/tree/master/google-xjxcc-util-clear-count

开始

文件结构

---- google-xjxcc-util-clear-count（插件文件夹名称）

---- ---- img

---- ---- ---- icon.png (插件图标，随便放一个就可以了)

---- ---- ---- icon-count.png (右键统计选中字符串弹框的图标，随便放一个就可以了)

---- ---- js

---- ---- ---- background.js (鼠标右键操作的JS)

---- ---- ---- jquery-1.8.3.js (我没的文化、晓不得勒个是啥子)

---- ---- ---- popup.js (点击浏览器右上角插件图标弹出的页面对应的JS)

---- ---- manifest.json (插件主配置)

---- ---- popup.html (点击浏览器右上角插件图标弹出的页面)

1、首先上主配置文件---manifest.json

{
    // 清单文件的版本，这个必须写，而且必须是2
    "manifest_version": 2,
    // 插件的名称
    "name": "洗脚溪串串常用工具-清空历史记录、统计选中字符串",
    // 插件的版本
    "version": "1.0.0",
    // 插件描述
    "description": "里面包含了右键清空历史记录、右键统计选中字符串功能",
    // 图标，一般偷懒全部用一个尺寸的也没问题
    "icons":
    {
        "16": "img/icon.png",
        "48": "img/icon.png",
        "128": "img/icon.png"
    },
    // 会一直常驻的后台JS或后台页面
    "background":
    {
        "scripts": ["js/background.js"]
    },
    // 浏览器右上角图标设置，browser_action、page_action、app必须三选一
    "browser_action": 
    {
        "default_icon": "img/icon.png",
        // 图标悬停时的标题，可选
        "default_title": "清空历史记录、统计选中字符串",
        "default_popup": "popup.html"
    },
    // 权限申请
    "permissions":
    [
        "contextMenus", // 右键菜单
        "notifications", // 通知
        "history"// 历史
    ],
    // 插件主页，这个很重要，不要浪费了这个免费广告位
    "homepage_url": "https://blog.csdn.net/liguoqingxjxcc",
    // 默认语言
    "default_locale": "zh_CN"
}

2、点击插件展示的页面---popup.html

<!DOCTYPE html>
<html>
<head>
    <title>洗脚溪串串常用工具</title>
    <meta charset="utf-8"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
        body {
            font-family: ‘Microsoft Yahei‘;
            width: 300px;
            min-height: 100px;
        }
        a {margin-right: 10px;}
    </style>
    <!-- 
        注意:
        1、不支持内联JavaScript的执行   
           不能再标签中用onclick属性等，如果想用onclick功能，自己在js文件里面用$("").click();
        2、
    -->
</head>
<body>
    <div align="center">
        <h3>
            <a href="javascript:void(0)" class="openUrl" src="https://blog.csdn.net/liguoqingxjxcc">洗脚溪串串</a>
        </h3>
    </div>
    
    <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
    <script type="text/javascript" src="js/popup.js"></script>
</body>
</html>

3、点击插件展示的页面对应的JS---popup.js

$(function() {
    
});

//点击常用地址(这段代码不要放在$(function() {}里面，不然执行不了)
$(".openUrl").click(function (){
    var url = $(this).attr("src");
    var isNewWindow = "";
    
    //在新窗口中打开网页
    if(isNewWindow == "checked"){
        chrome.windows.create({url: url});
    //在新标签中打开网页
    }else{
        chrome.tabs.create({url: url});
    }
});

4、鼠标右键操作的JS文件---background.js

//-------------------- 右键菜单 ------------------------//
chrome.contextMenus.create({
    title: "清空历史记录",
    onclick: function(){
        chrome.history.deleteAll(function (obj){});
    }
});

chrome.contextMenus.create({
    title: ‘数据统计‘, // %s表示选中的文字
    contexts: [‘selection‘], // 只有当选中文字时才会出现此右键菜单
    onclick: function(params)
    {
        //获取字符串整个长度
        var allLength = params.selectionText.length.toString();
        //获取字符串中中文的长度
        var cnLength = getCnLength(params.selectionText).toString();
        //获取字符串中英文的长度
        var enLength = getEnLength(params.selectionText).toString();
        //获取字符串中数字的长度
        var numLength = getNumLength(params.selectionText).toString();
        
        chrome.notifications.create(null, {
            type: ‘list‘,
            iconUrl: ‘img/icon-count.png‘,
            title: ‘字符统计‘,
            message: "msg",
            items: [
                { title: "总计:", message: allLength},
                { title: "中文: " + cnLength + "  英文: " + enLength + "  数字: " + numLength, message: ""}
            ]
        });

    }
});

//获取字符串中中文的长度
function getCnLength(_strValue) {   
    return getLength(_strValue, /[\u4e00-\u9fa5]/g);    
} 
//获取字符串中数字的长度
function getEnLength(_strValue) {  
    return getLength(_strValue, /[a-z]/ig);    
} 
//获取字符串中数字的长度
function getNumLength(_strValue) {  
    return getLength(_strValue, /[0-9]/g);
} 
//获取字符串中满足这个正则表达式的值的长度
function getLength(_strValue, _reg){
    if(_strValue!= null && _strValue!= ""){  
        return _strValue.match(_reg).join("").length;
    } else  
        return 0;  
}

除了上面四个文件，还有两个图片和Jquery的文件。这三个文件随便找一个就行了。

使用插件:在谷歌浏览器-更多工具-扩展程序-打开开发者模式-加载已解压的扩展程序，选择你的文件夹（google-xjxcc-util-clear-count）

谷歌浏览器插件-右键清除历史记录、统计选中字符串

标签：代码段 params isp homepage obj 属性 mat png 记录

原文地址：https://www.cnblogs.com/kawhileonardfans/p/10966207.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行