www.xbdev.net
xbdev - software development
Tuesday February 4, 2025
Home | Contact | Support | UserScripts Unlock Your Browsers Potential ....
<<
 

Advert (Support Website)
Learn to develop ray-tracing solutions (including concepts like path-tracing and ray-marching) in your browser using the WebGPU API.... Lots of projects to keep you busy with WebGPU and WGSL! You won't get bored - and you'll build a great porfolio of projects for your resume. It's just not easy getting started! And Vulkan is a real challenge - especially if you've had a look at even the simplest code example - it boasts being a new api that gives the power to the developes - but with that power comes extra work. This text is about trying to simplify that!
Amazon



 
     
 

UserScripts

Unlock Your Browsers Potential ....

  







UserScripts are one of those little gems that makes your life easier. You no longer need to be bound to what the web gives you - it frees you to make the web do what you want from it! Userscripts shift the power to you!

UNLEASH THE POWER OF YOUR WEB BROWSER - Don't be content with what you're given - Shift the power and customize your browsing experience to fit your unique needs.

The ability to quickly and easily modify web pages using small customized scripts is a life changer. Like most people, you probably use the web reguarly for all sorts of tasks - yet, they are prisoners to annoying adverts, layouts, annoying tasks.....

And it's not just about creating buttons or changing the website colors (themes), UserScripts can be used for all sorts of tasks (make websites into games, manipulate data, automate tedious tasks, ...).



UserScripts give you a feeling... - Image from
UserScripts give you a feeling... - Image from 'Hackers' 1995 - 'Wouldn't you just love to get in one of those Gibsons, baby?'



Once you start using UserScripts you'll wonder how you ever did without them - tasks that would have took you hours suddenly take minutes - surfing webpages and finding information - suddenly becomes fun and easy!


About the UserScripts Coffee Series Book (In A Nutshell)

Unlock your web-browser's potential using the UserScripts Amazon


The book isn't an in-depth introduction to JavaScript, instead it's focus is on UserScripts - using examples and projects to show you how to wield their power. It's a quick-start guide! It's intended to get you up and running quickly - such as initializing your first script, getting something on screen, loading external libraries and more.

The userscript coffee book is for those who want to get up to speed quick - but don't have the time! Is there ever enought time? Anyhow, a pocket book that you can go through in your spare time - while waiting on a coffee shop, on the bus, in queue at the supermarket, laying in bed.... Use those spare moments to make your life better.


The following gives you examples of minimal working userscripts programs - from viewing page statistics to loading external libraries and scraping data. Userscripts are very elegant and compact - and can do a lot in a few lines of code. Remember, the UserScript language is just JavaScript - but is for the `user` you!



Variables and Functions


Click to Show Details
// ==UserScript==
// @name         Example Userscript
// @version      1.0.0
// @description  Demonstrating Script Variables/Functions
// ==/UserScript==

// Define a script variable
var counter = 0;

// Function that uses the script variable
function incrementCounter() {
  counter++;
  console.log('Counter:', counter);
}

// Another function that uses the script variable
function resetCounter() {
  counter = 0;
  console.log('Counter reset.');
}

// Usage of the script variable and functions
incrementCounter(); // Output: Counter: 1
incrementCounter(); // Output: Counter: 2
resetCounter();     // Output: Counter reset.
incrementCounter(); // Output: Counter: 1



External Scripts


Click to Show Details
defer(function() {

'use strict';

{
let scripts = document.createElement('script');
scripts.src = 'https://d3js.org/d3.v7.min.js';
document.body.appendChild(scripts);
}

{
let scripts = document.createElement('script');
scripts.src = 'https://cdnjs.cloudflare.com/ajax/libs/tabulator/5.4.4/js/tabulator.min.js';
document.body.appendChild(scripts);
}

{
let link = document.createElement('link');
//link.id   = cssId;
link.rel  = 'stylesheet';
link.type = 'text/css';
link.href = 'https://cdnjs.cloudflare.com/ajax/libs/tabulator/5.4.4/css/tabulator.min.css';
link.media = 'all';
document.body.appendChild(link);
}

});



Listing All Images


