The Official Power User Tips, Tricks & Productivity Thread

bnew

Veteran
Joined
Nov 1, 2015
Messages
60,068
Reputation
8,966
Daps
165,992
Trying out this userscript on YouTube atm because that site has been running like :trash: lately


(They have put some of their userscripts on GreasyFork but I went to their full collection on GitHub)

will test it out,:ehh:




### Summary of the UserScript: YouTube Fix for Memory Leakage

This user script is designed to address a memory leakage issue on YouTube, particularly when using certain browsers. Here’s a detailed explanation:

#### Purpose
The script aims to prevent memory leaks that can occur when YouTube loads and manages various elements on its pages. Memory leaks happen when the browser fails to release memory allocated for elements that are no longer needed, leading to performance issues and increased memory usage over time.

#### How It Works

1. **Promise Constructor Workaround**:
- The script starts by defining a `Promise` constructor because YouTube sometimes hacks the `Promise` object in certain browsers (like WaterFox Classic), which prevents promises from resolving properly.
- This ensures that promises work correctly even in those browsers.

2. **Element Inspection Functions**:
- Two helper functions, `insp` and `indr`, are defined to inspect and retrieve specific properties of DOM elements.
- These functions help in identifying and manipulating the elements that might be causing memory leaks.

3. **Thumbnail Selection**:
- A function called `getThumbnail` is used to select the highest resolution thumbnail from a list of thumbnails.
- This is useful for ensuring that only necessary thumbnails are loaded, reducing unnecessary data transfer and potential memory usage.

4. **WeakMap for Element Tracking**:
- A `WeakMap` named `ytDOMWM` is created to track whether certain DOM elements should use patched lifecycles.
- A `WeakMap` is used here because it allows garbage collection of elements once they are no longer referenced, which helps in preventing memory leaks.

5. **Property Definition on Element Prototype**:
- The script defines a property called `usePatchedLifecycles` on the `Element.prototype`.
- This property has getter and setter methods.
- The getter checks if an element should use patched lifecycles based on its type and connection status.
- The setter sets whether an element should use patched lifecycles and updates the `WeakMap` accordingly.

6. **Element Type Checking**:
- The script checks the type of each element (e.g., `yt-attributed-string`, `yt-image`, etc.) and decides whether it should apply patched lifecycles based on predefined rules.
- For example, certain elements like `yt-player-seek-continuation` or `yt-payments-manager` will always have patched lifecycles applied.
- For others like `yt-img-shadow`, it checks if there is a valid thumbnail URL before applying patched lifecycles.

7. **Thumbnail Update for Images**:
- If an image element (`yt-img-shadow`) has a valid thumbnail URL, the script updates the image source using this URL after a short delay using `Promise.resolve(0).then()`.
- This ensures that only necessary images are loaded and displayed.

### Impact

- **Memory Efficiency**: By ensuring that only necessary elements are kept in memory and by properly managing their lifecycles, this script helps reduce memory leaks.
- **Performance Improvement**: Reducing memory leaks can improve overall browser performance when using YouTube, especially during extended sessions or with multiple tabs open.
- **Compatibility**: The script is designed to work across various browsers including Chrome, Firefox, Opera, Edge, and Safari.

In summary, this user script fine-tunes how YouTube manages its DOM elements to prevent unnecessary memory usage and improve overall performance by ensuring that elements are properly cleaned up when they are no longer needed.
 

bnew

Veteran
Joined
Nov 1, 2015
Messages
60,068
Reputation
8,966
Daps
165,992





created with llama-3.3b 70B


Userscript Summary: GitHub to Gitingest Redirect This userscript is a small program that runs on web pages, specifically designed to work with GitHub pages. Its primary function is to provide a convenient way to redirect users from GitHub to Gitingest, a similar platform. What does the script do?
  1. Adds a button to the page: When you visit a GitHub page, the script creates a new button that appears at the bottom right corner of the page. This button is labeled "Redirect to Gitingest".
  2. Redirects to Gitingest: When you click the button, the script redirects you to the equivalent page on Gitingest. This means that if you're currently viewing a GitHub repository, the script will take you to the same repository on Gitingest.
  3. Replaces GitHub with Gitingest in the URL: To achieve the redirect, the script simply replaces the "github.com" part of the URL with "gitingest.com". This ensures that you're taken to the correct page on Gitingest.
