记录一下自己做的一个右键清除历史记录、统计选中字符串的谷歌插件。
其它案例参考地址:https://blog.csdn.net/shellching/article/details/78224230
360谷歌插件文档:http://open.chrome.360.cn/extension_dev/overview.html
该案例git地址:https://gitee.com/liguoqingxjxcc/gpe.git(包含清除CSDN、右键清除历史记录、统计选中字符串、计算器)
开始
文件结构
---- 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）
结束
结尾:仅供自己学习,记录问题和参考,若有带来误解和不便请见谅,共勉！