其他分享
首页 > 其他分享> > 谷歌浏览器插件-右键清除历史记录、统计选中字符串

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

作者:互联网

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

  其它案例参考地址: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)

标签:function,插件,浏览器,js,strValue,右键,字符串
来源: https://www.cnblogs.com/kawhileonardfans/p/10966207.html