// ==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

<?php
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);
}

});

// ==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 );
    }
}();

// ==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 );
    }
}();

// ==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';

})();

// ==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);

// ==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);
})();

// ==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);
})();

// ==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);
})();

// ==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
        }
    }
})();

// ==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);
    }
})();

// ==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();
})();

// ==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);
})();

// ==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);
            });
        });
    });
})();