How does it work?
  1. The script runs on GitHub pages: The userscript is designed to run only on GitHub pages, which means it won't affect any other websites you visit.
  2. The script checks the URL: When you visit a GitHub page, the script checks the URL to see if it's a valid GitHub page.
  3. The script creates the button: If the script determines that you're on a GitHub page, it creates the "Redirect to Gitingest" button and adds it to the page.
  4. You click the button: When you click the button, the script triggers the redirect function.
  5. The script redirects you to Gitingest: The script replaces "github.com" with "gitingest.com" in the URL and takes you to the equivalent page on Gitingest.
Benefits of using this script
  1. Convenience: The script provides a quick and easy way to switch from GitHub to Gitingest, saving you time and effort.
  2. Easy to use: The script is simple to use, and the button is clearly labeled, making it easy to understand what the script does.
  3. Customizable: As a userscript, you can modify the script to suit your needs, such as changing the button's appearance or behavior.
Limitations and potential issues
  1. Gitingest compatibility: The script assumes that Gitingest has the same repository structure as GitHub. If Gitingest has a different structure, the redirect may not work as expected.
  2. URL formatting: The script relies on the URL formatting of GitHub and Gitingest. If either platform changes its URL structure, the script may not work correctly.
  3. Script conflicts: As with any userscript, there's a possibility that this script may conflict with other scripts or browser extensions you're using.
Overall, this userscript provides a convenient way to redirect from GitHub to Gitingest, making it easier to switch between the two platforms. However, it's essential to be aware of the potential limitations and issues that may arise.




simple redirect bookmarklet:

 

bnew

Veteran
Joined
Nov 1, 2015
Messages
60,068
Reputation
8,966
Daps
165,992
a nitter bookmarklet thats a work in progress


What is the Bookmarklet? The bookmarklet is a small piece of code that can be saved as a bookmark in your web browser. When you click on the bookmark, it runs the code and performs a specific task on the webpage you are currently viewing.
What does the Bookmarklet do?
The bookmarklet is designed to help you filter and hide tweets on Twitter that do not contain media, such as images or videos. Here's a detailed summary of what the bookmarklet does:
  1. Creates a Counter: The bookmarklet creates a small counter at the bottom right corner of the webpage, which displays the number of hidden tweets.
  2. Creates a Filter Window: The bookmarklet creates a small window at the top right corner of the webpage, which contains a list of usernames. This window allows you to filter tweets by username.
  3. Hides Non-Media Tweets: The bookmarklet hides tweets that do not contain media, such as images or videos. This means that only tweets with media will be visible on the webpage.
  4. Updates the Username List: When new tweets are loaded, the bookmarklet updates the list of usernames in the filter window. This ensures that you can filter tweets by username even if new tweets are added to the webpage.
  5. Allows Filtering by Username: The bookmarklet allows you to filter tweets by username. You can select one or more usernames from the list, and the bookmarklet will hide tweets from all other usernames.
  6. Debounces the Scroll Event: The bookmarklet uses a technique called debouncing to prevent the scroll event from triggering too many times. This ensures that the bookmarklet only runs when necessary, which improves performance.
  7. Observes New Tweets: The bookmarklet uses a MutationObserver to detect when new tweets are added to the webpage. When new tweets are detected, the bookmarklet updates the list of usernames and hides non-media tweets.
