Skip to content

Instantly share code, notes, and snippets.

@New-dev0
Created December 28, 2024 10:38
Show Gist options
  • Select an option

  • Save New-dev0/adf9e3f51a72535f9c01c30eea90edef to your computer and use it in GitHub Desktop.

Select an option

Save New-dev0/adf9e3f51a72535f9c01c30eea90edef to your computer and use it in GitHub Desktop.
function injectLovableButton() {
// Don't inject if inside iframe
if (window.self !== window.top) {
return;
}
// Check if button already exists
if (document.querySelector('.switchx-edit-btn')) {
return;
}
// Inject immediately
injectButton();
function injectButton() {
console.log('Current host:', window.location.host);
const button = document.createElement('button');
button.className = 'switchx-edit-btn';
button.innerHTML = `
<span>Edit with</span>
<svg width="20" height="20" viewBox="0 0 24 24">
<defs>
<linearGradient id="switchx-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#FF0000" />
<stop offset="100%" style="stop-color:#FF6B6B" />
</linearGradient>
<filter id="switchx-glow">
<feGaussianBlur stdDeviation="1.5" result="glow"/>
<feMerge>
<feMergeNode in="glow"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<path d="M17.5 8.5c0-1.1-.9-2-2-2h-2.7c-.3-.6-.9-1-1.7-1H8.9c-.8 0-1.4.4-1.7 1H4.5c-1.1 0-2 .9-2 2v9c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2v-9zm-11 9h11v-9h-11v9z"
fill="url(#switchx-gradient)"
filter="url(#switchx-glow)"
style="transform-origin: center; animation: pulse 2s infinite"
/>
<circle cx="12" cy="13" r="2.5" fill="#fff" />
</svg>
<span>switchX</span>
`;
// Add click handler
button.addEventListener('click', () => {
window.location.href = 'https://switchx.dev';
});
// Styles with higher z-index and !important rules
const styles = document.createElement('style');
styles.textContent = `
.switchx-edit-btn {
display: flex !important;
align-items: center !important;
gap: 8px !important;
background: linear-gradient(135deg, #2d3436 0%, #000000 100%) !important;
color: #fff !important;
border: 1px solid rgba(255,255,255,0.1) !important;
padding: 10px 16px !important;
border-radius: 8px !important;
font-size: 14px !important;
font-weight: 500 !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
position: fixed !important;
bottom: 24px !important;
right: 24px !important;
z-index: 2147483647 !important;
box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
pointer-events: auto !important;
}
.switchx-edit-btn:hover {
transform: translateY(-2px) !important;
box-shadow: 0 8px 16px rgba(0,0,0,0.2) !important;
background: linear-gradient(135deg, #2d3436 0%, #232323 100%) !important;
}
.switchx-edit-btn:active {
transform: translateY(0) !important;
box-shadow: 0 4px 8px rgba(0,0,0,0.1) !important;
}
.switchx-edit-btn svg {
filter: drop-shadow(0 2px 4px rgba(255,107,107,0.2)) !important;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
`;
// Create a container with highest z-index
const container = document.createElement('div');
container.style.cssText = `
position: fixed !important;
bottom: 0 !important;
right: 0 !important;
z-index: 2147483647 !important;
pointer-events: none !important;
`;
document.head.appendChild(styles);
container.appendChild(button);
document.body.appendChild(container);
}
}
// Run when script loads
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', injectLovableButton);
} else {
injectLovableButton();
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment