blankie
/
userscripts
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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:
blankie 2023-09-08 16:35:14 +10:00
parent 59aef8d509
commit bc12b1f378
Signed by: blankie
GPG Key ID: CC15FC822C7F61F5
1 changed files with 46 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
Image Loader Placeholder Remover.user.js
View File

@ -3,7 +3,7 @@
// @namespace blankie-scripts
// @match http*://*/*
// @grant none
// @version 1.18.0
// @version 1.19.0
// @author blankie
// @run-at document-end
// @description Removes image loading placeholders
@ -107,6 +107,21 @@ function getLazyloaderClasses(element) {
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) {
let topMostParent = null;
let followingTopMostParent = element.parentElement;
@ -115,6 +130,9 @@ function cloneLazyloaderTree(element, elementLazyLoaderClasses) {
while (followingTopMostParent.localName !== "body") {
let clone = document.createElement(followingTopMostParent.localName);
clone.classList.add(...getLazyloaderClasses(followingTopMostParent));
for (let attr of getLazyloaderAttributes(followingTopMostParent)) {
clone.setAttribute(attr.name, attr.value);
}
if (topMostParent) {
clone.append(topMostParent);
}
@ -128,6 +146,9 @@ function cloneLazyloaderTree(element, elementLazyLoaderClasses) {
let clone = document.createElement(element.localName);
clone.classList.add(...elementLazyLoaderClasses);
for (let attr of getLazyloaderAttributes(element)) {
clone.setAttribute(attr.name, attr.value);
}
if (bottomMostChild) {
bottomMostChild.append(clone);
@ -186,6 +207,8 @@ function unhideElement(element, lazyLoaderClasses) {
// - https://www.404media.co/welcome-to-404-media/
// - https://restofworld.org/
// - 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(")) {
element.style.filter = classStyle.filter.replaceAll(/blur\(.+?\)/g, "blur(0px)");
}
@ -212,6 +235,11 @@ function removePlaceholder(img) {
}
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:
// https://www.washingtonpost.com/nation/2023/07/21/ocean-color-changing-climate-change/
if (window.location.host === "www.washingtonpost.com") {
@ -224,7 +252,6 @@ function removePlaceholder(img) {
}
let originalUrl = url;
if (window.location.host === "www.vice.com") {
img.style.filter = "none";
picture.style.opacity = 1;
@ -246,7 +273,6 @@ function removePlaceholder(img) {
}
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?)
// https://gizmodo.com/reddit-news-blackout-protest-is-finally-over-reddit-won-1850707509
@ -337,3 +363,20 @@ if (window.location.host === "www.forbes.com") {
}
}
}
// 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);
}
}
}