export default defineContentScript({ matches: [''], main() { console.log('Slacking mode initialized. Press Alt+M to toggle.'); // Create the overlay element const overlay = document.createElement('div'); overlay.id = 'slacking-blur-overlay'; // Create a fake GitHub UI inside the overlay overlay.innerHTML = `

Pull requests Issues Marketplace Explore

Top Repositories

Find a repository...

🗄️ facebook / react

🗄️ vuejs / core

🗄️ torvalds / linux

🗄️ golang / go

hardworking / productivity-tool

Watch

Fork

Star

developer Update core logic

📁 src feat: optimize rendering

📁 components refactor: extract mask logic

📄 index.html fix typo in header

📄 package.json chore: bump dependencies

📄 README.md docs: add slacking mode manual

README.md

This project focuses on extreme productivity and code optimization. Make sure you read the contribution guidelines before submitting a PR.

npm install
npm run start:prod

`; // Apply styling Object.assign(overlay.style, { position: 'fixed', top: '0', left: '0', width: '100vw', height: '100vh', zIndex: '2147483647', // Max z-index pointerEvents: 'none', // Allow clicks to pass through // Re-enable mask-image to punch a hole through the GitHub UI, with a larger radius maskImage: 'radial-gradient(circle at var(--mouse-x, -100px) var(--mouse-y, -100px), transparent 120px, black 240px)', WebkitMaskImage: 'radial-gradient(circle at var(--mouse-x, -100px) var(--mouse-y, -100px), transparent 120px, black 240px)', willChange: 'mask-image, -webkit-mask-image', // Hardware acceleration hint display: 'block' // Visible by default }); // Append to body document.body.appendChild(overlay); let isEnabled = true; // Toggle on Alt+M (Option+M on Mac) document.addEventListener('keydown', (e) => { // Use e.code instead of e.key because Option+M on Mac produces "µ" instead of "m" if (e.altKey && e.code === 'KeyM') { isEnabled = !isEnabled; overlay.style.display = isEnabled ? 'block' : 'none'; console.log(`Slacking mode ${isEnabled ? 'ON' : 'OFF'}`); } }); // Optimization: Use requestAnimationFrame to avoid layout thrashing on mousemove let ticking = false; let mouseX = -100; let mouseY = -100; const updateMask = () => { overlay.style.setProperty('--mouse-x', `${mouseX}px`); overlay.style.setProperty('--mouse-y', `${mouseY}px`); ticking = false; }; // Track mouse movement document.addEventListener('mousemove', (e) => { if (!isEnabled) return; mouseX = e.clientX; mouseY = e.clientY; if (!ticking) { requestAnimationFrame(updateMask); ticking = true; } }); // Hide the hole when the mouse leaves the window document.addEventListener('mouseleave', () => { if (!isEnabled) return; // Move the clear hole far outside the viewport to make the whole page opaque mouseX = -1000; mouseY = -1000; if (!ticking) { requestAnimationFrame(updateMask); ticking = true; } }); }, });