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下载捕获的全部图片。

标题