// ==UserScript==// @name          View full size images at m.facebook.com// @description   Add a button "View full size" under the images at m.facebook.com// @author        MK// @namespace     max44// @homepage      https://greasyfork.org/en/users/309172-max44// @match         *://m.facebook.com/*// @icon          https://static.xx.fbcdn.net/rsrc.php/yD/r/d4ZIVX-5C-b.ico// @version       1.1// @license       MIT// @require       https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js// @run-at        document-idle// ==/UserScript==(function() {'use strict';//Check URL changesconst rootCallback = function (mutationsList, observer) {document.querySelectorAll("div.story_body_container > div[data-ft] > div[data-gt] i[role='img'][style*='background-image: url(']:not([button-added='true'])").forEach(addButtonCase1); //Post with single image (in the newsfeed and post opened)//document.querySelectorAll("div.story_body_container > div[data-ft] > div > div[data-ft] i[role='img'][style*='background-image: url(']:not([button-added='true'])").forEach(addButtonCase2); //Post with many images (in the newsfeed and post opened) - disabled, because putting urls under many tiled images creates a messdocument.querySelectorAll("div#modalDialogView article > div > div[data-store-id] > div[data-store-id] img.img[src^='https:']:not([button-added='true'])").forEach(addButtonCase3); //Post with many images (in the post opened for the 1st time)document.querySelectorAll("div#rootcontainer article > div > div[data-store-id] > div[data-store-id] img.img[src^='https:']:not([button-added='true'])").forEach(addButtonCase3); //Post with many images (in the post opened and reloaded)//document.querySelectorAll("div[data-sigil='comment'] div.attachment i[role='img'][style*='background-image: url(']:not([button-added='true'])").forEach(addButtonCase4); //Comments with images - disabled, because the url of true full size of image cannot be obtained directly}const rootNode = document.querySelector("body");if (rootNode != null) {const rootObserver = new MutationObserver(rootCallback);rootObserver.observe(rootNode, {childList: true, subtree: true});}/*setInterval (function () {document.querySelectorAll("div.story_body_container > div[data-ft] > div[data-gt] i[role='img'][style*='background-image: url(']:not([button-added='true'])").forEach(addButtonCase1); //Post with single image (in the newsfeed and post opened)//document.querySelectorAll("div.story_body_container > div[data-ft] > div > div[data-ft] i[role='img'][style*='background-image: url(']:not([button-added='true'])").forEach(addButtonCase2); //Post with many images (in the newsfeed and post opened) - disabled, because putting urls under many tiled images creates a messdocument.querySelectorAll("div#modalDialogView article > div > div[data-store-id] > div[data-store-id] img.img[src^='https:']:not([button-added='true'])").forEach(addButtonCase3); //Post with many images (in the post opened for the 1st time)document.querySelectorAll("div#rootcontainer article > div > div[data-store-id] > div[data-store-id] img.img[src^='https:']:not([button-added='true'])").forEach(addButtonCase3); //Post with many images (in the post opened and reloaded)//document.querySelectorAll("div[data-sigil='comment'] div.attachment i[role='img'][style*='background-image: url(']:not([button-added='true'])").forEach(addButtonCase4); //Comments with images - disabled, because the url of true full size of image cannot be obtained directly}, 250);*/function addButtonCase1(element) {var strImg = element.getAttribute("style");strImg = strImg.replace(/.*background-image: url\('https\\3a /, "https:"); //Remove everything before img urlstrImg = strImg.replace(/'\);.*/, ""); //Remove everything after img urlstrImg = strImg.replace(/\\3d /g, "="); //Replace codes with respective symbolsstrImg = strImg.replace(/\\26 /g, "&");//console.log(strImg);var newButton = document.createElement('span');newButton.className = "_2vja mfss fcg _5rgt";newButton.setAttribute("style", "display: block; top: 0px; min-height: 20px; z-index: 1;");newButton.innerHTML = '<a href="' + strImg + '" target="_blank" class="sec">View full size</a>';element.parentNode.parentNode.insertBefore(newButton, element.nextSibling);element.setAttribute("button-added", "true");}function addButtonCase2(element) {var strImg = element.getAttribute("style");strImg = strImg.replace(/.*background-image: url\('https\\3a /, "https:"); //Remove everything before img urlstrImg = strImg.replace(/'\);.*/, ""); //Remove everything after img urlstrImg = strImg.replace(/\\3d /g, "="); //Replace codes with respective symbolsstrImg = strImg.replace(/\\26 /g, "&");//console.log(strImg);var newButton = document.createElement('span');newButton.className = "_2vja mfss fcg _5rgt";newButton.setAttribute("style", "display: block; top: 0px; min-height: 20px; z-index: 1;");newButton.innerHTML = '<a href="' + strImg + '" target="_blank" class="sec">View full size</a>';element.parentNode.parentNode.insertBefore(newButton, element.nextSibling);element.setAttribute("button-added", "true");}function addButtonCase3(element) {var strImg = element.getAttribute("src");//console.log(strImg);var newButton = document.createElement('span');newButton.className = "_2vja mfss fcg _5rgt";newButton.setAttribute("style", "display: block; top: 0px; min-height: 20px; z-index: 1;");newButton.innerHTML = '<a href="' + strImg + '" target="_blank" class="sec" style="font-weight: normal; color: inherit;">View full size</a>';element.parentNode.insertBefore(newButton, element.nextSibling);element.setAttribute("button-added", "true");}function addButtonCase4(element) {var strImg = element.getAttribute("style");strImg = strImg.replace(/.*background-image: url\('https\\3a /, "https:"); //Remove everything before img urlstrImg = strImg.replace(/'\);.*/, ""); //Remove everything after img urlstrImg = strImg.replace(/\\3d /g, "="); //Replace codes with respective symbolsstrImg = strImg.replace(/\\26 /g, "&");console.log(strImg);var newButton = document.createElement('span');newButton.className = "_2vja mfss fcg _5rgt";newButton.setAttribute("style", "display: block; top: 0px; min-height: 20px; z-index: 1;");newButton.innerHTML = '<a href="' + strImg + '" target="_blank" class="sec" style="font-weight: normal; color: inherit;">View full size</a>';element.parentNode.parentNode.insertBefore(newButton, element.nextSibling);element.setAttribute("button-added", "true");}})();