JavaScript编写FireFox插件

使用JS实现FireFox插件,实现提取页面图片,并下载

function init() {
	let btnFlag = document.getElementById("__flag__");
	let btnGot = document.getElementById("__got__");
	let btnDownload = document.getElementById("__down__");
	let btnSave = document.getElementById("__save__");
	let btnSelection = document.getElementById("__SelectAll__");
	let btnUnSelection = document.getElementById("__UnSelect__");
	
	let pnlMode = document.getElementById("__mode__");
	let table = document.getElementById("__tab__");
	let btnSetup = document.getElementById("__set__");
	let btnCopy = document.getElementById("__copy__");
	let txtNum = document.getElementById("__num__");
	let txtTitle = document.getElementById("__title__");
	let chkHttps = document.getElementById("__https__");

	
	let global_imgs = [];
	


	function calcSelNum() {
		let n = 0;
		for (let i=0; i<table.rows.length; i++) {
			for (let j=0; j<table.rows[i].cells.length; j++) {
				let img = table.rows[i].cells[j].firstChild ;
				if (img && table.rows[i].cells[j].style.backgroundColor =="red") {
					n++;
				}
			}
		}
		txtNum.value = n;
	}
	
	function getExtendsName(url) {
		let name = url.substring( url.lastIndexOf("/") + 1);
		let s = name.substring( name.lastIndexOf(".") + 1);
		if (s.length <=4 )
			return s
		else 
			return null;
	}

	function showInMode() {
		while ( pnlMode.childNodes.length > 0) {
			pnlMode.removeChild(pnlMode.firstChild);
		}

		let set = new Set(global_imgs.map(x=>getExtendsName(x)));
		set.forEach( n => {
			if (n != null) {
				let chk  = document.createElement("input");
				chk.type = "checkbox";
				chk.value = n;
				chk.checked = true;
				chk.addEventListener("click", function() {
					showInTable(findMode() );
				});
				
				pnlMode.appendChild(chk);
				pnlMode.appendChild(  document.createTextNode("."+n) );
			}
		});
	}
	
	function findMode() {
		let chks = document.querySelectorAll("input[type='checkbox']");
		var a = [];
		for (let i=0; i<chks.length; i++) {
			if (chks[i].checked )
				a.push(chks[i].value);
		}
		return a;
	}
	
	function showInTable() {
		let set = new Set(findMode());
		
		let mat = [];
		global_imgs.forEach(function(m) {
			if (chkHttps.checked == false && m.startsWith("https://") ) {
				return ;
			}
			if (set.has( getExtendsName(m))) {
				mat.push(m);
			}
		});
		
		while ( table.rows.length > 0) {
			table.deleteRow(0);
		}
		
		let r = mat.length % COLS == 0 ? Math.floor(mat.length / COLS) : Math.floor(mat.length / COLS) +1, c = 0;
		
		for (let i=0; i<r; i++) {
			let tr = table.insertRow();
			for (let j=0; j<COLS; j++) {
				let td = tr.insertCell();
				td.width=50;
				td.height=50;
				td.align = "center";
				td.valign = "middle";
			}
		}
		
		r = 0, c = 0;
		for (let i=0; i<mat.length; i++) {
		
			let img = document.createElement("img");
			img.width = 64;
			img.height = 64;
			img.src = mat[i];
			img.title = img.src;
			
			img.addEventListener("click", function() {
				if (this.parentNode.style.backgroundColor  == "red") 
					this.parentNode.style.backgroundColor  = "white";
				else 
					this.parentNode.style.backgroundColor  = "red";
				calcSelNum();
			});
			
			
			table.rows[r].cells[c].appendChild(img);
			img.parentNode.style.backgroundColor  = "red";

			c++;
			if (c % COLS == 0) {
				c = 0;
				r ++;
			}
			
		}
		calcSelNum();

	}
	
	function listenForClicks() {

			browser.tabs.query({active: true, currentWindow: true})
			.then(function(tabs) {
			btnFlag.addEventListener("click", function() {
				browser.tabs.executeScript(tabs[0].id , {code : FLAG });
			});

			btnGot.addEventListener("click", function() {
				browser.tabs.executeScript(tabs[0].id , {code : CODE} )
				.then(function(matches) {
					global_imgs = matches[0];
					
					showInMode();
					showInTable();
					
				});
			});
			
			btnDownload.addEventListener("click", function() {

				for (let i=0; i<table.rows.length; i++) {
					for (let j=0; j<table.rows[i].cells.length; j++) {
						let img = table.rows[i].cells[j].firstChild ;
						if (img && table.rows[i].cells[j].style.backgroundColor =="red") {
							browser.downloads.download( { conflictAction: "overwrite", url: img.src });
						}
					}
				}
			});
			
			btnSave.addEventListener("click", function() {
			
				let r = [];
				for (let i=0; i<table.rows.length; i++) {
					for (let j=0; j<table.rows[i].cells.length; j++) {
						let img = table.rows[i].cells[j].firstChild ;
						if (img && table.rows[i].cells[j].style.backgroundColor =="red") {
							r.push(img.src);
						}
					}
				}
				
				var port = browser.runtime.connectNative("Catch");
				port.onMessage.addListener((response) => {
				  console.log("Received: " , "length: ", response.Length, "url: ", response.URL, "path", "H:\\drf\a\\");
				});

				const title = txtTitle.value;
				r.forEach(function(it, p) {
					if (it.startsWith("data:image") == false) {
						let s = `{"title": "${title}", "url": "${it}", "path": "H:\\drf\a\\"}`;	
						port.postMessage(s);
					}
				});
			

			});

			btnCopy.addEventListener("click", function() {
				document.getElementById("__title__").select(); 
				document.execCommand("Copy"); 
			});
			
			btnSetup.addEventListener("click", function() {
				
			});
			
			btnSelection.addEventListener("click", function() {
				btnSelection.sel = (btnSelection.sel=="all" ? "" : "all");

				for (let i=0; i<table.rows.length; i++) {
					for (let j=0; j<table.rows[i].cells.length; j++) {
						let img = table.rows[i].cells[j].firstChild ;
						if (img) 
							table.rows[i].cells[j].style.backgroundColor =  (btnSelection.sel=="all" ? "red" : "white");
					}
				}
				calcSelNum();				
			});
			
			btnUnSelection.addEventListener("click", function() {
				for (let i=0; i<table.rows.length; i++) {
					for (let j=0; j<table.rows[i].cells.length; j++) {
						let img = table.rows[i].cells[j].firstChild ;
						if (img) 
							table.rows[i].cells[j].style.backgroundColor =  (table.rows[i].cells[j].style.backgroundColor=="white" ? "red" : "white");
					}
				}
				calcSelNum();
			});
			
			//
			txtTitle.value = tabs[0].title;
		});
		
	}
	
	listenForClicks();

}

访问sohu的首页,点击插件按钮,点击捕获图片,可按download下载捕获的全部图片。

标题

 

  • 0
    点赞
  • 2
    收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页
评论 1

打赏作者

vcshcn

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值