How does the Bookmarklet work?T
he bookmarklet uses a combination of JavaScript and HTML to perform its tasks. Here's a high-level overview of how it works:
  1. JavaScript Code: The bookmarklet contains a small piece of JavaScript code that runs when you click on the bookmark.
  2. DOM Manipulation: The JavaScript code manipulates the Document Object Model (DOM) of the webpage to create the counter and filter window.
  3. Event Listeners: The JavaScript code adds event listeners to the webpage to detect when new tweets are added or when the user scrolls to the bottom of the page.
  4. MutationObserver: The JavaScript code uses a MutationObserver to detect when new tweets are added to the webpage.
  5. CSS Styles: The bookmarklet uses CSS styles to position the counter and filter window on the webpage.
Benefits of the BookmarkletThe bookmarklet provides several benefits, including:
  1. Improved User Experience: The bookmarklet helps to improve the user experience on Twitter by hiding non-media tweets and allowing you to filter tweets by username.
  2. Increased Productivity: The bookmarklet can help you to focus on the tweets that are most relevant to you, which can increase your productivity and reduce distractions.
  3. Customization: The bookmarklet allows you to customize your Twitter experience by filtering tweets by username and hiding non-media tweets.
Conclusion The bookmarklet is a powerful tool that can help you to customize your Twitter experience and improve your productivity. By hiding non-media tweets and allowing you to filter tweets by username, the bookmarklet provides a more focused and relevant Twitter experience. Whether you're a casual Twitter user or a power user, the bookmarklet is a useful tool that can help you to get more out of Twitter.

PpRmas2.png


NOTE: MUST REMOVE ALL " //" COMMENT LINES before adding as bookmark


edit:

@Macallik86 this might be of interest to you.

updated with additional functionality

12/30/2024


edit 2:
1/2/2025
this actually deletes the non media posts timeline-item from DOM which should save memory.



this has an option to delete timeline-items from DOM by username :

 
Last edited:

bnew

Veteran
Joined
Nov 1, 2015
Messages
60,068
Reputation
8,966
Daps
165,992
Here’s an updated version of the userscript that aims to fix potential memory leaks and improve efficiency, especially for handling dynamic content and ensuring better performance. We'll incorporate changes like debouncing or throttling events and optimizing the MutationObserver to avoid unnecessary high CPU usage. The script will clean the image URLs and handle both preview.redd.it and i.redd.it URLs.


Updated Userscript:​

JavaScript:
// ==UserScript==
// @name         Reddit Image Link Cleaner (Optimized)
// @namespace    http://tampermonkey.net/
// @version      1.1
// @description  Clean and convert 'preview.redd.it' and 'i.redd.it' image URLs to direct image links
// @author       You
// @match        *://*/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // Function to clean and replace image URLs
    function cleanImageLinks() {
        // Find all <img> tags on the page
        const images = document.querySelectorAll('img');

        // Loop through all images
        images.forEach((img) => {
            // Get the image source URL
            const src = img.getAttribute('src');

            if (src) {
                if (src.includes('preview.redd.it')) {
                    // For 'preview.redd.it' links, replace with direct image URL
                    const regex = /https:\/\/preview\.redd\.it\/([a-zA-Z0-9-]+)-([a-zA0-9]+)\.(jpg|jpeg|gif|webp|png)/;
                    const match = src.match(regex);
                    if (match) {
                        const directUrl = 'https://i.redd.it/' + match[2] + '.' + match[3];
                        img.setAttribute('src', directUrl);
                    }
                } else if (src.includes('i.redd.it')) {
                    // For 'i.redd.it' links, remove extra parameters (if any)
                    const regex = /https:\/\/i\.redd\.it\/([a-zA-Z0-9-]+)-([a-zA-Z0-9]+)\.(jpg|jpeg|gif|webp|png)(\?[^ ]*)?/;
                    const match = src.match(regex);
                    if (match) {
                        const cleanUrl = 'https://i.redd.it/' + match[2] + '.' + match[3];
                        img.setAttribute('src', cleanUrl);
                    }
                }
            }
        });
    }

    // Debounce function to limit the rate of function execution
    function debounce(func, wait, immediate) {
        let timeout;
        return function() {
            const context = this, args = arguments;
            const later = function() {
                timeout = null;
                if (!immediate) func.apply(context, args);
            };
            const callNow = immediate && !timeout;
            clearTimeout(timeout);
            timeout = setTimeout(later, wait);
            if (callNow) func.apply(context, args);
        };
    }

    // Run the function when the page is fully loaded
    window.addEventListener('load', cleanImageLinks);

    // Optionally, run the function when new images are dynamically added (for single-page apps, etc.)
    const observer = new MutationObserver(debounce(() => {
        cleanImageLinks();  // Clean image links after mutation (new content added)
    }, 500));

    observer.observe(document.body, { childList: true, subtree: true });
})();


