This is a personal Chrome extension project that allows anyone
to add effects like blur to the thumbnails OR replace the thumbnails of
YouTube videos with random images generated using the picsum.photos API.
This extension is still a work in progress and may contain bugs or errors. Contributions and suggestions for improvement are welcome.
To use this extension, follow these steps:
- Clone this repository or download the files to your computer.
- Open Google Chrome and navigate to the
chrome://extensionspage. - Turn on "Developer mode" in the top right corner of the page.
- Click "Load unpacked" and select the directory where the saved files are present.
- Open a YouTube video page and watch as random effects (blur by default) get applied to the thumbnail images when you click the extension.
First, YTH selects all the <img/>elements in the HTML document of any
https://youtube.com/* web page:
- The extension works by generating an array of random image URLs of a
specified size using the
picsum.photos. - Then replaces each src attribute with a random URL from the randomImages array.
- To handle lazy-loaded images, YouTube Thumbnail Hunter uses a MutationObserver to detect changes in the DOM.
- The observer replaces the attributes of img elements with random values when it detects changes.
- It watches for new img elements in the entire subtree of document.body.
Without the observer, the images at the top of the page get replaced, but the ones loaded next stay the same.
More
This code creates a MutationObserver to detect changes to the DOM and update the img elements array. When changes occur, the img elements' src attributes are replaced with random URLs from a predefined array.
How it works
The MutationObserver is created using the MutationObserver constructor. The observer listens for changes in the DOM and triggers a callback function whenever a change is detected. In this case, the callback function updates the img elements array and replaces the src attributes with random URLs from a predefined array of images.
The observer configuration is set to watch for new img elements in the entire subtree of the document.body. The childList option is set to true to detect when new img elements are added or removed from the DOM.
Usage
To use this code, simply include it in your project and the MutationObserver will start observing the document.body element for changes. When changes are detected, the src attributes of any img elements will be replaced with random URLs from the predefined array.
It is important to note that this code is specifically designed to work with img elements, and may not work as intended with other types of elements.
- picsum.photos for providing the random image generator API.
- Intersection Observer API for enabling lazy-loading image replacement.
- Hasan El Mghari for the idea and starter code.
- Mozilla Developer Network for their comprehensive documentation on web development.
This extension is licensed under the MIT License.