☰

API Data Access Button

Adds a button to fetch and display data from an API

当前为 2024-08-19 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         API Data Access Button
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.1
  5. // @description  Adds a button to fetch and display data from an API
  6. // @author       You
  7. // @match        *://*/*
  8. // @grant        GM_xmlhttpRequest
  9. // @grant        GM_addStyle
  10. // @require      https://cdnjs.cloudflare.com/ajax/libs/sweetalert2/11.0.22/sweetalert2.all.min.js
  11. // @connect      * // Adjust this if you are making requests to a specific domain
  12. // ==/UserScript==
  13.  
  14. (function() {
  15.     'use strict';
  16.  
  17.     // Add custom CSS for the button
  18.     GM_addStyle(`
  19.         #api-button {
  20.             position: fixed;
  21.             bottom: 10px;
  22.             right: 10px;
  23.             padding: 10px 20px;
  24.             background-color: #007BFF;
  25.             color: #FFFFFF;
  26.             border: none;
  27.             border-radius: 5px;
  28.             cursor: pointer;
  29.             font-size: 16px;
  30.             z-index: 9999;
  31.         }
  32.     `);
  33.  
  34.     // Create and add the button to the page
  35.     let button = document.createElement('button');
  36.     button.id = 'api-button';
  37.     button.textContent = 'Fetch API Data';
  38.     document.body.appendChild(button);
  39.  
  40.     // Function to fetch data from the API
  41.     function fetchData() {
  42.         const apiUrl = 'https://jsonplaceholder.typicode.com/posts/1'; // Replace with your API URL
  43.  
  44.         GM_xmlhttpRequest({
  45.             method: 'GET',
  46.             url: apiUrl,
  47.             onload: function(response) {
  48.                 if (response.status === 200) {
  49.                     try {
  50.                         const data = JSON.parse(response.responseText);
  51.                         // Display the data using SweetAlert2
  52.                         Swal.fire({
  53.                             title: 'API Data',
  54.                             text: JSON.stringify(data, null, 2),
  55.                             width: '80%',
  56.                             padding: '3em',
  57.                             background: '#fff',
  58.                             backdrop: `
  59.                                 rgba(0,0,123,0.4)
  60.                                 url(https://cdn.jsdelivr.net/npm/sweetalert2@11/images/nyan-cat.gif)
  61.                                 left top
  62.                                 no-repeat
  63.                             `
  64.                         });
  65.                     } catch (e) {
  66.                         Swal.fire('Error', 'Failed to parse API response', 'error');
  67.                     }
  68.                 } else {
  69.                     Swal.fire('Error', 'Failed to fetch data from API', 'error');
  70.                 }
  71.             },
  72.             onerror: function() {
  73.                 Swal.fire('Error', 'Failed to make the request', 'error');
  74.             }
  75.         });
  76.     }
  77.  
  78.     // Add event listener to the button
  79.     button.addEventListener('click', fetchData);
  80. })();