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

QingJ © 2025

镜像随时可能失效,请加Q群300939539或关注我们的公众号极客氢云获取最新地址