Click to Show Details
// ==UserScript==
// @name         Get Image Data
// @namespace    
// @description  Lists all the images on the page 
// @match        https://*/*
// @grant        none
// @run-at       document-idle
// @version      0.0.1
// ==/UserScript==


/* globals $ */
()=>{
    let imgs = document.getElementsByTagName('img');
    console.log( 'number of images:', imgs.length );
    
    // Let's list the url for each image
    for (let i=0; i<imgs.length; i++)
    {
        console.log( 'img url:', imgs[i].url );
    }
}();



Viewing All Images


Click to Show Details
// ==UserScript==
// @name         View All Images
// @namespace    
// @description  View all the images loaded by the page 
// @match        https://*/*
// @grant        none
// @run-at       document-idle
// @version      0.0.1
// ==/UserScript==


/* globals $ */
()=>{
    let imgs = document.getElementsByTagName('img');
    console.log( 'number of images:', imgs.length );
    
    // Let's list the url for each image
    for (let i=0; i<imgs.length; i++)
    {
        console.log( 'img url:', imgs[i].url );
        
        let img = document.createElement('img');
        img.width  = 200;
        img.height = 200;
        img.src = imgs[i].url;
        document.body.appendChild( img );
    }
}();



Downloading All Images (ZIP)


Click to Show Details
// ==UserScript==
// @name         Download All Images
// @namespace    
// @description  Add buttons to download all images as zip 
// @match        https://*/*
// @grant        none
// @run-at       document-idle
// @version      0.0.1
// ==/UserScript==

<script src='https://cdnjs.cloudflare.com/ajax/libs/jszip/3.6.0/jszip.min.js'></script>

<script>
(async()=>{

    function zipImages()
    {
        console.log('starting image zipping');
    
        let myzip = new JSZip();
        console.log('created myzip:', myzip );
    
        let imgs = document.getElementsByTagName('img');

        for (let i=0; i<imgs.length; i++)
        {
            const imgurl = imgs[i].url;
        
            const img = document.createElement("img");
            img.crossOrigin="anonymous"
            img.src = imgurl;
            await img.decode(); // wait for it to finish loading
        
            let canvas = document.createElement('canvas');
            let context = canvas.getContext('2d');
            canvas.height = img.naturalHeight;
            canvas.width  = img.naturalWidth;
            context.drawImage(img, 0, 0);
            let imgdata = canvas.toDataURL("image/png"); // alt jpeg
        
            let imgfilename = imgurl.split('/').pop();
        
            console.log('processed image:',  imgfilename);   
        
           // You're generating a data uri, which has schema, mime-type etc before the actual base64 data data:[<MIME-type>][;charset=<encoding>][;base64],<data>. You'll have to remove all the content before the data then use it.
        
           myzip.file(imgfilename, imgdata.substr(imgdata.indexOf(',')+1), {base64: true});
        };

        console.log('creating zip..');
        let content = await myzip.generateAsync({type: "blob"});
        
        var a = document.createElement("a");
        document.body.appendChild( a );
        a.id = 'downloadlink';
        a.style.position = 'absolute';
        a.style.bottom = '20px';
        a.style.left   = '10px';
        a.innerHTML = 'Click to Download Image Zip';
         
        var file = new Blob([ content ], {type: 'octet/stream'});
        a.href = URL.createObjectURL( file );
        a.download = 'images.zip';
        a.style['font-size'] = '20pt';
        
    }// end zipImages()


    let but1 = document.createElement('button');
    holder.appendChild( but1 );
    but1.innerHTML = 'Zip All Images';
    but1.onclick   = zipImages;
    but1.style.padding = '5px';

})();



Recording Actions


Click to Show Details
// ==UserScript==
// @name         Record Actions
// @namespace    
// @description  Add buttons to record actions 
// @match        https://*/*
// @grant        none
// @run-at       document-idle
// @version      0.0.1
// ==/UserScript==


/* globals $ */


