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

1// ==UserScript==
2// @name         Prolific add "Take part in this study" Button to top of page
3// @namespace    http://tampermonkey.net/
4// @version      0.3
5// @description  Continuously scans for the "Take part in this study" button and clones it to the top-right corner
6// @author       You
7// @match        https://app.prolific.com/studies*
8// @grant        none
9// @downloadURL https://update.greasyfork.org/scripts/511903/Prolific%20add%20%22Take%20part%20in%20this%20study%22%20Button%20to%20top%20of%20page.user.js
10// @updateURL https://update.greasyfork.org/scripts/511903/Prolific%20add%20%22Take%20part%20in%20this%20study%22%20Button%20to%20top%20of%20page.meta.js
11// ==/UserScript==
12
13(function() {
14    'use strict';
15
16    // Function to create and position the cloned button
17    function addClonedButton(originalButton) {
18        // If the cloned button already exists, do nothing
19        if (document.querySelector('#cloned-study-button')) return;
20
21        // Clone the original button
22        const clonedButton = originalButton.cloneNode(true);
23        clonedButton.id = 'cloned-study-button'; // Add an ID to the cloned button to prevent duplicates
24
25        // Style the cloned button to overlay at the top-right
26        clonedButton.style.position = 'fixed';
27        clonedButton.style.top = '70px';
28        clonedButton.style.right = '10px';
29        clonedButton.style.zIndex = '1000'; // Ensure it's above other elements
30        clonedButton.style.backgroundColor = '#007bff'; // Optionally style the button
31        clonedButton.style.padding = '10px';
32        clonedButton.style.borderRadius = '5px';
33        clonedButton.style.cursor = 'pointer';
34        clonedButton.style.boxShadow = '0 2px 10px rgba(0, 0, 0, 0.1)'; // Add a subtle shadow
35
36        // Append the cloned button to the body
37        document.body.appendChild(clonedButton);
38
39        // Ensure clicking the cloned button triggers the original button's click event
40        clonedButton.addEventListener('click', function() {
41            originalButton.click(); // Trigger the original button's click
42        });
43
44        console.log("Cloned 'Take part in this study' button added.");
45    }
46
47    // Function to check for the button and clone it if found
48    function checkForButton() {
49        const originalButton = document.querySelector('.reserve-study-button[data-testid="reserve"]');
50
51        // If the button is found, clone it and add it to the top-right
52        if (originalButton) {
53            addClonedButton(originalButton);
54        }
55    }
56
57    // Initial check on page load
58    checkForButton();
59
60    // Continuously check for the button at intervals (fallback for observer)
61    setInterval(checkForButton, 3000); // Check every 3 seconds
62
63    // MutationObserver to detect changes to the DOM
64    const observer = new MutationObserver(() => {
65        checkForButton();
66    });
67
68    // Start observing changes to the body
69    observer.observe(document.body, { childList: true, subtree: true });
70})();
71