谷歌浏览器插件

最新推荐文章于 2025-05-02 14:41:01 发布

人多势众

最新推荐文章于 2025-05-02 14:41:01 发布

阅读量309

点赞数 2

文章标签：前端 javascript 开发语言

本文链接：https://blog.youkuaiyun.com/weixin_38694958/article/details/138574257

版权

最主要的文件manifest.json 插件的配置文件

{
  "manifest_version": 3,  
  "name": "GE-iconnect",  
  "description": "小工具",  
  "version": "1.0",  
  "icons": {
	"16": "logo.ico",
    "48": "logo.ico"
  },
  //也就是后台服务，主要是负责处理和监听浏览器的各类事件。后台服务可以使用所有ChromeAPI，但是不能直接与网页内容交互。
  "background": {
    "service_worker": "background.js"
  },
"permissions": [
    "activeTab","tabs","notifications"
  ],
  "action": {
	"default_popup": "main.html" // optional
	},
  //从配置中可得知内容脚本的注册规则：当网址匹配上“https://baidu.com/*”时，运行content.js脚本。
  "content_scripts": [
    {
      "js": [
        "content.js"
      ],
      "matches": [
        "https://www.baidu.com/*"
      ]
    }
  ]
}

background.js 后台运行的js可以调用谷歌api 权限很高

// 监听打开新页面
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.type === 'OPEN_PAGE') {
    chrome.tabs.create({ url: message.url });
  }
});

content.js 监听文件当访问百度触发，可设置

var websock = null; //建立的连接
var lockReconnect = false; //是否真正建立连接
var timeout = 20 * 1000; //20秒一次心跳
var timeoutObj = null; //心跳心跳倒计时
var serverTimeoutObj = null; //心跳倒计时
var timeoutnum = null; //断开 重连倒计时
var instanceNotification = Notification || window.Notification; // 20240410 添加系统通知功能
//503194915

document.getElementById('sendBu').addEventListener('click', function() {
	//连接检测权限
    setPermission();
	//初始化webscoket
	initWebSocket();
});



function initWebSocket() {
	//建立连接
	//初始化weosocket
	//weosocket 地址
	let userName = $("#queryText").val();
	const wsuri = 'ws://localhost:8080/websocket/' + userName
	websock = new WebSocket(wsuri);
	// WebSocket接受到服务端消息
	websock.addEventListener('open',function(event){			
		//连接成功事件
		websocketsend('发送数据');
		//提示成功
		$("#msg").append("<p style='color:blue;margin:0;'>[" + getTime() + "] 连接成功</p>");
		//开启心跳
		start();
	})	  
	// WebSocket接受到服务端消息
	websock.addEventListener('message',function(event){
		//接收服务器推送的信息
		//打印收到服务器的内容
		console.log('收到服务器信息', event.data);
		$("#msg").append('[' + getTime() + ']  收到服务器信息: '+ event.data + '<br>');
		let data = event.data
		if (data == 'open') {
		  // 20240410 添加系统通知功能
		  creatNotification();
		}
		if (data == 'openFlag') {
		  // 20240410 添加系统通知功能
		  creatNotificationMp3();
		}
		//收到服务器信息，心跳重置
		reset();
	})
	// WebSocket 连接被关闭
	websock.addEventListener('close',function(event){
				
		//检测客户机网络
		if (navigator.onLine) {
			$("#msg").append("<p style='color:blue;margin:0;'>[" + getTime() + "]---客户机网络正常服务器断开</p>");
		} else {
			$("#msg").append("<p style='color:blue;margin:0;'>[" + getTime() + "]---客户机网络断开</p>");
		}
		
		//重连
		reconnect();
	})
	// WebSocket 连接因错误而关闭
	websock.addEventListener('error',function(event){
		$("#msg").append("<p style='color:red;margin:0;'>[" + getTime() + "]---WebSocket连接发生错误</p>");
		//重连
		reconnect()
	})
};
	  

function reconnect() {
	console.log('连接重试中请稍等');
	
	//重新连接
	if (lockReconnect) {
	  return
	}
	lockReconnect = true
	//没连接上会一直重连，设置延迟避免请求过多
	timeoutnum && clearTimeout(timeoutnum)
	timeoutnum = setTimeout(function() {
	 //新连接
	initWebSocket();
	lockReconnect = false
	}, 5000)
};

function reset() {
	//重置心跳
	var that = this
	//清除时间
	clearTimeout(timeoutObj);
	clearTimeout(serverTimeoutObj);
	//重启心跳
	start();
};

function start() {
	//开启心跳
	timeoutObj && clearTimeout(timeoutObj)
	serverTimeoutObj && clearTimeout(serverTimeoutObj)
	timeoutObj = setTimeout(function() {
	  //这里发送一个心跳，后端收到后，返回一个心跳消息
	  if (websock.readyState == 1) {
		//如果连接正常
		websock.send('heartbeat');
	  } else {
		//否则重连
		reconnect()
	  }
	  serverTimeoutObj = setTimeout(function() {
		//超时关闭
		websock.close();
	  }, timeout)
	}, timeout)
};

