☰

pythonanywhere link open in a new tab

Asks user if they want to open a link in a new tab or current tab

  1. // ==UserScript==
  2. // @name         pythonanywhere link open in a new tab
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.5
  5. // @description  Asks user if they want to open a link in a new tab or current tab
  6. // @author       acronot
  7. // @license MIT
  8. // @match        https://www.pythonanywhere.com/*
  9. // @grant        none
  10. // ==/UserScript==
  11.  
  12. (function() {
  13.     'use strict';
  14.  
  15.     // CSS styles for the hover popup
  16.     const style = `
  17.         .hover-popup {
  18.             position: absolute;
  19.             background-color: #f9f9f9;
  20.             border: 1px solid #ccc;
  21.             padding: 10px;
  22.             box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  23.             z-index: 1000;
  24.             display: none;
  25.             font-family: Arial, sans-serif;
  26.             font-size: 14px;
  27.             border-radius: 6px;
  28.         }
  29.         .hover-popup button {
  30.             background-color: #007bff;
  31.             color: white;
  32.             border: none;
  33.             padding: 5px 10px;
  34.             margin: 0 5px;
  35.             cursor: pointer;
  36.             border-radius: 4px;
  37.         }
  38.         .hover-popup button:hover {
  39.             background-color: #0056b3;
  40.         }
  41.     `;
  42.  
  43.     // Add styles to the document
  44.     const styleElement = document.createElement('style');
  45.     styleElement.innerHTML = style;
  46.     document.head.appendChild(styleElement);
  47.  
  48.     // Create a hover popup element
  49.     const popup = document.createElement('div');
  50.     popup.className = 'hover-popup';
  51.     popup.innerHTML = `
  52.         <p>Open link in:</p>
  53.         <button id="open-same-tab">Current Tab</button>
  54.         <button id="open-new-tab">New Tab</button>
  55.     `;
  56.     document.body.appendChild(popup);
  57.  
  58.     let currentLink = null;
  59.  
  60.     // Function to handle mouseover on links
  61.     function handleLinkHover(event) {
  62.         currentLink = event.target.href;
  63.  
  64.         // Position the popup near the cursor
  65.         popup.style.left = event.pageX + 'px';
  66.         popup.style.top = event.pageY + 'px';
  67.         popup.style.display = 'block';
  68.     }
  69.  
  70.     // Function to handle mouseout from links
  71.     function handleLinkOut(event) {
  72.         // If the mouse moves out of the link but not onto the popup, hide the popup
  73.         const relatedTarget = event.relatedTarget;
  74.         if (!popup.contains(relatedTarget)) {
  75.             popup.style.display = 'none';
  76.         }
  77.     }
  78.  
  79.     // Function to keep the popup visible when hovering over it
  80.     function handlePopupHover() {
  81.         popup.style.display = 'block';
  82.     }
  83.  
  84.     // Function to hide the popup when moving out of it
  85.     function handlePopupOut(event) {
  86.         // Hide the popup only when the mouse leaves the popup and isn't over a link
  87.         const relatedTarget = event.relatedTarget;
  88.         if (!relatedTarget || !relatedTarget.tagName || relatedTarget.tagName.toLowerCase() !== 'a') {
  89.             popup.style.display = 'none';
  90.         }
  91.     }
  92.  
  93.     // Attach event listeners to all links
  94.     document.querySelectorAll('a').forEach(link => {
  95.         link.addEventListener('mouseover', handleLinkHover);
  96.         link.addEventListener('mouseout', handleLinkOut);
  97.     });
  98.  
  99.     // Keep the popup visible when hovered
  100.     popup.addEventListener('mouseover', handlePopupHover);
  101.     popup.addEventListener('mouseout', handlePopupOut);
  102.  
  103.     // Handle button clicks in the popup
  104.     popup.addEventListener('click', (event) => {
  105.         if (event.target.id === 'open-same-tab') {
  106.             window.location.href = currentLink;  // Open in current tab
  107.         } else if (event.target.id === 'open-new-tab') {
  108.             window.open(currentLink, '_blank');  // Open in new tab
  109.         }
  110.         popup.style.display = 'none';  // Hide popup after selection
  111.     });
  112. })();