async function myloaded() {
    'use strict';
    
    console.log('starting record actions userscript');
    
    let holder = document.createElement('div');
    document.body.appendChild( holder );
    holder.style.position = 'fixed';
    holder.style.left = '5px';
    holder.style.top  = '5px';
    holder.style['z-index'] = "99999999";
    holder.style.backgroundColor = 'yellow';
    
    let but1 = document.createElement('button');
    holder.appendChild( but1 );
    but1.innerHTML = 'Start';
    but1.onclick = startRecordActions;
    but1.style.padding = '5px';
    
    let but2 = document.createElement('button');
    holder.appendChild( but2 );
    but2.innerHTML = 'Stop';
    but2.style.padding = '5px';
    but2.onclick = stopRecordActions;
};

// boolean logging or 'not' logging
var logging = false;
// Variables to store mouse coordinates and clicked element
var mouseX, mouseY, mouseElement, clickedElement;


async function stopRecordActions( ) 
{
    console.log( 'stopRecordActions');
    // ----------------------------------
    logging = false;
}

async function startRecordActions( ) 
{
    console.log( 'startRecordActions' );
    
    // ----------------------------------
    // Output mouse coordinates, clicked element, and XPath to console
    
    logging = true;
}

function log()
{
    if ( !logging ) return;
    
    console.log('Mouse coordinates:', mouseX, mouseY);
    console.log('Mouse over element:', mouseElement);
    console.log('XPath:', getElementXPath(mouseElement));
    console.log('-------')
}

// Add event listeners for click, mousemove, and keydown events
document.addEventListener('click', function(event) {
  //clickedElement = event.target;
  log();
});

// Add event listener for mouse movement
document.addEventListener('mousemove', function(event) {
  mouseX       = event.clientX;
  mouseY       = event.clientY;
  mouseElement = document.elementFromPoint(mouseX, mouseY);
});

// Add event listener for key inputs
document.addEventListener('keydown', function(event) {
  console.log('Key pressed:', event.key);
  //if ( event.altKey == true )
  {
      log();
  }
});

// Function to get the XPath of an element
function getElementXPath(element) {
  if (element && element.id) {
    return 'id("' + element.id + '")';
  } else {
    return getElementTreeXPath(element);
  }
}

function getElementTreeXPath(element) {
  var paths = [];
  for (; element && element.nodeType == Node.ELEMENT_NODE; element = element.parentNode) {
    var index = 0;
    for (var sibling = element.previousSibling; sibling; sibling = sibling.previousSibling) {
      if (sibling.nodeName == element.nodeName) {
        ++index;
      }
    }
    var tagName = element.nodeName.toLowerCase();
    var pathIndex = (index ? "[" + (index+1) + "]" : "");
    paths.splice(0, 0, tagName + pathIndex);
  }
  return paths.length ? "/" + paths.join("/") : null;
}


// wait until the window is loaded
function mydefer(method) 
{
    if ( document.readyState === 'complete' )
    {
        method();
    }
    else 
    {
        setTimeout(function() { mydefer(method); }, 100);
    }
}

// add small delay before userscript starts
setTimeout(function() {

    if ( window.location !== window.parent.location ) {
        // The page is in an iframe
        // window inside a window!
        console.log('page is inside an iframe');
        return;
    }


    mydefer( myloaded );
}, 100);



Page Visit Counter


Click to Show Details
// ==UserScript==
// @name         Page Visit Counter
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Shows the number of times you've visited the page
// @author       Your Name
// @match        *://*/*
// @grant        GM_getValue
// @grant        GM_setValue
// @grant        GM_addStyle
// ==/UserScript==

(function() {
    'use strict';

    const currentUrl = window.location.href;
    const visitCountKey = `visit_count_${currentUrl}`;
    let visitCount = GM_getValue(visitCountKey, 0);

    // Increment visit count
    visitCount++;
    GM_setValue(visitCountKey, visitCount);

    // Create a button to show visit count
    const visitCountButton = document.createElement('div');
    visitCountButton.textContent = `Visits: ${visitCount}`;
    visitCountButton.style.position = 'fixed';
    visitCountButton.style.top = '10px';
    visitCountButton.style.right = '10px';
    visitCountButton.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
    visitCountButton.style.color = 'white';
    visitCountButton.style.padding = '5px 10px';
    visitCountButton.style.borderRadius = '5px';
    visitCountButton.style.zIndex = '10000';
    visitCountButton.style.cursor = 'pointer';

    // Add button to the page
    document.body.appendChild(visitCountButton);
})();



Site Statistics


