urlbox-example.user.js

// ==UserScript==
// @name         urlbox-example
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://*/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=bing.com
// @grant        none
// ==/UserScript==

(function () {
    'use strict';
    const [previewWidth, previewHeight] = [900 / 3, 1200 / 3];
    function createPreviewNode() {
        const img = document.createElement('img');
        img.setAttribute('style', `
        position: fixed;
        top: 0;
        left: 0;
        width: ${previewWidth}px;
        height: ${previewHeight}px;
        visibility: hidden;
        pointerEvents: none;
        background: #fff;
        box-shadow: rgb(0 0 0 / 25%) 5px 5px 10px 10px;
        z-index: 2147483648;
        border-radius: 2px;
    `);
        document.body.append(img);
        return img;
    }

    let previewNode = createPreviewNode();
    let timer = undefined;
    let curTarget = undefined;
    document.body.addEventListener('mouseover', ({ target }) => {
        if (curTarget !== target) {
            closePrevPreviewNode();
        }
        if (target.tagName !== 'A') {
            return;
        }
        if (timer) {
            return;
        }
        curTarget = target;
        timer = setTimeout(() => {
            if (!curTarget) {
                return;
            }
            previewNode.onload = () => {
                calcPlaceToDisplay(target);
            }
            previewNode.src = "https://web-shim.gitai.me/screenshot/default/?url=" + target.href;
        }, 500);
    });

    function closePrevPreviewNode() {
        curTarget = undefined;
        clearTimeout(timer);
        timer = undefined;
        previewNode.style.visibility = "hidden";
    }

    function calcPlaceToDisplay(el) {
        const { width, height } = window.visualViewport;
        const { bottom, left, right, top } = el.getBoundingClientRect();

        previewNode.style.top = ((height - bottom > previewHeight / 2) ? bottom - previewHeight / 2 : height - previewHeight) + 'px';
        if (width - right > previewWidth) {
            previewNode.style.left = right + 'px';
        } else {
            previewNode.style.left = width - previewWidth + 'px';
        }

        previewNode.style.visibility = "visible";
    }

})();