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

您需要先安裝使用者腳本管理器擴展,如 TampermonkeyGreasemonkeyViolentmonkey 之後才能安裝該腳本。

You will need to install an extension such as Tampermonkey to install this script.

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyViolentmonkey 後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyUserscripts 後才能安裝該腳本。

你需要先安裝一款使用者腳本管理器擴展,比如 Tampermonkey,才能安裝此腳本

您需要先安裝使用者腳本管理器擴充功能後才能安裝該腳本。

(我已經安裝了使用者腳本管理器,讓我安裝!)

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

(我已經安裝了使用者樣式管理器,讓我安裝!)

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