用sessionStorage编写一个浏览器标签页管理器(sessionstorage存储对象的应用)

能够对同一网站打开标签页进行管理,大量减少打开的标签页数量,并能保存属于同一网站(域名或子域名相同的网页)历史浏览记录方便浏览

1、打开站内链接在当前标签页打开并保存历史记录

2、打开站外链接或子域名链接在新标签页打开并重新保存历史记录

3、关闭所有相同域名网页自动清除相关历史记录

打开面板

 

关闭面板

源码

// ==UserScript==
// @name         Hi-history
// @namespace    http://tampermonkey.net/
// @version      1.03
// @description  获取网站浏览历史
// @author       chillybird
// @match        http://*/*
// @match        https://*/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
     if (self.frameElement && self.frameElement.tagName == "IFRAME") { 
		return;
	} 
	if (window.frames.length != parent.frames.length) { 
		return;
	} 
    document.body.addEventListener('mousedown',function(e){
		var name=location.hostname.split('.')[1];
		var c_name=location.hostname.split('.')[0];
		if((String(e.target).search(name)<0||String(e.target).search(c_name)<0)&&String(e.target).search("http")>=0){
			e.target.target = '_blank';}else if((String(e.target.parentNode).search(name)<0||String(e.target.parentNode).search(c_name)<0)&&String(e.target.parentNode).search("http")>=0){
				e.target.parentNode.target='_blank';}else if((String(e.target.parentNode.parentNode).search(name)<0||String(e.target.parentNode.parentNode).search(c_name)<0)&&String(e.target.parentNode.parentNode).search("http")>=0){
					e.target.parentNode.parentNode.target='_blank';}else if((String(e.target.parentNode.parentNode.parentNode).search(name)<0||String(e.target.parentNode.parentNode.parentNode).search(c_name)<0)&&String(e.target.parentNode.parentNode.parentNode).search("http")>=0){
						e.target.parentNode.parentNode.parentNode.target='_blank';}else if((String(e.target.parentNode.parentNode.parentNode.parentNode).search(name)<0||String(e.target.parentNode.parentNode.parentNode.parentNode).search(c_name)<0)&&String(e.target.parentNode.parentNode.parentNode.parentNode).search("http")>=0){
							e.target.parentNode.parentNode.parentNode.parentNode.target='_blank';}else{
                                if(String(e.target).search(name)>=0){
                                    e.target.target = '_self';}else if(String(e.target.parentNode).search(name)>=0){
                                        e.target.parentNode.target='_self';}else if(String(e.target.parentNode.parentNode).search(name)>=0){
                                            e.target.parentNode.parentNode.target='_self';}else if(String(e.target.parentNode.parentNode.parentNode).search(name)>=0){
                                                e.target.parentNode.parentNode.parentNode.target='_self';}else if(String(e.target.parentNode.parentNode.parentNode.parentNode).search(name)>=0){
                                                    e.target.parentNode.parentNode.parentNode.parentNode.target='_self';}else{}
                            }
		
	});
	//创建样式 
	var dom=document.createElement('style'),
	dom_body=document.getElementsByTagName('body')[0];
	dom.innerHTML='#markBook{position: fixed;left: -220px;top: 5px;z-index: 999;border-radius:5px;background-color: cornsilk;box-sizing: border-box;width: 220px;transition:all 400ms}.bookNav{ overflow: hidden;/*border-radius: 5px;*/}.del_mark{position: absolute;bottom: 0px;left:0px;}.bookNav,.del_mark{width: 100%;height: 28px;line-height: 28px;/*position: absolute;bottom: 0px;*/background-color: lightgray;font-size: 16px;color: #A9A9A9;/*border: 1px solid #000000;*/}.hismark_history{float: left;width: 70px;line-height: 28px;box-sizing: border-box;display: inline;height: 28px;text-align: center;font-size: 16px;color: #000;cursor: pointer;}.hismark_active{background-color: #BDBDBD;border-bottom: 2px solid #A9A9A9;box-sizing: border-box;}.exit{float:left;width: 150px;height: 28px;line-height: 28px;text-align:center;box-sizing: border-box;border-left: 2px solid #777777;cursor: pointer;}.exit:hover{color: red;}.history_notice{height: 280px;width: 190px;line-height: 40px;}.history_tab{display: block;padding: 10px;padding-bottom: 35px;}.hismark_del{float: right;width: 80px;height: 28px;line-height: 28px;font-size: 12px;text-align: center;color: #000;cursor:pointer}.hismark_del:hover{color: red;}.s_item{width:190px;height: 40px;border-bottom: 1px solid #000000;padding-left: 5px;line-height: 40px;overflow: hidden;text-overflow: ellipsis;}.s_item a{text-decoration: none;font-size: 14px;}.record_pull{position: absolute;top: 0px;left: 220px;width: 40px;height: 40px;background-color: lightgray;border-radius: 5px;line-height: 40px;font-size: 30px;color: #FFFFFF;text-align: center;cursor: pointer;transition:all 400ms}';
	dom_body.appendChild(dom);
	//创建标签
	dom=document.createElement('div');
	dom.id="markBook";
	var str="<div class='bookNav'><div class='hismark_history hismark_active'>历史</div><div class='exit'>退出</div></div>";
	hismark_init();
	//创建按钮
	str+="<div class='record_pull'>S</div>";
	dom.innerHTML=str;
	dom_body.appendChild(dom);
	var hist=document.getElementsByClassName('hismark_history')[0];
	var history_tab=document.getElementsByClassName('history_tab')[0];
	hist.addEventListener("mouseover",function(){
		hist.className="hismark_history hismark_active";history_tab.style.display='block';});
		
	//按钮事件
	var record_pull=document.getElementsByClassName("record_pull")[0];
	var markBook=document.getElementById('markBook');
	var exit_bnt=document.getElementsByClassName('exit')[0];
	record_pull.onclick=function(){
		markBook.style.left=5+"px";record_pull.style.top=0+"px";record_pull.style.right=0+"px";record_pull.style.display="none";
		//超出网页可视高度时固定高度,tab部分超出滚动,待改进
		var W_height=document.documentElement.clientHeight;
		var scroll_height=document.documentElement.clientHeight-86;
		var object_height=document.getElementById('markBook').clientHeight;
		var scroll_tab=document.getElementsByClassName("history_tab");
		if((object_height+40)>W_height){
			scroll_tab[0].style.height=scroll_height+"px";
			scroll_tab[0].style.overflow="scroll";
			scroll_tab[1].style.height=scroll_height+"px";
			scroll_tab[1].style.overflow="scroll";
		}
	};
	exit_bnt.onclick=function(){markBook.style.left=-220+"px";record_pull.style.top=0+"px";record_pull.style.right=-40+"px";record_pull.style.display="block";};
	
    
	function hismark_init(){
        if (top != window) {
	        console.log("Not a top window!");
	        return;
	    }
		//获取浏览记录
		if(!sessionStorage)
		{
			str+="<div class='history_notice'>浏览器不支持sessionStorage!</div>";
		}else{
            console.log('first record!');
			if(his_item_length()<1){
				//建立第一条记录
				sessionStorage.setItem('url_1',location.href);
				sessionStorage.setItem('url_1_name',(document.getElementsByTagName('title')[0]).innerHTML);
				str+="<div class='history_tab'><div class='s_item'><a href="+sessionStorage.getItem('url_1')+">1:"+sessionStorage.getItem('url_1_name')+"</a></div></div>";
			}else{
				console.log('continue!');
				history_tab();
			}
		}
	}
    function history_tab(){
		str+="<div class='history_tab'>";
		var url_name='url_'+(his_item_length()+1);
		if(find_history(window.location.href)){
			sessionStorage.setItem(url_name,window.location.href);
			sessionStorage.setItem(url_name+'_name',(document.getElementsByTagName('title')[0]).innerHTML);
		}
		for(var i=1;i<=his_item_length();i++){
			if(sessionStorage.getItem('url_'+i)!==null)
			{
				console.log("ok!");
				str+="<div class='s_item'><a href="+sessionStorage.getItem('url_'+i)+">"+i+":"+sessionStorage.getItem('url_'+i+'_name')+"</a></div>";
			}
		}
		str+="</div>";
	}
    function find_history(his_url){
    	var i=1;
    	var count=0;
    	while(sessionStorage.getItem('url_'+i)!==null){
    		if(sessionStorage.getItem('url_'+i)==his_url)
    			count=count+1;
    		if(count>0)
    			return false;
    		i=i+1;
    	}
    	return true;
    }
    
	function his_item_length(){
		var len=0;
		for(var i=1;i<=sessionStorage.length;i++)
		{
			if(sessionStorage.getItem('url_'+i)!==null)
				len=len+1;
		}
		return len;
	}
	var win_url=location.href;
	var cishu=0;
	setInterval(function(){
		if(win_url!==location.href){
			var url_name='url_'+(his_item_length()+1);
			
			if(find_history(location.href)){
				sessionStorage.setItem(url_name,window.location.href);
			 	sessionStorage.setItem(url_name+'_name',(document.getElementsByTagName('title')[0]).innerHTML);
	            var ele=document.createElement('div');
				ele.className="s_item";
				ele.innerHTML="<a href="+sessionStorage.getItem(url_name)+">"+(his_item_length())+":"+sessionStorage.getItem(url_name+'_name')+"</a>";
	            document.getElementsByClassName("history_tab")[0].appendChild(ele);
			}
			win_url=location.href;
			console.log(cishu);
			console.log(win_url);
		}else{
			console.log("*");
		}
	},3000);
    // Your code here...
})();

greasyfork:https://greasyfork.org/zh-CN/scripts/377485-hi-history

相关推荐:Aerys浏览器插件

 

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页