Key Changes:​


  1. Debouncing:
    • Debounce has been added to the MutationObserver to limit how often the cleanImageLinks function is called when the DOM is modified (e.g., when content is dynamically loaded).
    • This ensures that the cleanImageLinks function doesn’t run too frequently, which could lead to high CPU usage in a fast-changing environment like a single-page app.
  2. MutationObserver Optimization:
    • We use the MutationObserver to watch for changes in the DOM and only trigger the cleaning process when there is new content, improving efficiency.
    • It watches for changes in the body and all sub-elements (subtree: true), so it can capture newly loaded images.
  3. Avoiding Unnecessary Image Processing:
    • By combining the debouncing approach with the observer, the script ensures that it’s not repeatedly processing the same images or constantly checking for changes.

How This Script Works:​


  • Image Processing:
    • It looks for images that have preview.redd.it or i.redd.it in their source URLs. It then either converts preview.redd.it URLs to direct i.redd.it URLs or removes query parameters from existing i.redd.it URLs.
  • Debounce:
    • The debounce function ensures that cleanImageLinks is not triggered too often when the page's DOM is constantly changing, such as with dynamically-loaded content. This reduces CPU consumption and prevents redundant operations.
  • MutationObserver:
    • The script monitors the body for changes and runs the cleaning function only when new content (like images) is added, improving performance, especially on websites with dynamic content.

How to Use:​


  1. Install a userscript manager like Tampermonkey or Greasemonkey.
  2. Create a new script and paste the updated code into the script editor.
  3. Save and enable the script.
  4. Visit any website that contains preview.redd.it or i.redd.it image URLs, and the script will automatically clean up the image URLs.

This updated version of the userscript is designed to optimize performance while ensuring that unnecessary resources are not consumed. It should work efficiently on both static and dynamic websites.
 

bnew

Veteran
Joined
Nov 1, 2015
Messages
60,068
Reputation
8,966
Daps
165,992
this is an bugfix of a version of a nitter filter script that didn't work on search results that had "?cursor=" in them. it does slightly more than hide it deletes the entries from DOM to keep memory lower.


Summary of What the Bookmarklet Does on Nitter Instances​

When you run this bookmarklet on any Nitter instance, it will modify the web page by adding new features that allow you to hide or show tweets based on the users who posted them and whether the tweet contains media (like images or videos). Below is an extensive breakdown of the features it provides:

Key Features:​

  1. Counter for Hidden Tweets:
    • The bookmarklet will display a small counter at the bottom right of your screen that tracks how many tweets you have hidden.
    • Initially, this number will be 0 since no tweets are hidden. If you hide a tweet, the counter will increase by one, and if you unhide a tweet, it will decrease.
  2. A Filter Window:
    • It will create a small "filter window" on the top right of the page where you can manage your tweet filtering options.
    • This filter window will allow you to interact with some checkboxes and a list of usernames. The window is draggable, meaning you can move it around the page if you don't like where it is.
  3. Usernames List:
    • Inside the filter window, there will be a list of usernames of people who posted tweets. This list is dynamically updated as new tweets are loaded.
    • Next to each username, there is a checkbox. You can select or deselect users you want to filter.
  4. Select All & Exclude Options:
    • The filter window has two important options:
      1. Select All: This checkbox will allow you to quickly select or deselect all usernames in the list.
      2. Exclude Selected Usernames: If this option is checked, the script will hide all tweets from the selected users.
        • If you uncheck it, it will instead show only tweets from the selected users.
  5. Hiding and Showing Tweets:
    • The bookmarklet can hide tweetsbased on two things:
      1. Usernames: If you've selected certain usernames in the list, you can choose to hide tweets from those users (or show only their tweets, depending on the exclusion setting).
      2. Media: If a tweet doesn't have images or videos (media), it will be hidden by default.
  6. Draggable Filter Window:
    • The filter window itself is draggable, which means you can click and drag it around the screen to place it wherever you want.
    • There’s a small "handle" at the top of the filter window that you can click to move the window.
  7. Handling Media Tweets:
    • The bookmarklet will check each tweet to see if it contains media (like images or videos).
    • If a tweet doesn't have media, it will be hidden automatically.
    • If a tweet does have media, it will be shown unless you specifically hide it by selecting a username or using other filters.
  8. Dynamic Updates:
    • As new tweets are loaded onto the page (like when you scroll down), the bookmarklet will automatically check these new tweets.
    • It will add new usernames to the list in the filter window if they haven’t been added yet.
    • It will continue to hide tweets without media, and you can continue to filter tweets by username using the same interface.
  9. Real-Time Modifications:
    • The bookmarklet listens for changes on the page (like new tweets being added) and updates the view accordingly.
    • It doesn’t require you to refresh the page. It updates in real-time as new content appears on the screen.
  10. Visual Tweaks Based on Light/Dark Mode:
    • The appearance of the filter window and other elements adjusts depending on whether you're using a light mode or dark mode theme on the page. For example, the background of the filter window will be dark in dark mode and light in light mode.

What Happens When You Use the Bookmarklet:​

  1. You Load the Nitter Instance:
    • You visit a Nitter instance (a platform that serves as an alternative to Twitter) where you want to filter tweets.
  2. You Activate the Bookmarklet:
    • You run the bookmarklet by clicking on it in your browser’s bookmarks bar.
  3. The Bookmarklet Adds New UI Elements:
    • A small counter showing the number of hidden tweets is added at the bottom right.
    • A filter window appears on the top right corner, showing a list of users who have tweeted.
  4. You Interact with the Filters:
    • You can select or deselect usernames in the list to filter tweets by those specific users.
    • You can hide tweets without media (images or videos).
    • You can choose to exclude certain users, meaning their tweets will be hidden.
  5. Tweets Get Hidden or Shown:
    • As you apply the filters, tweets that don’t meet your criteria (e.g., tweets from selected users or without media) will automatically be hidden.
    • The counter at the bottom will increase or decrease based on how many tweets are hidden.
    • Tweets that meet the criteria (e.g., media tweets or tweets from non-excluded users) will be shown.
  6. Real-Time Filtering as New Tweets Load:
    • As you scroll through the page, new tweets will be dynamically added to the page, and the bookmarklet will continue to check these new tweets for media or matching usernames, applying the same filters you’ve set.

In Simple Terms:​

  • The bookmarklet helps you customize your Twitter feed (or Nitter feed) by allowing you to hide tweets you don’t care about.
  • It lets you filter out tweets by specific users or based on whether they have images or videos.
  • You can show or hide tweets from specific people using the filter options, and it will update automatically as you scroll and new tweets are loaded.
  • The bookmarklet provides you with an easy-to-use interface to control which tweets you see and which ones you don’t, helping you focus on the content that matters most to you.
This is useful if you want to clean up your feed, ignore tweets from certain people, or simply see more media-rich tweets without manually scrolling through and filtering.

 

bnew

Veteran
Joined
Nov 1, 2015
Messages
60,068
Reputation
8,966
Daps
165,992
Here's a comprehensive explanation of what this userscript does and how non-technical users can customize it:

What This Userscript Does

This script gives you a floating button to hide/show specific types of images on webpages. It’s like a magic filter for images you don’t want to see. Here’s what it controls:

1. Hides Annoying Images Automatically

  • Blocks Memes/Reactions: Automatically hides small smiley faces, avatars, or reaction GIFs (common in forums).
  • Blocks Giphy GIFs: If enabled, hides all GIFs from Giphy.com (popular GIF platform).
  • Blocks Tiny Images: Hides images smaller than a specified size (e.g., anything under 400x400 pixels).

2. Toggle Button for Easy Control

  • A fixed "Hide Images"/"Show Images" button appears at the bottom-right corner of your screen.
  • Click it once to hide unwanted images; click again to bring them back.

3. Smart Memory

  • Remembers which images it hid, so they stay hidden even if you scroll or reload the page (until you click the button again).

How Ordinary Users Can Customize It

You don’t need coding skills to tweak these settings. Just edit the numbers/text in the script’s configuration section:

1. Change What’s Hidden

  • Block Giphy GIFs:
    Find const hideGiphy = true;
    Set to true (hide) or false (allow).
  • Add New Keywords:
    Find the imgKeywords list. Add URL parts to block:

    javascript
    const imgKeywords = [
    "example.com/bad-images/", // Add your own
    "annoyingads.com" // New keyword
    ];

2. Adjust Size Limits

  • Minimum Image Size:

    javascript
    const minWidth = 400; // Minimum width (pixels)
    const minHeight = 400; // Minimum height (pixels)
    Change these numbers to block smaller/larger images.
  • Turn Size Filtering On/Off:
    Set const minSizeEnabled = true; to false to disable size checks.

3. Customize the Button

  • Button Color/Text:
    Modify these lines:

    javascript
    button.style.backgroundColor = '#333'; // Dark gray
    button.style.color = '#fff'; // White text
    button.textContent = 'Hide Images'; // Button label
    Use color names ('red') or hex codes ('#FF0000').
  • Button Position:
    Adjust bottom and right values (e.g., bottom: '50px' to move it higher).

How to Edit the Script

  1. Open your browser’s extension for userscripts (e.g., Tampermonkey).
  2. Find this script in the dashboard and click Edit.
  3. Modify the settings in the CONFIGURATION SETTINGS section (top of the code).
  4. Save and refresh the webpage to test your changes.

Example Customizations

  • Block Twitter Images: Add "twitter.com" to imgKeywords.
  • Allow Small Images: Set minSizeEnabled = false;.
  • Make the Button Pink: Change backgroundColor = 'pink'.

Notes for Non-Coders

  • Changes only affect websites matching *://*www.thecoli.com/threads/* (edit the @match line to apply elsewhere).
  • Typos (e.g., missing commas/quotes) will break the script. Double-check your edits!
  • If you break it, just reinstall the original script.
This script puts you in control of your browsing experience without needing to learn programming. Experiment with the settings to match your preferences!


 
Last edited:

bnew

Veteran
Joined
Nov 1, 2015
Messages
60,068
Reputation
8,966
Daps
165,992
created with deepseek-V3

Here’s a **userscript version** of the script that automatically refreshes the page if the title contains "Error - Invidious". This userscript will only run on URLs that include `invidious` in the address bar, as specified by the `@include` metadata.

### Userscript Code:
JavaScript:
// ==UserScript==
// @name         Auto Refresh Invidious on Error
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Automatically refreshes the page if the title contains "Error - Invidious".
// @author       Your Name
// @include      *invidious*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // Check if the title contains "Error - Invidious"
    if (document.title === "Error - Invidious") {
        console.log("Error detected. Refreshing page...");
        setTimeout(function() {
            location.reload();
        }, 2000); // Refresh after 2 seconds
    }
})();