Click to Show Details
// ==UserScript==
// @name         Page Statistics Button
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Adds a button that shows statistics about the webpage when clicked
// @author       Your Name
// @match        *://*/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // Function to count words on the page
    function countWords() {
        const text = document.body.innerText || document.body.textContent;
        const words = text.match(/\b\S+\b/g) || [];
        return words.length;
    }

    // Function to count elements with a specific tag name
    function countTags(tagName) {
        return document.getElementsByTagName(tagName).length;
    }

    // Function to gather and display statistics
    function showStatistics() {
        const numWords = countWords();
        const numTags = document.getElementsByTagName('*').length;
        const numImages = countTags('img');
        const numLinks = countTags('a');

        alert(
            `Page Statistics:\n` +
            `- Number of words: ${numWords}\n` +
            `- Number of tags: ${numTags}\n` +
            `- Number of images: ${numImages}\n` +
            `- Number of links: ${numLinks}\n`
        );
    }

    // Create a button to show statistics
    const statsButton = document.createElement('div');
    statsButton.textContent = 'Show Stats';
    statsButton.style.position = 'fixed';
    statsButton.style.top = '10px';
    statsButton.style.right = '10px';
    statsButton.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
    statsButton.style.color = 'white';
    statsButton.style.padding = '5px 10px';
    statsButton.style.borderRadius = '5px';
    statsButton.style.zIndex = '10000';
    statsButton.style.cursor = 'pointer';

    // Add click event to the button
    statsButton.addEventListener('click', showStatistics);

    // Add button to the page
    document.body.appendChild(statsButton);
})();



Image Madness


Click to Show Details
// ==UserScript==
// @name         Image Madness
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Replace images with white rectangles that bounce around the screen
// @author       Your Name
// @match        *://*/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // Function to initialize the madness
    function initImageMadness() {
        const images = document.getElementsByTagName('img');
        const imageCount = images.length;

        // Convert images to bouncing white rectangles
        for (let i = 0; i < imageCount; i++) {
            const img = images[i];
            const rect = document.createElement('div');
            const imgStyles = window.getComputedStyle(img);

            // Set initial styles
            rect.style.position = 'absolute';
            rect.style.width = imgStyles.width;
            rect.style.height = imgStyles.height;
            rect.style.backgroundColor = 'white';
            rect.style.left = img.offsetLeft + 'px';
            rect.style.top = img.offsetTop + 'px';
            rect.style.border = '1px solid black';

            // Replace image with the white rectangle
            img.style.visibility = 'hidden';
            img.parentElement.insertBefore(rect, img);

            // Initialize movement properties
            const dx = Math.random() * 4 + 1;
            const dy = Math.random() * 4 + 1;
            rect.dx = dx;
            rect.dy = dy;

            // Add animation to each rectangle
            animateRectangle(rect);
        }
    }

    // Function to animate rectangles
    function animateRectangle(rect) {
        const move = () => {
            const rectStyles = window.getComputedStyle(rect);
            const left = parseFloat(rectStyles.left);
            const top = parseFloat(rectStyles.top);
            const width = parseFloat(rectStyles.width);
            const height = parseFloat(rectStyles.height);

            // Bounce off the walls
            if (left + width >= window.innerWidth || left <= 0) {
                rect.dx = -rect.dx;
            }
            if (top + height >= window.innerHeight || top <= 0) {
                rect.dy = -rect.dy;
            }

            // Move the rectangle
            rect.style.left = (left + rect.dx) + 'px';
            rect.style.top = (top + rect.dy) + 'px';

            // Request next frame
            requestAnimationFrame(move);
        };
        requestAnimationFrame(move);
    }

    // Create a button to start the madness
    const madnessButton = document.createElement('div');
    madnessButton.textContent = 'Image Madness';
    madnessButton.style.position = 'fixed';
    madnessButton.style.top = '10px';
    madnessButton.style.right = '10px';
    madnessButton.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
    madnessButton.style.color = 'white';
    madnessButton.style.padding = '5px 10px';
    madnessButton.style.borderRadius = '5px';
    madnessButton.style.zIndex = '10000';
    madnessButton.style.cursor = 'pointer';

    // Add click event to the button
    madnessButton.addEventListener('click', initImageMadness);

    // Add button to the page
    document.body.appendChild(madnessButton);
})();



