☰

API Data Access Button

Adds a button to fetch and display data from an API

// ==UserScript==
// @name         API Data Access Button
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Adds a button to fetch and display data from an API
// @author       You
// @match        *://*/*
// @grant        GM_xmlhttpRequest
// @grant        GM_addStyle
// @require      https://cdnjs.cloudflare.com/ajax/libs/sweetalert2/11.0.22/sweetalert2.all.min.js
// @connect      * // Adjust this if you are making requests to a specific domain
// ==/UserScript==

(function() {
    'use strict';

    // Add custom CSS for the button
    GM_addStyle(`
        #api-button {
            position: fixed;
            bottom: 10px;
            right: 10px;
            padding: 10px 20px;
            background-color: #007BFF;
            color: #FFFFFF;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            z-index: 9999;
        }
    `);

    // Create and add the button to the page
    let button = document.createElement('button');
    button.id = 'api-button';
    button.textContent = 'Fetch API Data';
    document.body.appendChild(button);

    // Function to fetch data from the API
    function fetchData() {
        const apiUrl = 'https://jsonplaceholder.typicode.com/posts/1'; // Replace with your API URL

        GM_xmlhttpRequest({
            method: 'GET',
            url: apiUrl,
            onload: function(response) {
                if (response.status === 200) {
                    try {
                        const data = JSON.parse(response.responseText);
                        // Display the data using SweetAlert2
                        Swal.fire({
                            title: 'API Data',
                            text: JSON.stringify(data, null, 2),
                            width: '80%',
                            padding: '3em',
                            background: '#fff',
                            backdrop: `
                                rgba(0,0,123,0.4)
                                url(https://cdn.jsdelivr.net/npm/sweetalert2@11/images/nyan-cat.gif)
                                left top
                                no-repeat
                            `
                        });
                    } catch (e) {
                        Swal.fire('Error', 'Failed to parse API response', 'error');
                    }
                } else {
                    Swal.fire('Error', 'Failed to fetch data from API', 'error');
                }
            },
            onerror: function() {
                Swal.fire('Error', 'Failed to make the request', 'error');
            }
        });
    }

    // Add event listener to the button
    button.addEventListener('click', fetchData);
})();