Show full size image in m.facebook.com

Show full size image in m.facebook.com, example site:"https://m.facebook.com/photo.php?fbid=...","https://m.facebook.com/.../photos/..."

当前为 2018-04-15 提交的版本,查看 最新版本

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Greasemonkey 油猴子Violentmonkey 暴力猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Violentmonkey 暴力猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Userscripts ,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展后才能安装此脚本。

(我已经安装了用户脚本管理器,让我安装!)

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

(我已经安装了用户样式管理器,让我安装!)

// ==UserScript==
// @name        Show full size image in m.facebook.com
// @namespace		Show full size image in m.facebook.com
// @include     /^https\:\/\/m\.facebook\.com\//
// @version     2
// @author      zero0evolution
// @description  Show full size image in m.facebook.com, example site:"https://m.facebook.com/photo.php?fbid=...","https://m.facebook.com/.../photos/..."
// ==/UserScript==


// 圖片網頁格式
// /^https\:\/\/m\.facebook\.com\/(?:[0-9a-zA-Z\.]+\/photos\/[0-9a-zA-Z\.]+\/\d+|photo\.php\?fbid\=\d+)/


var unicodeToChar = (text)=>{
	text = text.replace(
		/\\u[\dA-F]{4}/gi,(match) => {
			// 刪掉\u
			match = match.replace(/\\u/g, '')
			// 16進位轉10進位
			match = parseInt(match, 16)
			// 轉字元
			match = String.fromCharCode(match)
			return(match)
		}
	)
	return(text)
}

var getHTML = async(link,encoding="UTF-8")=>{

	let response = await fetch(link).then(
		(response)=>{return(response)}
	)

	let arrayBuffer = await response.arrayBuffer().then(
		(arrayBuffer)=>{return(arrayBuffer)}
	)

	let htmlCode = new TextDecoder(encoding).decode(arrayBuffer)

	return(htmlCode)
}

var showFullSizeImgFunc = async(linkElem)=>{
	// console.log("showFullSizeImgFunc")
	if(linkElem.textContent.match(/^(?:全尺寸檢視|view full size)$/i)){
		var showImgElem = document.createElement("img")
		showImgElem.src = linkElem.href
		showImgElem.style.width = "auto"
		showImgElem.style.maxWidth = "100%"
		showImgElem.style.height = "100%"
		linkElem.appendChild(showImgElem)
		// console.log(showImgElem)
	}
	else if(linkElem.href.match(/^https\:\/\/m\.facebook\.com\/(?:[0-9a-zA-Z\.]+\/photos\/[0-9a-zA-Z\.]+\/\d+|photo\.php\?fbid\=\d+)/)){

		console.log("找到Facebook單圖片連結:",linkElem.href)
		var htmlCode = await getHTML(linkElem.href)

		var targetCodes = htmlCode.match(/\\u003Ca((?!\\u003Ca).)*?(?:\\u5168\\u5c3a\\u5bf8\\u6aa2\\u8996|Full Size View)\\u003C\\\/a\>/img)
		// 也許空格會用unicode表示
		if(targetCodes instanceof Array){
			for(let targetCode of targetCodes){
				console.log("找到目標HTML:",targetCode)
				targetCode = unicodeToChar(targetCode)
				targetCode = targetCode.replace(/\\([^\\])/mg,"$1")
				console.log("解碼HTML:",targetCode)

				var tempElem = document.createElement("div")
				tempElem.innerHTML = targetCode
				var imgLink = tempElem.firstChild.href

				console.log("全尺寸圖片連結:",imgLink)

				var imgElem = document.createElement("img")
				imgElem.src = imgLink

				var pasteElem = linkElem
				while(pasteElem !== document.body){
					if(pasteElem.style.height || pasteElem.style.width){
						pasteElem = pasteElem.parentElement
					}
					else{break}
				}
				pasteElem.appendChild(imgElem)
			}
		}
	}
}


var filterFunc = (topElem)=>{
	if(topElem.matches("a[href]")){
		showFullSizeImgFunc(topElem)
	}
	for(let linkElem of topElem.querySelectorAll("a[href]")){
		showFullSizeImgFunc(linkElem)
	}
}

filterFunc(document.documentElement)

//建立新的觀察物件
var observerObj = new MutationObserver(
	function (mutationObjs){
		for(let eachMutationObj of mutationObjs){
			for(let eachAddNode of eachMutationObj.addedNodes){
				if(eachAddNode.nodeType === 1){
					filterFunc(eachAddNode)
				}
			}
		}
	}
)

observerObj.observe(
	document.documentElement,{
		childList:true,
		subtree:true,
	}
)