☰

Greasy Fork is available in English.

Prolific add "Take part in this study" Button to top of page

Continuously scans for the "Take part in this study" button and clones it to the top-right corner

// ==UserScript==
// @name         Prolific add "Take part in this study" Button to top of page
// @namespace    http://tampermonkey.net/
// @version      0.3
// @description  Continuously scans for the "Take part in this study" button and clones it to the top-right corner
// @author       You
// @match        https://app.prolific.com/studies*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // Function to create and position the cloned button
    function addClonedButton(originalButton) {
        // If the cloned button already exists, do nothing
        if (document.querySelector('#cloned-study-button')) return;

        // Clone the original button
        const clonedButton = originalButton.cloneNode(true);
        clonedButton.id = 'cloned-study-button'; // Add an ID to the cloned button to prevent duplicates

        // Style the cloned button to overlay at the top-right
        clonedButton.style.position = 'fixed';
        clonedButton.style.top = '70px';
        clonedButton.style.right = '10px';
        clonedButton.style.zIndex = '1000'; // Ensure it's above other elements
        clonedButton.style.backgroundColor = '#007bff'; // Optionally style the button
        clonedButton.style.padding = '10px';
        clonedButton.style.borderRadius = '5px';
        clonedButton.style.cursor = 'pointer';
        clonedButton.style.boxShadow = '0 2px 10px rgba(0, 0, 0, 0.1)'; // Add a subtle shadow

        // Append the cloned button to the body
        document.body.appendChild(clonedButton);

        // Ensure clicking the cloned button triggers the original button's click event
        clonedButton.addEventListener('click', function() {
            originalButton.click(); // Trigger the original button's click
        });

        console.log("Cloned 'Take part in this study' button added.");
    }

    // Function to check for the button and clone it if found
    function checkForButton() {
        const originalButton = document.querySelector('.reserve-study-button[data-testid="reserve"]');

        // If the button is found, clone it and add it to the top-right
        if (originalButton) {
            addClonedButton(originalButton);
        }
    }

    // Initial check on page load
    checkForButton();

    // Continuously check for the button at intervals (fallback for observer)
    setInterval(checkForButton, 3000); // Check every 3 seconds

    // MutationObserver to detect changes to the DOM
    const observer = new MutationObserver(() => {
        checkForButton();
    });

    // Start observing changes to the body
    observer.observe(document.body, { childList: true, subtree: true });
})();