Productivity Timer


Click to Show Details
// ==UserScript==
// @name         Productivity Timer
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Adds a timer to track how long you've been on a webpage with reset and pause buttons, changing color as time increases.
// @author       Your Name
// @match        *://*/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    let startTime = Date.now();
    let elapsedTime = 0;
    let isPaused = false;
    let timerInterval;

    const timerContainer = document.createElement('div');
    timerContainer.style.position = 'fixed';
    timerContainer.style.top = '10px';
    timerContainer.style.right = '10px';
    timerContainer.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
    timerContainer.style.color = 'white';
    timerContainer.style.padding = '10px';
    timerContainer.style.borderRadius = '5px';
    timerContainer.style.zIndex = '10000';
    timerContainer.style.display = 'flex';
    timerContainer.style.flexDirection = 'column';
    timerContainer.style.alignItems = 'center';

    const timerDisplay = document.createElement('div');
    timerDisplay.style.fontSize = '18px';
    timerDisplay.textContent = formatTime(elapsedTime);
    timerContainer.appendChild(timerDisplay);

    const pauseButton = document.createElement('button');
    pauseButton.textContent = 'Pause';
    pauseButton.style.margin = '5px';
    pauseButton.onclick = function() {
        if (isPaused) {
            startTime = Date.now() - elapsedTime;
            timerInterval = setInterval(updateTimer, 1000);
            pauseButton.textContent = 'Pause';
        } else {
            clearInterval(timerInterval);
            elapsedTime = Date.now() - startTime;
            pauseButton.textContent = 'Resume';
        }
        isPaused = !isPaused;
    };
    timerContainer.appendChild(pauseButton);

    const resetButton = document.createElement('button');
    resetButton.textContent = 'Reset';
    resetButton.style.margin = '5px';
    resetButton.onclick = function() {
        clearInterval(timerInterval);
        elapsedTime = 0;
        startTime = Date.now();
        isPaused = false;
        pauseButton.textContent = 'Pause';
        timerDisplay.textContent = formatTime(elapsedTime);
        updateColor();
        timerInterval = setInterval(updateTimer, 1000);
    };
    timerContainer.appendChild(resetButton);

    document.body.appendChild(timerContainer);

    timerInterval = setInterval(updateTimer, 1000);

    function updateTimer() {
        elapsedTime = Date.now() - startTime;
        timerDisplay.textContent = formatTime(elapsedTime);
        updateColor();
    }

    function formatTime(ms) {
        const totalSeconds = Math.floor(ms / 1000);
        const hours = Math.floor(totalSeconds / 3600);
        const minutes = Math.floor((totalSeconds % 3600) / 60);
        const seconds = totalSeconds % 60;
        return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
    }

    function updateColor() {
        const totalSeconds = Math.floor(elapsedTime / 1000);
        if (totalSeconds < 60) {
            timerContainer.style.backgroundColor = 'rgba(0, 128, 0, 0.5)'; // Green
        } else if (totalSeconds < 300) {
            timerContainer.style.backgroundColor = 'rgba(255, 165, 0, 0.5)'; // Orange
        } else {
            timerContainer.style.backgroundColor = 'rgba(255, 0, 0, 0.5)'; // Red
        }
    }
})();



Image Stats and Downloader


Click to Show Details
// ==UserScript==
// @name         Image Info and Download Button
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Adds resolution info and a download button to each image on the webpage.
// @author       Your Name
// @match        *://*/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    function addImageInfoAndButton(image) {
        // Create a container div for the resolution info and download button
        const container = document.createElement('div');
        container.style.position = 'absolute';
        container.style.bottom = '0';
        container.style.left = '0';
        container.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
        container.style.color = 'white';
        container.style.fontSize = '10px';
        container.style.padding = '2px';
        container.style.display = 'flex';
        container.style.alignItems = 'center';
        container.style.zIndex = '10000';

        // Add resolution info
        const resolutionInfo = document.createElement('span');
        resolutionInfo.textContent = `${image.naturalWidth}x${image.naturalHeight}`;
        resolutionInfo.style.marginRight = '5px';
        container.appendChild(resolutionInfo);

        // Add download button
        const downloadButton = document.createElement('button');
        downloadButton.textContent = 'Download';
        downloadButton.style.fontSize = '10px';
        downloadButton.style.margin = '0';
        downloadButton.style.padding = '0 2px';
        downloadButton.style.cursor = 'pointer';
        downloadButton.onclick = function() {
            const link = document.createElement('a');
            link.href = image.src;
            link.download = image.src.split('/').pop();
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        };
        container.appendChild(downloadButton);

        // Set the container's position
        const parent = image.parentElement;
        parent.style.position = 'relative';
        parent.appendChild(container);
    }

    // Find all images on the page and add the info and button
    const images = document.getElementsByTagName('img');
    for (let img of images) {
        addImageInfoAndButton(img);
    }
})();



