JOI Image Unblur

1// ==UserScript==
2// @name		JOI Image Unblur
3// @description		Removes blur effects from images on joi.com
4// @version		1.1.1
5// @match		https://*.joi.com/*
6// @icon		https://joi.com/favicons/favicon.ico
7// ==/UserScript==
8(function() {
9    'use strict';
10    
11    console.log('JOI Image Unblur extension started');
12    
13    // Function to remove blur from elements
14    function removeBlur(element) {
15        if (!element) return;
16        
17        // Remove filter blur
18        element.style.filter = 'none';
19        element.style.webkitFilter = 'none';
20        
21        // Remove backdrop filter blur
22        element.style.backdropFilter = 'none';
23        element.style.webkitBackdropFilter = 'none';
24        
25        console.log('Removed blur from element:', element);
26    }
27    
28    // Function to process all images and containers
29    function unblurImages() {
30        // Target all images
31        const images = document.querySelectorAll('img');
32        images.forEach(img => {
33            removeBlur(img);
34            // Also check parent containers
35            if (img.parentElement) {
36                removeBlur(img.parentElement);
37            }
38            if (img.parentElement?.parentElement) {
39                removeBlur(img.parentElement.parentElement);
40            }
41            if (img.parentElement?.parentElement?.parentElement) {
42                removeBlur(img.parentElement.parentElement.parentElement);
43            }
44        });
45        
46        // Target elements with blur-related data attributes
47        const blurElements = document.querySelectorAll('[data-name*="blur"]');
48        blurElements.forEach(element => {
49            removeBlur(element);
50        });
51        
52        // Target common blur container classes
53        const containers = document.querySelectorAll('.iuotvl2, .pitq93, .r1r6s5kh, .i15lyzvx, .ax7h2dh, .b17xzb3n, [class*="blur"]');
54        containers.forEach(container => {
55            removeBlur(container);
56        });
57        
58        console.log(`Processed ${images.length} images and ${blurElements.length + containers.length} containers`);
59    }
60    
61    // Add CSS to override any blur styles
62    const style = document.createElement('style');
63    style.textContent = `
64        img, 
65        img.image,
66        img.i158p38v,
67        img.bgedyb0,
68        img.bqmlzmg,
69        [data-name*="blur"],
70        .iuotvl2,
71        .pitq93,
72        .r1r6s5kh,
73        .i15lyzvx,
74        .ax7h2dh,
75        .b17xzb3n,
76        [class*="blur"],
77        div[class*="i1"],
78        div[class*="ax"],
79        div[class*="b1"] {
80            filter: none !important;
81            -webkit-filter: none !important;
82            backdrop-filter: none !important;
83            -webkit-backdrop-filter: none !important;
84        }
85        
86        /* Ensure images are fully visible */
87        img {
88            opacity: 1 !important;
89        }
90        
91        /* Remove blur from pseudo-elements */
92        *::before, *::after {
93            filter: none !important;
94            -webkit-filter: none !important;
95            backdrop-filter: none !important;
96            -webkit-backdrop-filter: none !important;
97        }
98    `;
99    document.head.appendChild(style);
100    console.log('Added CSS to remove blur effects');
101    
102    // Initial unblur
103    if (document.readyState === 'loading') {
104        document.addEventListener('DOMContentLoaded', unblurImages);
105    } else {
106        unblurImages();
107    }
108    
109    // Watch for dynamically added content
110    const observer = new MutationObserver((mutations) => {
111        let shouldProcess = false;
112        
113        for (const mutation of mutations) {
114            if (mutation.addedNodes.length > 0) {
115                shouldProcess = true;
116                break;
117            }
118        }
119        
120        if (shouldProcess) {
121            unblurImages();
122        }
123    });
124    
125    // Start observing
126    observer.observe(document.body, {
127        childList: true,
128        subtree: true
129    });
130    
131    console.log('MutationObserver started - watching for new images');
132    
133})();