Update Image Loader Placeholder Remover to 1.19.0
- Add support for images blurred by attributes - Add specific support for blog.google
This commit is contained in:
parent
59aef8d509
commit
bc12b1f378
|
@ -3,7 +3,7 @@
|
||||||
// @namespace blankie-scripts
|
// @namespace blankie-scripts
|
||||||
// @match http*://*/*
|
// @match http*://*/*
|
||||||
// @grant none
|
// @grant none
|
||||||
// @version 1.18.0
|
// @version 1.19.0
|
||||||
// @author blankie
|
// @author blankie
|
||||||
// @run-at document-end
|
// @run-at document-end
|
||||||
// @description Removes image loading placeholders
|
// @description Removes image loading placeholders
|
||||||
|
@ -107,6 +107,21 @@ function getLazyloaderClasses(element) {
|
||||||
return classes;
|
return classes;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function getLazyloaderAttributes(element) {
|
||||||
|
let attributes = [];
|
||||||
|
|
||||||
|
for (let attr of element.attributes) {
|
||||||
|
// Examples of loading:
|
||||||
|
// - https://blog.google/
|
||||||
|
// - https://blog.google/threat-analysis-group/active-north-korean-campaign-targeting-security-researchers/
|
||||||
|
if (/loading/.test(attr.name)) {
|
||||||
|
attributes.push(attr);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return attributes;
|
||||||
|
}
|
||||||
|
|
||||||
function cloneLazyloaderTree(element, elementLazyLoaderClasses) {
|
function cloneLazyloaderTree(element, elementLazyLoaderClasses) {
|
||||||
let topMostParent = null;
|
let topMostParent = null;
|
||||||
let followingTopMostParent = element.parentElement;
|
let followingTopMostParent = element.parentElement;
|
||||||
|
@ -115,6 +130,9 @@ function cloneLazyloaderTree(element, elementLazyLoaderClasses) {
|
||||||
while (followingTopMostParent.localName !== "body") {
|
while (followingTopMostParent.localName !== "body") {
|
||||||
let clone = document.createElement(followingTopMostParent.localName);
|
let clone = document.createElement(followingTopMostParent.localName);
|
||||||
clone.classList.add(...getLazyloaderClasses(followingTopMostParent));
|
clone.classList.add(...getLazyloaderClasses(followingTopMostParent));
|
||||||
|
for (let attr of getLazyloaderAttributes(followingTopMostParent)) {
|
||||||
|
clone.setAttribute(attr.name, attr.value);
|
||||||
|
}
|
||||||
if (topMostParent) {
|
if (topMostParent) {
|
||||||
clone.append(topMostParent);
|
clone.append(topMostParent);
|
||||||
}
|
}
|
||||||
|
@ -128,6 +146,9 @@ function cloneLazyloaderTree(element, elementLazyLoaderClasses) {
|
||||||
|
|
||||||
let clone = document.createElement(element.localName);
|
let clone = document.createElement(element.localName);
|
||||||
clone.classList.add(...elementLazyLoaderClasses);
|
clone.classList.add(...elementLazyLoaderClasses);
|
||||||
|
for (let attr of getLazyloaderAttributes(element)) {
|
||||||
|
clone.setAttribute(attr.name, attr.value);
|
||||||
|
}
|
||||||
|
|
||||||
if (bottomMostChild) {
|
if (bottomMostChild) {
|
||||||
bottomMostChild.append(clone);
|
bottomMostChild.append(clone);
|
||||||
|
@ -186,6 +207,8 @@ function unhideElement(element, lazyLoaderClasses) {
|
||||||
// - https://www.404media.co/welcome-to-404-media/
|
// - https://www.404media.co/welcome-to-404-media/
|
||||||
// - https://restofworld.org/
|
// - https://restofworld.org/
|
||||||
// - https://restofworld.org/2023/parent-facing-matchmaking-apps-china/
|
// - https://restofworld.org/2023/parent-facing-matchmaking-apps-china/
|
||||||
|
// - https://blog.google/
|
||||||
|
// - https://blog.google/threat-analysis-group/active-north-korean-campaign-targeting-security-researchers/
|
||||||
if (classStyle.filter.includes("blur(")) {
|
if (classStyle.filter.includes("blur(")) {
|
||||||
element.style.filter = classStyle.filter.replaceAll(/blur\(.+?\)/g, "blur(0px)");
|
element.style.filter = classStyle.filter.replaceAll(/blur\(.+?\)/g, "blur(0px)");
|
||||||
}
|
}
|
||||||
|
@ -212,6 +235,11 @@ function removePlaceholder(img) {
|
||||||
}
|
}
|
||||||
let picture = img.closest("picture");
|
let picture = img.closest("picture");
|
||||||
|
|
||||||
|
// Examples of blurred images with proper URLs:
|
||||||
|
// - https://blog.google/
|
||||||
|
// - https://blog.google/threat-analysis-group/active-north-korean-campaign-targeting-security-researchers/
|
||||||
|
unhideElement(img, getLazyloaderClasses(img));
|
||||||
|
|
||||||
// Example of a would've been viewable image being blurred:
|
// Example of a would've been viewable image being blurred:
|
||||||
// https://www.washingtonpost.com/nation/2023/07/21/ocean-color-changing-climate-change/
|
// https://www.washingtonpost.com/nation/2023/07/21/ocean-color-changing-climate-change/
|
||||||
if (window.location.host === "www.washingtonpost.com") {
|
if (window.location.host === "www.washingtonpost.com") {
|
||||||
|
@ -224,7 +252,6 @@ function removePlaceholder(img) {
|
||||||
}
|
}
|
||||||
let originalUrl = url;
|
let originalUrl = url;
|
||||||
|
|
||||||
|
|
||||||
if (window.location.host === "www.vice.com") {
|
if (window.location.host === "www.vice.com") {
|
||||||
img.style.filter = "none";
|
img.style.filter = "none";
|
||||||
picture.style.opacity = 1;
|
picture.style.opacity = 1;
|
||||||
|
@ -246,7 +273,6 @@ function removePlaceholder(img) {
|
||||||
}
|
}
|
||||||
|
|
||||||
img.src = url;
|
img.src = url;
|
||||||
unhideElement(img, getLazyloaderClasses(img));
|
|
||||||
|
|
||||||
// apparently, remaining <source>s can fuck up image rendering (firefox still thinks that the <img> contains an empty image?)
|
// apparently, remaining <source>s can fuck up image rendering (firefox still thinks that the <img> contains an empty image?)
|
||||||
// https://gizmodo.com/reddit-news-blackout-protest-is-finally-over-reddit-won-1850707509
|
// https://gizmodo.com/reddit-news-blackout-protest-is-finally-over-reddit-won-1850707509
|
||||||
|
@ -336,4 +362,21 @@ if (window.location.host === "www.forbes.com") {
|
||||||
progressiveImage.replaceWith(img);
|
progressiveImage.replaceWith(img);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// https://blog.google/
|
||||||
|
// https://blog.google/threat-analysis-group/active-north-korean-campaign-targeting-security-researchers/
|
||||||
|
if (window.location.host === "blog.google") {
|
||||||
|
for (let img of document.querySelectorAll("img[data-loading]")) {
|
||||||
|
let data = JSON.parse(img.getAttribute("data-loading"));
|
||||||
|
let url = data.desktop || data.mobile;
|
||||||
|
img.src = url;
|
||||||
|
|
||||||
|
if (!img.closest("a")) {
|
||||||
|
let wrapper = document.createElement("a");
|
||||||
|
wrapper.href = url;
|
||||||
|
img.replaceWith(wrapper);
|
||||||
|
wrapper.append(img);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
Loading…
Reference in New Issue