History Tracker


Click to Show Details
// ==UserScript==
// @name         Visited Pages Dropdown
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Adds a dropdown listing all visited webpages with an option to clear the list.
// @author       Your Name
// @match        *://*/*
// @grant        GM_getValue
// @grant        GM_setValue
// ==/UserScript==

(function() {
    'use strict';

    const VISITED_PAGES_KEY = 'visited_pages';

    // Function to load visited pages from storage
    function loadVisitedPages() {
        return JSON.parse(GM_getValue(VISITED_PAGES_KEY, '[]'));
    }

    // Function to save visited pages to storage
    function saveVisitedPages(pages) {
        GM_setValue(VISITED_PAGES_KEY, JSON.stringify(pages));
    }

    // Function to add the current page to the visited pages list
    function addCurrentPage() {
        const url = window.location.href;
        let pages = loadVisitedPages();
        if (!pages.includes(url)) {
            pages.push(url);
            saveVisitedPages(pages);
        }
    }

    // Function to clear the visited pages list
    function clearVisitedPages() {
        GM_setValue(VISITED_PAGES_KEY, '[]');
        updateDropdown();
    }

    // Function to create and update the dropdown
    function updateDropdown() {
        const pages = loadVisitedPages();
        dropdown.innerHTML = '';
        pages.forEach(page => {
            const option = document.createElement('option');
            option.textContent = page;
            dropdown.appendChild(option);
        });
    }

    // Add the current page to the visited list
    addCurrentPage();

    // Create a dropdown for listing visited pages
    const dropdownContainer = document.createElement('div');
    dropdownContainer.style.position = 'fixed';
    dropdownContainer.style.top = '10px';
    dropdownContainer.style.right = '10px';
    dropdownContainer.style.backgroundColor = 'yellow';
    dropdownContainer.style.padding = '10px';
    dropdownContainer.style.borderRadius = '5px';
    dropdownContainer.style.zIndex = '10000';

    const dropdown = document.createElement('select');
    dropdown.size = '10';
    dropdown.style.width = '300px';
    dropdownContainer.appendChild(dropdown);

    const clearButton = document.createElement('button');
    clearButton.textContent = 'Clear List';
    clearButton.style.marginTop = '5px';
    clearButton.style.display = 'block';
    clearButton.onclick = clearVisitedPages;
    dropdownContainer.appendChild(clearButton);

    document.body.appendChild(dropdownContainer);

    // Update the dropdown with the current list of visited pages
    updateDropdown();
})();



Remove Annoying Elements


