☰

Show full size image in m.facebook.com for firefox

Show full size image in m.facebook.com.

当前为 2021-02-08 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name        Show full size image in m.facebook.com for firefox
  3. // @namespace		Show full size image in m.facebook.com for firefox
  4. // @include     /https\:\/\/m\.facebook\.com\//
  5. // @version     3.7
  6. // @author      zero0evolution
  7. // @description  Show full size image in m.facebook.com.
  8. // ==/UserScript==
  9.  
  10.  
  11. // example site:"https://m.facebook.com/photo.php?fbid=...","https://m.facebook.com/.../photos/..."
  12.  
  13. // 圖片網頁格式
  14. // /^https\:\/\/m\.facebook\.com\/(?:[0-9a-zA-Z\.]+\/photos\/[0-9a-zA-Z\.]+\/\d+|photo\.php\?fbid\=\d+)/
  15.  
  16.  
  17. function unicodeToChar(text){
  18. 	text = text.replace(
  19. 		/\\u[\dA-F]{4}/gi,(match) => {
  20. 			// 刪掉\u
  21. 			match = match.replace(/\\u/g, '')
  22. 			// 16進位轉10進位
  23. 			match = parseInt(match, 16)
  24. 			// 轉字元
  25. 			match = String.fromCharCode(match)
  26. 			return(match)
  27. 		}
  28. 	)
  29. 	return(text)
  30. }
  31.  
  32. async function getHTML(link,encoding="UTF-8",
  33. 	requestOptions = {"credentials": "same-origin"}){
  34.  
  35. 	const response = await fetch(
  36. 		link,requestOptions
  37. 	).then(
  38. 		(response)=>{return(response)}
  39. 	)
  40.  
  41. 	const arrayBuffer = await response.arrayBuffer().then(
  42. 		(arrayBuffer)=>{return(arrayBuffer)}
  43. 	)
  44.  
  45. 	const htmlCode = new TextDecoder(encoding).decode(arrayBuffer)
  46.  
  47. 	return(htmlCode)
  48. }
  49.  
  50. async function getOriginLink(link){
  51. 	const htmlCode = await getHTML(link)
  52. 	const matchImgLinkObj = htmlCode.match(/document\.location\.href\=\"(.*?)\"/)
  53. 	if(matchImgLinkObj){
  54. 		const originLink = matchImgLinkObj[1].replace(/\\\//img,"/")
  55. 		console.log("得到新的圖片連結:",originLink)
  56. 		return(originLink)
  57. 	}
  58. }
  59.  
  60. function loadImg(link){
  61. 	return(
  62. 		new Promise(
  63. 			(resolve,reject)=>{
  64. 				let tempImg
  65. 				if(typeof(link) === "string"){
  66. 					tempImg = document.createElement("img")
  67. 					tempImg.src = link
  68. 				}
  69. 				else if(link instanceof Element && link.matches("img")){
  70. 					tempImg = link
  71. 				}
  72. 				else{
  73. 					reject("no img link or img elem")
  74. 				}
  75. 				tempImg.onload = async(event)=>{
  76. 					resolve(tempImg)
  77. 				}
  78. 			}
  79. 		)
  80. 	)
  81. }
  82.  
  83. async function imgViewFullSize(targetImg,link){
  84. 	targetImg.style.maxWidth = "100%"
  85. 	// targetImg.style.maxHeight = "100vh"
  86. 	targetImg.style.height = "auto"
  87. 	targetImg.style.width = "auto"
  88.  
  89. 	targetImg.removeAttribute("width")
  90. 	targetImg.removeAttribute("height")
  91.  
  92. 	let elem = targetImg.parentElement
  93.  
  94. 	while(elem.style.width || elem.style.height){
  95.  
  96. 		elem.style.removeProperty("width")
  97. 		elem.style.removeProperty("height")
  98.  
  99. 		const elemStyle = getComputedStyle(elem)
  100. 		if(elemStyle.position.match(/^(absolute|fixed)$/)){
  101. 			elem.style.position = "static"
  102. 		}
  103. 		elem = elem.parentElement
  104. 	}
  105.  
  106. 	// check if link is not png,jpg, need redirect
  107. 	if(!link.match(/.*\/(.*?\.(?:png|jpg))(?:\?.*)?$/)){
  108. 		link = await getOriginLink(link)
  109. 	}
  110.  
  111. 	if(targetImg.matches("img")){
  112.  
  113. 		await loadImg(link)
  114.  
  115. 		targetImg.src = link
  116. 		return(targetImg)
  117. 	}
  118. 	else if(targetImg.matches("i.img")){
  119. 		const parent = targetImg.parentElement
  120.  
  121. 		targetImg.remove()
  122. 		const tempElem = document.createElement("div")
  123. 		tempElem.innerHTML = `<img src=${link} style="max-width:100%">`
  124. 		const newTargetImg = tempElem.firstElementChild
  125. 		parent.appendChild(newTargetImg)
  126. 		await loadImg(newTargetImg)
  127. 		
  128. 		return(newTargetImg)
  129. 	}
  130.  
  131. 	
  132. }
  133.  
  134. function replaceLinkElem(linkElem){
  135. 	const newElem = document.createElement("span")
  136. 	newElem.dataset.link = linkElem.href
  137. 	newElem.textContent = linkElem.textContent
  138. 	linkElem.parentElement.insertBefore(newElem,linkElem)
  139. 	linkElem.remove()
  140. 	return(newElem)
  141. }
  142.  
  143. function moveElemFunc(moveElem,targetElem){
  144. 	if(targetElem.parentElement instanceof Element){
  145. 		targetElem.parentElement.insertBefore(moveElem,targetElem.nextSibling)
  146. 		return(moveElem)
  147. 	}
  148. }
  149.  
  150. function moveElemsFunc(moveElems,targetElem){
  151. 	for(let i=moveElems.length-1;i>=0;i--){
  152. 		moveElemFunc(moveElems[i],targetElem)
  153. 	}
  154. }
  155.  
  156.  
  157. async function showFullFunc(linkElem){
  158.  
  159. 	const originHref = linkElem.getAttribute("href")
  160.  
  161. 	if(!originHref){
  162. 		// console.warn(linkElem)
  163. 		return(null)
  164. 	}
  165.  
  166. 	const viewFullSizeTextPattern = /^(?:全尺寸檢視|view full size)$/i
  167.  
  168. 	if(
  169. 		linkElem.textContent.match(viewFullSizeTextPattern) && 
  170. 		linkElem.matches("#viewport #rootcontainer a[href]")
  171. 	){
  172. 		
  173.  
  174. 		let targetElem = document.querySelector("#viewport #rootcontainer i.img[role='img'][data-store][style^='background-image: url']")
  175. 		if(targetElem instanceof Element){
  176. 			// const parent = targetElem.parentElement
  177.  
  178. 			// const tempElem = document.createElement("div")
  179. 			// tempElem.innerHTML = `<img src=${linkElem.href} style="max-width:100%">`
  180. 			// parent.appendChild(tempElem.firstElementChild)
  181. 			// targetElem.remove()
  182.  
  183. 			targetElem = await imgViewFullSize(targetElem,linkElem.getAttribute("href"))
  184. 		}
  185. 	}
  186.  
  187. 	const photoLinkPattern = /^\/?(?:photo\.php\?fbid\=|[0-9a-z\.\-\_]+\/photos\/)/i
  188. 	const photoLinkPattern2 = /^\/[0-9a-zA-Z\.]+\/photos\/[0-9a-zA-Z\.]+\/[0-9]+/i
  189.  
  190. 	const photoLinkPattern3 = /^\/photos\/viewer\/\?/
  191. 	
  192.  
  193. 	if(
  194. 		originHref.match(photoLinkPattern) || 
  195. 		originHref.match(photoLinkPattern2) ||
  196. 		originHref.match(photoLinkPattern3)
  197. 	){
  198.  
  199. 		
  200. 		let targetImg = linkElem.querySelector(
  201. 			"i.img[role='img'][style*='background-image:']")
  202. 		if(targetImg instanceof Element){
  203.  
  204. 			// console.log(linkElem.href)
  205.  
  206. 			linkElem.parentElement.align = "center"
  207. 			linkElem.parentElement.style.width = "100%"
  208. 			linkElem.parentElement.style.removeProperty("height")
  209. 			linkElem.parentElement.style.display = "inline-block"
  210. 			linkElem.style.removeProperty("left")
  211. 			linkElem.style.removeProperty("top")
  212. 			linkElem.style.removeProperty("width")
  213. 			linkElem.style.removeProperty("height")
  214. 			linkElem.style.maxWidth = "100%"
  215. 			linkElem.style.height = "auto"
  216. 			linkElem.style.position = "relative"
  217.  
  218. 			let nextLinkElem = linkElem.nextElementSibling
  219.  
  220. 			const htmlCode = await getHTML(linkElem.href)
  221. 			const matches = htmlCode.match(/\<a\s.*?\<\/a\>/img)
  222. 			// console.log(matches)
  223. 			for(const match of matches){
  224. 				const tempElem = document.createElement("div")
  225. 				tempElem.innerHTML = match
  226. 				const fullSizeLinkElem = tempElem.firstElementChild
  227. 				if(fullSizeLinkElem.textContent.match(viewFullSizeTextPattern)){
  228.  
  229. 					let fullImgLink = fullSizeLinkElem.getAttribute("href")
  230. 					if(!fullImgLink.match(/.*\/(.*?\.(?:png|jpg))(?:\?.*)?$/)){
  231. 						fullImgLink = await getOriginLink(fullImgLink)
  232. 					}
  233. 					linkElem.innerHTML = `<img src="${fullImgLink}" style="max-width:100%;height:auto;">`
  234. 					// console.log(linkElem.innerHTML)
  235. 					// targetImg = await imgViewFullSize(targetImg,fullSizeLinkElem.href)
  236.  
  237. 					linkElem.parentElement.insertBefore(document.createElement("br"),linkElem.nextElementSibling)
  238. 					break
  239. 				}
  240. 			}
  241.  
  242. 			
  243.  
  244. 			if(
  245. 				(!(nextLinkElem instanceof Element)) || 
  246. 				(!(nextLinkElem.matches("a[href]")))
  247. 			){
  248. 				// console.log("最後一個linkElem:",linkElem)
  249. 				// 找下一張連結
  250. 				for(const match of matches){
  251. 					const tempElem = document.createElement("div")
  252. 					tempElem.innerHTML = match
  253. 					nextLinkElem = tempElem.firstElementChild
  254. 					if(!nextLinkElem.matches("a.touchable[href]")){
  255. 						continue
  256. 					}
  257. 					if(!nextLinkElem.textContent.match(/^(Next|繼續)$/i)){
  258. 						continue
  259. 					}
  260. 					const nextLink = nextLinkElem.getAttribute("href")
  261. 					// 建立按鈕且功能為加入下一張圖片
  262. 					const button = document.createElement("button")
  263. 					button.textContent = "Next"
  264. 					linkElem.parentElement.insertBefore(button,linkElem.nextElementSibling.nextElementSibling)
  265.  
  266. 					button.dataset.link = nextLink
  267.  
  268. 					button.addEventListener("click",function(event){
  269. 						const button = event.currentTarget
  270. 						const link = button.dataset.link
  271. 						
  272. 						const tempElem = document.createElement("div")
  273. 						tempElem.innerHTML = `
  274. 							<a href="${link}">
  275. 								<i class="img" role="img" style="background-image:none;"></i>
  276. 							</a>
  277. 						`
  278. 						const nextLinkElem = tempElem.firstElementChild
  279.  
  280. 						button.parentElement.insertBefore(
  281. 							nextLinkElem,button.nextElementSibling)
  282.  
  283. 						button.remove()
  284. 					})
  285. 				}
  286. 			}
  287. 		}
  288. 	}
  289.  
  290. 	
  291. 	// 新增影片
  292. 	const videoLinkPattern = /^\/?video\_redirect\/\?src\=/i
  293. 	if(originHref.match(videoLinkPattern)){
  294. 		const videoLink = decodeURIComponent(originHref.replace(videoLinkPattern,""))
  295. 		const videoElem = document.createElement("video")
  296. 		videoElem.src = videoLink
  297. 		videoElem.controls = true
  298. 		// videoElem.style.maxWidth = "100%"
  299. 		videoElem.style.width = "100%"
  300. 		videoElem.style.minHeight = "60vh"
  301. 		videoElem.style.maxHeight = "100vh"
  302.  
  303. 		linkElem.parentElement.insertBefore(videoElem,linkElem.nextSibling)
  304. 		linkElem.remove()
  305. 		// videoElem.parentElement.align = "center"
  306. 	}
  307. 	
  308. }
  309.  
  310.  
  311. // 挑出所有的連結
  312. // const selectorText = "a[href]"
  313. async function filterFunc(topElem){
  314. 	if(topElem.matches("a[href]")){
  315. 		await showFullFunc(topElem).catch((err)=>{console.warn(err)})
  316. 	}
  317. 	for(const linkElem of topElem.querySelectorAll("a[href]")){
  318. 		await showFullFunc(linkElem).catch((err)=>{console.warn(err)})
  319. 	}
  320. }
  321.  
  322. filterFunc(document.documentElement)
  323.  
  324. const observerObj = new MutationObserver(
  325. 	function (mutationObjs){
  326. 		for(const eachMutationObj of mutationObjs){
  327. 			for(const eachAddNode of eachMutationObj.addedNodes){
  328. 				if(eachAddNode.nodeType === 1){
  329. 					filterFunc(eachAddNode)
  330. 				}
  331. 			}
  332. 		}
  333. 	}
  334. )
  335.  
  336. observerObj.observe(
  337. 	document.documentElement,{
  338. 		childList:true,
  339. 		subtree:true,
  340. 	}
  341. )
  342.  
  343.  
  344. // 顯示更多
  345. // 查看更多動態
  346. // video