CSS Gradient Paste Image

Add a paste image option to CSS Gradient and upload the image using the site's upload button

  1. // ==UserScript==
  2. // @name CSS Gradient Paste Image
  3. // @namespace CSS Clipboard Upload
  4. // @version 1.0
  5. // @description Add a paste image option to CSS Gradient and upload the image using the site's upload button
  6. // @author 𝓝𝑒ⓦ 𝓙ⓐ¢𝓀🕹️
  7. // @match https://cssgradient.io/*
  8. // @license MIT
  9. // @grant none
  10. // ==/UserScript==
  11.  
  12. (function() {
  13. 'use strict';
  14.  
  15. // Wait until the DOM is fully loaded
  16. window.addEventListener('load', function() {
  17. // Function to create the "Paste Image" button
  18. function createPasteButton() {
  19. const div = document.querySelector('.app-options__content');
  20. if (div) {
  21. const pasteOption = document.createElement('div');
  22. pasteOption.className = 'app-option';
  23.  
  24. const pasteButton = document.createElement('button');
  25. pasteButton.className = 'app-option__button';
  26. pasteButton.innerText = 'Paste Image';
  27. pasteOption.appendChild(pasteButton);
  28.  
  29. // Add the paste option to the div
  30. div.appendChild(pasteOption);
  31.  
  32. // Add event listener for paste event
  33. pasteButton.addEventListener('click', function() {
  34. document.addEventListener('paste', function(event) {
  35. const items = (event.clipboardData || event.originalEvent.clipboardData).items;
  36. for (const item of items) {
  37. if (item.kind === 'file' && item.type.startsWith('image/')) {
  38. const blob = item.getAsFile();
  39. const fileInput = document.querySelector('.js-upload');
  40. const dataTransfer = new DataTransfer();
  41. dataTransfer.items.add(blob);
  42. fileInput.files = dataTransfer.files;
  43.  
  44. // Trigger the change event to simulate uploading
  45. const event = new Event('change');
  46. fileInput.dispatchEvent(event);
  47. }
  48. }
  49. }, { once: true });
  50. });
  51. } else {
  52. console.log('Target div not found');
  53. }
  54. }
  55.  
  56. // Add the paste button to the page
  57. createPasteButton();
  58. });
  59. })();