Click to Show Details
// ==UserScript==
// @name         Remove Annoying Elements
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Removes annoying elements with options to customize criteria for removal.
// @author       Your Name
// @match        *://*/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // Default criteria for removing elements
    const defaultCriteria = [
        { name: 'Ads', selectors: ['.ad', '.ads', '[id*="ad"]', '[class*="ad"]'] },
        { name: 'Pop-ups', selectors: ['.popup', '.pop-up', '[id*="popup"]', '[class*="popup"]'] },
        { name: 'Overlays', selectors: ['.overlay', '[id*="overlay"]', '[class*="overlay"]'] },
        { name: 'Modals', selectors: ['.modal', '[id*="modal"]', '[class*="modal"]'] }
    ];

    // Load saved criteria from localStorage
    const savedCriteria = JSON.parse(localStorage.getItem('removalCriteria')) || defaultCriteria;

    // Function to remove elements based on criteria
    function removeElements(criteria) {
        criteria.forEach(item => {
            item.selectors.forEach(selector => {
                const elements = document.querySelectorAll(selector);
                elements.forEach(element => element.remove());
            });
        });
    }

    // Function to create the UI
    function createUI() {
        const uiContainer = document.createElement('div');
        uiContainer.style.position = 'fixed';
        uiContainer.style.top = '10px';
        uiContainer.style.right = '10px';
        uiContainer.style.backgroundColor = 'yellow';
        uiContainer.style.padding = '10px';
        uiContainer.style.borderRadius = '5px';
        uiContainer.style.zIndex = '10000';

        const title = document.createElement('div');
        title.textContent = 'Remove Annoying Elements';
        title.style.fontWeight = 'bold';
        title.style.marginBottom = '10px';
        uiContainer.appendChild(title);

        savedCriteria.forEach((item, index) => {
            const label = document.createElement('label');
            label.style.display = 'block';
            label.style.marginBottom = '5px';

            const checkbox = document.createElement('input');
            checkbox.type = 'checkbox';
            checkbox.checked = true;
            checkbox.dataset.index = index;
            label.appendChild(checkbox);

            const span = document.createElement('span');
            span.textContent = item.name;
            label.appendChild(span);

            uiContainer.appendChild(label);
        });

        const applyButton = document.createElement('button');
        applyButton.textContent = 'Apply';
        applyButton.style.marginRight = '5px';
        applyButton.onclick = function() {
            const selectedCriteria = savedCriteria.filter((item, index) => {
                return uiContainer.querySelector(`input[data-index="${index}"]`).checked;
            });
            removeElements(selectedCriteria);
        };
        uiContainer.appendChild(applyButton);

        const customizeButton = document.createElement('button');
        customizeButton.textContent = 'Customize';
        customizeButton.onclick = function() {
            customizeCriteria();
        };
        uiContainer.appendChild(customizeButton);

        document.body.appendChild(uiContainer);
    }

    // Function to customize criteria
    function customizeCriteria() {
        const customizeContainer = document.createElement('div');
        customizeContainer.style.position = 'fixed';
        customizeContainer.style.top = '10px';
        customizeContainer.style.right = '10px';
        customizeContainer.style.backgroundColor = 'white';
        customizeContainer.style.padding = '10px';
        customizeContainer.style.borderRadius = '5px';
        customizeContainer.style.zIndex = '10001';
        customizeContainer.style.boxShadow = '0 0 10px rgba(0,0,0,0.5)';

        const title = document.createElement('div');
        title.textContent = 'Customize Criteria';
        title.style.fontWeight = 'bold';
        title.style.marginBottom = '10px';
        customizeContainer.appendChild(title);

        savedCriteria.forEach((item, index) => {
            const label = document.createElement('label');
            label.style.display = 'block';
            label.style.marginBottom = '5px';

            const input = document.createElement('input');
            input.type = 'text';
            input.value = item.selectors.join(', ');
            input.dataset.index = index;
            input.style.width = '300px';
            label.appendChild(input);

            const span = document.createElement('span');
            span.textContent = ` (${item.name})`;
            label.appendChild(span);

            customizeContainer.appendChild(label);
        });

        const saveButton = document.createElement('button');
        saveButton.textContent = 'Save';
        saveButton.style.marginRight = '5px';
        saveButton.onclick = function() {
            customizeContainer.querySelectorAll('input[type="text"]').forEach(input => {
                const index = input.dataset.index;
                const selectors = input.value.split(',').map(s => s.trim());
                savedCriteria[index].selectors = selectors;
            });
            localStorage.setItem('removalCriteria', JSON.stringify(savedCriteria));
            document.body.removeChild(customizeContainer);
        };
        customizeContainer.appendChild(saveButton);

        const cancelButton = document.createElement('button');
        cancelButton.textContent = 'Cancel';
        cancelButton.onclick = function() {
            document.body.removeChild(customizeContainer);
        };
        customizeContainer.appendChild(cancelButton);

        document.body.appendChild(customizeContainer);
    }

    // Create the UI on page load
    createUI();

    // Automatically remove elements based on saved criteria
    removeElements(savedCriteria);
})();