function  websocketsend(msg) {
	//向服务器发送信息
	websock.send(msg);
}	  
	  
	
function setPermission() {
	//请求获取通知权限
	instanceNotification.requestPermission(function(PERMISSION) {
	  if (PERMISSION === 'granted') {
		$("#msg").append("<p style='color:green;margin:0;'>[" + getTime() + "]---用户允许通知了</p>");
		//creatNotification();
	  } else {
		$("#msg").append("<p style='color:green;margin:0;'>[" + getTime() + "]---用户拒绝了</p>");
	  }
	})
};
	
// 创建通知	
function creatNotification() {
	if (!window.Notification) {
	  alert('浏览器不支持通知！');
	  return false
	}
	console.log(window.Notification.permission);
	if (window.Notification.permission != 'granted') {
	$("#msg").append("<p style='color:green;margin:0;'>[" + getTime() + "]---用户未开启通知权限</p>");
	  return false
	}
	const options = {
	  body: "",
	  silent: true,
	  requireInteraction:true
	};
	var instanceNotification = new Notification("尚有新报修单待处理，请及时受理！！！", options);
	instanceNotification.onshow = function() {
	$("#msg").append("<p style='color:green;margin:0;'>[" + getTime() + "]---无声弹框通知开启</p>");
	  //3s后自动关闭通知
	  setTimeout(function() {
		instanceNotification.close();
	  }, 3 * 1000)
	}
	instanceNotification.onclick = function() {
	  alert('打开页面');
	  window.open('/note');
	  instanceNotification.close();
	}
	instanceNotification.onclose = function() {
		$("#msg").append("<p style='color:green;margin:0;'>[" + getTime() + "]---无声弹框通知关闭</p>");
	}
	instanceNotification.onerror = function() {
		$("#msg").append("<p style='color:red;margin:0;'>[" + getTime() + "]---无声弹框通知异常</p>");
	}
};

// 创建声音通知
function creatNotificationMp3() {
	if (!window.Notification) {
	  alert('浏览器不支持通知！')
	  return false
	}
	console.log(window.Notification.permission);
	if (window.Notification.permission != 'granted') {
		$("#msg").append("<p style='color:green;margin:0;'>[" + getTime() + "]---用户未开启通知权限</p>");
	  return false
	}
	const options = {
	  body: "",
	  silent: false,
	  requireInteraction:true
	};
	var instanceNotification = new Notification("尚有新报修单待处理，请及时受理！！！", options);
	instanceNotification.onshow = function() {
		$("#msg").append("<p style='color:green;margin:0;'>[" + getTime() + "]---有声弹框通知开启</p>");
		//3s后自动关闭通知
		setTimeout(function() {
		instanceNotification.close();
		}, 3 * 1000)
	}
	instanceNotification.onclick = function() {
		alert('打开页面');
		window.open('/note');
		instanceNotification.close();
	}
	instanceNotification.onclose = function() {
		$("#msg").append("<p style='color:green;margin:0;'>[" + getTime() + "]---有声弹框通知关闭</p>");
	}
	instanceNotification.onerror = function() {
		$("#msg").append("<p style='color:red;margin:0;'>[" + getTime() + "]---有声弹框通知异常</p>");
	}
};


// 获取时间
function getTime(){
	var currentTime = new Date();
    var timeString = currentTime.toISOString(); // 转换为ISO格式的字符串
 
    // 如果你需要不同的格式，可以使用Date对象的其他方法进行格式化
    // 例如：时间格式为 "YYYY-MM-DD HH:mm:ss"
    var formattedTime = currentTime.getFullYear() + '-' +
                        ('0' + (currentTime.getMonth() + 1)).slice(-2) + '-' +
                        ('0' + currentTime.getDate()).slice(-2) + ' ' +
                        ('0' + currentTime.getHours()).slice(-2) + ':' +
                        ('0' + currentTime.getMinutes()).slice(-2) + ':' +
                        ('0' + currentTime.getSeconds()).slice(-2);
 
    //console.log(timeString); // 输出ISO字符串
    //console.log(formattedTime); // 输出格式化的时间字符串
	
	return formattedTime;

}

popup.html 主要页面

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
    <title>webscoket_tool</title>
	
</head>
<body>
<div>iconnect 报警辅助工具</div>
<div id="data">
	用户名：<input id="queryText" type="input"  value="" />
	密码：<input id="password" type="password" value="" />
	<button id="sendBu">打开连接</button>
	<div id="msg" >
			
	</div>
</div>

</body>
</html>
<script src="jquery.min.js" ></script>
<script src="popup.js"></script>

main.html 过度页面

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
    <title>webscoket_tool</title>
</head>
<body>
</body>
</html>
<script src="jquery.min.js" ></script>
<script src="main.js"></script>

main.js

chrome.runtime.sendMessage({ type: 'OPEN_PAGE', url: 'popup.html' });