☰

Google Images largest Drag-and-drop zone

Google Images with a large drag and drop zone for easier image searches

  1. // ==UserScript==
  2. // @name         Google Images largest Drag-and-drop zone
  3. // @namespace    https://github.com/random-user
  4. // @version      1.0
  5. // @description  Google Images with a large drag and drop zone for easier image searches
  6. // @match        https://www.google.com/*
  7. // @match        https://images.google.com/*
  8. // @grant        none
  9. // @license MIT
  10. // ==/UserScript==
  11.  
  12. (function() {
  13.     'use strict';
  14.  
  15.     const overlay = document.createElement('div');
  16.     overlay.style.position = 'fixed';
  17.     overlay.style.top = '0';
  18.     overlay.style.left = '0';
  19.     overlay.style.width = '100%';
  20.     overlay.style.height = '100%';
  21.     overlay.style.backgroundColor = 'rgba(2, 115, 232, 0.1)';
  22.     overlay.style.zIndex = '9999';
  23.     overlay.style.display = 'none';
  24.     overlay.style.pointerEvents = 'none';
  25.     document.body.appendChild(overlay);
  26.  
  27.     const dropArea = document.createElement('div');
  28.     dropArea.style.position = 'fixed';
  29.     dropArea.style.top = '50px';
  30.     dropArea.style.left = '50px';
  31.     dropArea.style.right = '50px';
  32.     dropArea.style.bottom = '50px';
  33.     dropArea.style.border = '2px dashed rgba(26, 115, 232, 0.5)';
  34.     dropArea.style.borderRadius = '10px';
  35.     dropArea.style.zIndex = '10000';
  36.     dropArea.style.display = 'none';
  37.     dropArea.style.pointerEvents = 'none';
  38.     document.body.appendChild(dropArea);
  39.  
  40.     document.addEventListener('dragover', (e) => {
  41.         e.preventDefault();
  42.         overlay.style.display = 'block';
  43.         dropArea.style.display = 'block';
  44.     });
  45.  
  46.     document.addEventListener('dragleave', (e) => {
  47.         e.preventDefault();
  48.         overlay.style.display = 'none';
  49.         dropArea.style.display = 'none';
  50.     });
  51.  
  52.     document.addEventListener('drop', (e) => {
  53.         e.preventDefault();
  54.         overlay.style.display = 'none';
  55.         dropArea.style.display = 'none';
  56.  
  57.         const file = e.dataTransfer.files[0];
  58.         if (file && file.type.startsWith('image/')) {
  59.             const fileInput = document.querySelector('input[type="file"]');
  60.             if (fileInput) {
  61.                 const dataTransfer = new DataTransfer();
  62.                 dataTransfer.items.add(file);
  63.                 fileInput.files = dataTransfer.files;
  64.                 const event = new Event('change', { bubbles: true });
  65.                 fileInput.dispatchEvent(event);
  66.             } else {
  67.                 console.error('File input not found. Unable to process the image.');
  68.             }
  69.         } else {
  70.             alert('Please drop a valid image file (e.g., .jpg, .png, .bmp).');
  71.         }
  72.     });
  73.  
  74.     setInterval(() => {
  75.         if (!document.body.contains(overlay)) {
  76.             document.body.appendChild(overlay);
  77.             document.body.appendChild(dropArea);
  78.         }
  79.     }, 1000);
  80. })();