Doodle Notes


Click to Show Details
// ==UserScript==
// @name         Doodle Notes
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Take a screenshot of the webpage and doodle on it, then save the image with the doodles.
// @author       Your Name
// @match        *://*/*
// @require      https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    let isDrawing = false;
    let startX = 0;
    let startY = 0;

    // Create the Doodle Notes button
    const doodleButton = document.createElement('button');
    doodleButton.textContent = 'Doodle Notes';
    doodleButton.style.position = 'fixed';
    doodleButton.style.top = '10px';
    doodleButton.style.right = '10px';
    doodleButton.style.zIndex = '10000';
    doodleButton.style.padding = '10px';
    doodleButton.style.backgroundColor = 'yellow';
    doodleButton.style.border = 'none';
    doodleButton.style.cursor = 'pointer';
    document.body.appendChild(doodleButton);

    doodleButton.addEventListener('click', () => {
        html2canvas(document.body).then(canvas => {
            // Create a container for the screenshot and doodle tools
            const container = document.createElement('div');
            container.style.position = 'fixed';
            container.style.top = '0';
            container.style.left = '0';
            container.style.width = '100%';
            container.style.height = '100%';
            container.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
            container.style.zIndex = '10001';
            container.style.display = 'flex';
            container.style.justifyContent = 'center';
            container.style.alignItems = 'center';
            document.body.appendChild(container);

            // Create a canvas for doodling
            const doodleCanvas = document.createElement('canvas');
            doodleCanvas.width = canvas.width;
            doodleCanvas.height = canvas.height;
            doodleCanvas.style.cursor = 'crosshair';
            container.appendChild(doodleCanvas);

            const ctx = doodleCanvas.getContext('2d');
            ctx.drawImage(canvas, 0, 0);

            // Create a save button
            const saveButton = document.createElement('button');
            saveButton.textContent = 'Save Doodle';
            saveButton.style.position = 'absolute';
            saveButton.style.top = '20px';
            saveButton.style.right = '20px';
            saveButton.style.zIndex = '10002';
            saveButton.style.padding = '10px';
            saveButton.style.backgroundColor = 'green';
            saveButton.style.color = 'white';
            saveButton.style.border = 'none';
            saveButton.style.cursor = 'pointer';
            container.appendChild(saveButton);

            // Create a close button
            const closeButton = document.createElement('button');
            closeButton.textContent = 'Close';
            closeButton.style.position = 'absolute';
            closeButton.style.top = '20px';
            closeButton.style.right = '120px';
            closeButton.style.zIndex = '10002';
            closeButton.style.padding = '10px';
            closeButton.style.backgroundColor = 'red';
            closeButton.style.color = 'white';
            closeButton.style.border = 'none';
            closeButton.style.cursor = 'pointer';
            container.appendChild(closeButton);

            // Doodling functionality
            doodleCanvas.addEventListener('mousedown', (e) => {
                isDrawing = true;
                startX = e.offsetX;
                startY = e.offsetY;
            });

            doodleCanvas.addEventListener('mousemove', (e) => {
                if (isDrawing) {
                    ctx.beginPath();
                    ctx.moveTo(startX, startY);
                    ctx.lineTo(e.offsetX, e.offsetY);
                    ctx.strokeStyle = 'yellow';
                    ctx.lineWidth = 2;
                    ctx.stroke();
                    ctx.closePath();
                    startX = e.offsetX;
                    startY = e.offsetY;
                }
            });

            doodleCanvas.addEventListener('mouseup', () => {
                isDrawing = false;
            });

            // Save doodle
            saveButton.addEventListener('click', () => {
                const link = document.createElement('a');
                link.href = doodleCanvas.toDataURL();
                link.download = 'doodle.png';
                link.click();
            });

            // Close doodle container
            closeButton.addEventListener('click', () => {
                document.body.removeChild(container);
            });
        });
    });
})();






Resources & Links


• JavaScript Help [LINK]

• Regular Expressions [LINK]

















 
Advert (Support Website)

 
 Visitor:
Copyright (c) 2002-2025 xbdev.net - All rights reserved.
Designated articles, tutorials and software are the property of their respective owners.