遮罩方案mvp

entrypoints/content.ts

@@ -1,6 +1,150 @@
 export default defineContentScript({
-  matches: ['*://*.google.com/*'],
+  matches: ['<all_urls>'],
   main() {
-    console.log('Hello content.');
+    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 = `
+      <div style="display: flex; flex-direction: column; width: 100vw; height: 100vh; background-color: #0d1117; color: #c9d1d9; font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;">
+        <!-- Fake Header -->
+        <div style="height: 64px; background-color: #161b22; border-bottom: 1px solid #21262d; display: flex; align-items: center; padding: 0 32px; gap: 16px;">
+          <div style="color: #fff;">
+            <svg height="32" viewBox="0 0 16 16" version="1.1" width="32" fill="currentColor"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg>
+          </div>
+          <div style="display: flex; gap: 16px; font-size: 14px; font-weight: 600; margin-left: 8px;">
+            <span style="color: #fff;">Pull requests</span>
+            <span style="color: #fff;">Issues</span>
+            <span style="color: #fff;">Marketplace</span>
+            <span style="color: #fff;">Explore</span>
+          </div>
+        </div>
+        
+        <!-- Fake Main Layout -->
+        <div style="display: flex; flex: 1; overflow: hidden;">
+          <!-- Fake Sidebar -->
+          <div style="width: 296px; border-right: 1px solid #21262d; padding: 24px 16px; display: flex; flex-direction: column; gap: 16px;">
+            <div style="font-size: 14px; font-weight: 600;">Top Repositories</div>
+            <div style="height: 32px; background-color: #21262d; border-radius: 6px; border: 1px solid #30363d; display: flex; align-items: center; padding: 0 12px; font-size: 14px; color: #8b949e;">Find a repository...</div>
+            <div style="display: flex; flex-direction: column; gap: 12px; margin-top: 8px;">
+              <div style="font-size: 14px; color: #58a6ff; font-weight: 600; display: flex; align-items: center; gap: 8px;"><span style="color: #8b949e;">🗄️</span> facebook / react</div>
+              <div style="font-size: 14px; color: #58a6ff; font-weight: 600; display: flex; align-items: center; gap: 8px;"><span style="color: #8b949e;">🗄️</span> vuejs / core</div>
+              <div style="font-size: 14px; color: #58a6ff; font-weight: 600; display: flex; align-items: center; gap: 8px;"><span style="color: #8b949e;">🗄️</span> torvalds / linux</div>
+              <div style="font-size: 14px; color: #58a6ff; font-weight: 600; display: flex; align-items: center; gap: 8px;"><span style="color: #8b949e;">🗄️</span> golang / go</div>
+            </div>
+          </div>
+          
+          <!-- Fake Content Area -->
+          <div style="flex: 1; padding: 24px 32px; display: flex; flex-direction: column; gap: 16px;">
+            <div style="display: flex; justify-content: space-between; align-items: center;">
+              <div style="font-size: 20px; font-weight: 600; color: #58a6ff;">hardworking / productivity-tool</div>
+              <div style="display: flex; gap: 8px;">
+                <div style="padding: 4px 12px; background-color: #21262d; border: 1px solid #30363d; border-radius: 6px; font-size: 12px; font-weight: 600; color: #c9d1d9;">Watch</div>
+                <div style="padding: 4px 12px; background-color: #21262d; border: 1px solid #30363d; border-radius: 6px; font-size: 12px; font-weight: 600; color: #c9d1d9;">Fork</div>
+                <div style="padding: 4px 12px; background-color: #21262d; border: 1px solid #30363d; border-radius: 6px; font-size: 12px; font-weight: 600; color: #c9d1d9;">Star</div>
+              </div>
+            </div>
+            
+            <!-- Fake File List -->
+            <div style="border: 1px solid #30363d; border-radius: 6px; background-color: #0d1117; margin-top: 16px;">
+              <div style="padding: 16px; background-color: #161b22; border-bottom: 1px solid #30363d; font-size: 14px; font-weight: 600; border-radius: 6px 6px 0 0; display: flex; gap: 12px; align-items: center;">
+                <img src="https://github.com/fluidicon.png" style="width: 24px; height: 24px; border-radius: 50%;" /> 
+                <span>developer</span>
+                <span style="color: #8b949e; font-weight: normal;">Update core logic</span>
+              </div>
+              <div style="padding: 16px; display: flex; flex-direction: column; gap: 16px; font-size: 14px;">
+                <div style="display: flex; gap: 16px;"><span style="color: #54aeff;">📁</span> <span style="color: #c9d1d9;">src</span> <span style="color: #8b949e; margin-left: auto;">feat: optimize rendering</span></div>
+                <div style="border-bottom: 1px solid #21262d;"></div>
+                <div style="display: flex; gap: 16px;"><span style="color: #54aeff;">📁</span> <span style="color: #c9d1d9;">components</span> <span style="color: #8b949e; margin-left: auto;">refactor: extract mask logic</span></div>
+                <div style="border-bottom: 1px solid #21262d;"></div>
+                <div style="display: flex; gap: 16px;"><span style="color: #8b949e;">📄</span> <span style="color: #c9d1d9;">index.html</span> <span style="color: #8b949e; margin-left: auto;">fix typo in header</span></div>
+                <div style="border-bottom: 1px solid #21262d;"></div>
+                <div style="display: flex; gap: 16px;"><span style="color: #8b949e;">📄</span> <span style="color: #c9d1d9;">package.json</span> <span style="color: #8b949e; margin-left: auto;">chore: bump dependencies</span></div>
+                <div style="border-bottom: 1px solid #21262d;"></div>
+                <div style="display: flex; gap: 16px;"><span style="color: #8b949e;">📄</span> <span style="color: #c9d1d9;">README.md</span> <span style="color: #8b949e; margin-left: auto;">docs: add slacking mode manual</span></div>
+              </div>
+            </div>
+            
+            <!-- Fake Readme -->
+            <div style="border: 1px solid #30363d; border-radius: 6px; padding: 24px; margin-top: 16px;">
+              <h2 style="margin-top: 0; border-bottom: 1px solid #21262d; padding-bottom: 8px;">README.md</h2>
+              <p style="color: #8b949e; line-height: 1.5; font-size: 14px;">This project focuses on extreme productivity and code optimization. Make sure you read the contribution guidelines before submitting a PR.</p>
+              <pre style="background-color: #161b22; padding: 16px; border-radius: 6px; color: #e6edf3; font-family: monospace; font-size: 14px; line-height: 1.5;"><code>npm install<br>npm run start:prod</code></pre>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+
+    // 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;
+      }
+    });
   },
 });
+