### How to Use:
1. Install a userscript manager like [Tampermonkey](https://www.tampermonkey.net/) or [Violentmonkey](https://violentmonkey.github.io/) in your browser.
2. Create a new userscript in the manager.
3. Copy and paste the code above into the userscript editor.
4. Save the userscript.

### Explanation:
- **`@include *invidious*`**: Ensures the script only runs on URLs containing the word `invidious`.
- **`document.title === "Error - Invidious"`**: Checks if the page title matches the error condition.
- **`setTimeout`**: Delays the page refresh by 2 seconds (2000 milliseconds) to avoid immediate reloading.
- **`location.reload()`**: Refreshes the page.

### Notes:
- The script will only run on pages where the URL contains `invidious`.
- If the title matches "Error - Invidious", the page will automatically refresh after 2 seconds.
- You can adjust the delay by changing the `2000` value in `setTimeout`.
 

bnew

Veteran
Joined
Nov 1, 2015
Messages
60,068
Reputation
8,966
Daps
165,992
Here's a bookmarklet that extracts all Sendvid links from the page, converts them from embed URLs to full URLs, and displays them in a floating window:



### How to Use:
1. Copy the entire code above.
2. Create a new bookmark in your browser.
3. Paste the code into the URL field of the bookmark.
4. Save the bookmark.
5. When you're on a page with Sendvid embed links, click the bookmark to run the script.

### What It Does:
- The script searches for all `<iframe>` elements that contain Sendvid embed links.
- It extracts the video IDs and converts them into full Sendvid URLs.
- A floating window appears on the page, displaying the full Sendvid links.
- You can copy all the links to your clipboard with the "Copy All Links" button.
- The floating window can be dragged around the screen for convenience.
 

bnew

Veteran
Joined
Nov 1, 2015
Messages
60,068
Reputation
8,966
Daps
165,992
loicpwH.png

xenforo dynamic image collector ; developed using sonar-reasoning , possibly afinetune of deepseek-R1

What This Code Does

This code creates a bookmarklet – a special kind of browser bookmark that runs JavaScript instead of opening a webpage. When you click it, it performs several tasks on the current webpage:

Key Features

  1. Image Collector
    • Scans the page for images with specific file types (GIF, JPG, PNG, WEBP).
    • Ignores images from certain websites (like cdn.jsdelivr.net or thecoli.com/styles/).
    • Shows thumbnails of the collected images in a floating panel.
  2. Floating Panel
    • Creates a movable window (like a pop-up) on the right side of your screen.
    • Displays images, their URLs, and buttons to copy or delete them.
  3. Copy Buttons
    • Copies all image URLs to your clipboard (useful for sharing or downloading).
    • Shows URLs in two formats:
      • Multi-line (one URL per line).
      • Single-line (all URLs separated by spaces).
  4. Toggle Switch
    • Lets you switch between showing all images or only GIFs.
    • Updates the panel instantly when toggled.
  5. Drag Handle
    • A "Drag Here" label at the top of the panel lets you move it anywhere on the screen.
  6. Delete Button
    • Removes individual images from the panel (and their URLs) with a small × button.
  7. Notifications
    • Shows pop-up messages (like "URLs copied!") to confirm actions.

How It Works

  1. Click the Bookmarklet
    • It scans the page for images matching your criteria (e.g., "Show All Images" or "Show GIFs Only").
  2. Floating Panel Appears
    • Shows thumbnails of the images and their URLs.
    • You can drag the panel to reposition it.
  3. Copy URLs
    • Click "Copy All URLs" to copy all image links to your clipboard.
    • Click "Copy Single Line URLs" for a single-line format.
  4. Delete Images
    • Click the × on any thumbnail to remove it from the panel.
  5. Toggle Image Types
    • Click "Show All Images" or "Show GIFs Only" to filter the results.

Why It’s Useful

  • Quick Access: No need to open the browser console or use extensions.
  • Customizable: Adjust the image types or exclude specific URLs.
  • Portable: Works on any webpage and syncs across devices via bookmarks.
  • User-Friendly: Non-technical users can click and interact without coding.

How to Use It

  1. Save as a Bookmark
    • Copy the code.
    • Create a new bookmark in your browser.
    • Paste the code into the "Location" field.
  2. Click the Bookmark
    • On any webpage, click the bookmark to activate the panel.
  3. Interact with the Panel
    • Drag it, toggle image types, copy URLs, or delete images.

Common Questions

  • "Why are some images missing?"
    The code ignores images from specific websites (like cdn.jsdelivr.net) or URLs containing "unicode".
  • "How do I move the panel?"
    Click and drag the "Drag Here" label at the top.
  • "Why does it show duplicates?"
    The code removes duplicates by default. If duplicates appear, refresh the page and try again.

Limitations

  • Browser Restrictions: Some websites block JavaScript execution for security.
  • Performance: Large pages with many images may slow down the panel.
  • No Persistence: The panel disappears when you close it or refresh the page.

Example Use Cases

  • Download Images: Copy URLs to download images in bulk.
  • Content Moderation: Quickly remove sensitive images from a page.
  • Research: Collect and organize images for projects or presentations.
This code is a versatile tool for managing images on webpages, with features that make it both powerful and user-friendly.


edit:
updated 2/8/25
added checkbox to scroll to image


 
Last edited:

bnew

Veteran
Joined
Nov 1, 2015
Messages
60,068
Reputation
8,966
Daps
165,992

How to Update the Userscript​

  1. Open Your Userscript Manager:
    • If you are using Tampermonkey, open the Tampermonkey dashboard.
    • If you are using Violentmonkey, open the Violentmonkey dashboard.
  2. Edit the Existing Script:
    • Find the script named "Mastodon Redirect Auto-Redirector".
    • Click on "Edit" to open the script editor.
  3. Replace the Script Content:
    • Copy the updated script code provided above.
    • Paste it into the script editor, replacing the existing content.
  4. Save the Script:
    • Save the changes to the script.

How to Test the Updated Userscript​

  1. Navigate to a Mastodon Redirect Page:
    • Go to any Mastodon instance redirect page that contains /redirect/ in the URL.
  2. Check the Console for Debugging:
    • Open your browser's developer console (usually by pressing F12 or right-clicking and selecting "Inspect").
    • Go to the "Console" tab to see the debug messages.

Example Debug Output​

If everything works correctly, you should see output like this in the console:

Mastodon Redirect Auto-Redirector started.
Attempting to find redirect link...
Redirect link found: [URL]https://example.social/@user/1234567890[/URL]
Redirecting to: [URL]https://example.social/@user/1234567890[/URL]
If no redirect link is found initially, you'll see:

Mastodon Redirect Auto-Redirector started.
Attempting to find redirect link...
No redirect link found. Retrying in 1 second...

Additional Tips​

  • Ensure the Page is Fully Loaded: Sometimes the redirect link might not be available immediately when the script runs. The retry mechanism helps mitigate this.
  • Check for Multiple Redirects: If the page has multiple redirects, ensure the script is targeting the correct link.
  • Inspect the Page Structure: If the script still doesn't work, inspect the HTML structure of the redirect page to ensure the selector .redirect__message a[href] is correct. The structure might vary between different Mastodon instances.




JavaScript:
// ==UserScript==
// @name         Mastodon Redirect Auto-Redirector
// @namespace    http://tampermonkey.net/
// @version      1.1
// @description  Automatically redirects to the target URL on Mastodon redirect pages
// @author       Kimi
// @include      */redirect/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    console.log('Mastodon Redirect Auto-Redirector started.');

    // Function to find and redirect to the link
    function attemptRedirect() {
        console.log('Attempting to find redirect link...');
        const redirectLink = document.querySelector('.redirect__message a[href]');

        if (redirectLink) {
            console.log('Redirect link found:', redirectLink.href);
            console.log('Redirecting to:', redirectLink.href);
            window.location.href = redirectLink.href;
        } else {
            console.warn('No redirect link found. Retrying in 1 second...');
            setTimeout(attemptRedirect, 1000); // Retry after 1 second
        }
    }

    // Start the redirect attempt
    attemptRedirect();
})();
 
Last edited:
Top