FumbleAround/content.js

// Create the floating button
const floatingButton = document.createElement('button');
floatingButton.id = 'openInNewTab';
floatingButton.className = 'floating-button';
floatingButton.title = 'Open in new window';
floatingButton.innerHTML = `
    <svg viewBox="0 0 24 24" width="24" height="24">
        <path fill="currentColor" d="M19 19H5V5h7V3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"/>
    </svg>
`;

// Add click handler
floatingButton.addEventListener('click', () => {
    window.open(window.location.href, '_blank');
});

// Add styles
const style = document.createElement('style');
style.textContent = `
    .floating-button {
        position: fixed;
        right: 20px;
        top: 20px;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: rgba(255, 69, 0, 0.9);
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transform: scale(0.9);
        transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.3s ease;
        z-index: 999999;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    }

    .floating-button svg {
        width: 20px;
        height: 20px;
        color: white;
    }

    body:hover .floating-button {
        opacity: 1;
        transform: scale(1);
    }

    .floating-button:hover {
        background: rgba(255, 69, 0, 1);
        transform: scale(1.1);
    }

    @media (hover: none) {
        .floating-button {
            opacity: 0.9;
            transform: scale(1);
        }
        
        .floating-button:hover {
            transform: scale(1);
        }
    }

    @media (max-width: 768px) {
        .floating-button {
            bottom: 20px;
            top: auto;
        }
    }
`;

// Add elements to page
document.head.appendChild(style);
document.body.appendChild(floatingButton);