browser-lens-mcp 2.1.0 → 2.2.0

package/README.md

@@ -290,34 +290,58 @@ Works with **any design tool** — Figma, Sketch, Adobe XD, Zeplin. Just provide
 
 ---
 
-## MCP Prompts (5)
+## MCP Prompts (5) — `/` Commands in IDE
 
-| Prompt | Description |
-|--------|-------------|
-| `compare_with_figma` | Guided Figma comparison workflow |
-| `audit_ui` | Comprehensive UI audit |
-| `describe_page` | Detailed page description |
-| `suggest_fixes` | Prioritized fix list |
-| `visual_qa` | Visual QA pass/fail report |
+Type `/` in your IDE chat to see these guided workflows:
+
+| Prompt | When to Use | What It Does |
+|--------|-------------|-------------|
+| `/compare_with_figma` | After implementing a UI from Figma | Walks through comparing each element, generates CSS fixes |
+| `/audit_ui` | Before PR review or release | Audits colors, typography, spacing, accessibility — rates 1-10 |
+| `/describe_page` | When you need to explain the current UI to AI | Generates detailed page description with structure, styles, elements |
+| `/suggest_fixes` | After running comparisons | Collects all failing comparisons + a11y issues → prioritized fix list |
+| `/visual_qa` | Final check before shipping | Takes screenshot, compares elements, outputs PASS/NEEDS_WORK/FAIL |
+
+**Example usage in Antigravity/Cursor:**
+```
+/compare_with_figma
+→ AI reads current page data, asks for Figma specs, runs comparisons, suggests fixes
+
+/audit_ui
+→ AI analyzes colors (too many?), typography (consistent?), spacing (scale?), a11y (issues?)
+```
 
 ---
 
-## MCP Resources (12)
-
-| URI | Description |
-|-----|-------------|
-| `dom://snapshot` | Full DOM tree |
-| `dom://elements` | Element selectors |
-| `dom://mutations` | DOM changes |
-| `css://variables` | Custom properties |
-| `css://typography` | Font analysis |
-| `css://colors` | Color palette |
-| `layout://responsive` | Viewport info |
-| `layout://spacing` | Spacing analysis |
-| `visual://screenshots` | Screenshot metadata |
-| `a11y://audit` | Accessibility audit |
-| `figma://comparisons` | Comparison results |
-| `browser://page` | Page info |
+## MCP Resources (12) — `@` References in IDE
+
+Type `@mcp:browser-lens/` in your IDE to access these data sources directly:
+
+| Resource | Shorthand | When to Use | Example |
+|----------|-----------|-------------|---------|
+| `dom://snapshot` | `@browser-lens/dom-snapshot` | Get the full DOM tree structure | "Show me the page structure" |
+| `dom://elements` | `@browser-lens/dom-elements` | List all captured element selectors | "What elements are captured?" |
+| `dom://mutations` | `@browser-lens/mutations-log` | Check recent DOM changes | "What changed since last sync?" |
+| `css://variables` | `@browser-lens/css-variables` | Get all CSS custom properties | "What design tokens exist?" |
+| `css://typography` | `@browser-lens/css-typography` | Get font usage analysis | "What fonts are used?" |
+| `css://colors` | `@browser-lens/css-colors` | Get color palette | "What colors are on this page?" |
+| `layout://responsive` | `@browser-lens/layout-responsive` | Get viewport & breakpoints | "What breakpoint is active?" |
+| `layout://spacing` | `@browser-lens/layout-spacing` | Get spacing analysis | "Is spacing consistent?" |
+| `visual://screenshots` | `@browser-lens/visual-screenshots` | List captured screenshots | "How many screenshots exist?" |
+| `a11y://audit` | `@browser-lens/accessibility-info` | Get accessibility audit | "Any a11y issues?" |
+| `figma://comparisons` | `@browser-lens/comparison-results` | Get comparison results | "How did the last comparison go?" |
+| `browser://page` | `@browser-lens/page-info` | Get page info summary | "Is browser connected?" |
+
+**Example usage:**
+```
+@browser-lens/css-colors Tell me the primary colors used on this page
+@browser-lens/dom-snapshot Show me the semantic structure
+@browser-lens/accessibility-info Are there any accessibility issues?
+```
+
+**Resources vs Tools:**
+- **Resources** (`@`) = Read-only data snapshots. Fast, no browser command needed. Use for quick lookups.
+- **Tools** = Actions that can query the browser live, take screenshots, compare with Figma. Use for interactive work.
 
 ---
 
@@ -334,11 +358,13 @@ IDE ← MCP Server ← WebSocket ← Send result
 ```
 
 **Commands the server can send to the browser:**
-- `screenshot` — Capture and send a fresh screenshot
+- `screenshot` — Capture viewport screenshot (cross-origin images auto-replaced with placeholders)
+- `element_screenshot` — Capture a specific element by CSS selector
 - `query_element` — Inspect any element by CSS selector on-demand
 - `fullsync` — Trigger a full data re-capture
 
-This means your AI agent can ask about ANY element, even ones not in the initial auto-capture.
+**Screenshot CORS handling:**
+Cross-origin images (CDN logos, external assets) are temporarily replaced with same-size grey placeholders before capture, then restored. This ensures screenshots always succeed while preserving layout accuracy.
 
 ---
 

package/dist/src/transport/connector-script.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"connector-script.d.ts","sourceRoot":"","sources":["../../../src/transport/connector-script.ts"],"names":[],"mappings":"AAAA,wBAAgB,kBAAkB,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,CA2a3E"}
+{"version":3,"file":"connector-script.d.ts","sourceRoot":"","sources":["../../../src/transport/connector-script.ts"],"names":[],"mappings":"AAAA,wBAAgB,kBAAkB,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,CAqa3E"}

package/dist/src/transport/connector-script.js

@@ -221,47 +221,62 @@ function captureSpacing(){
   return{timestamp:Date.now(),elements:entries,inconsistencies:[],spacingScale:Object.keys(Object.assign({},vals.margin,vals.padding)).sort(function(a,b){return parseFloat(a)-parseFloat(b)})};
 }
 
-var _ssLastOk=0,_ssFailing=false,_ssAttempts=0;
 function _safeExport(canvas){
   try{return canvas.toDataURL('image/png');}
   catch(e){return null;}
 }
-function _doCapture(opts){
-  var w=Math.min(window.innerWidth,1440),h=Math.min(window.innerHeight,900);
-  return html2canvas(document.body,Object.assign({scale:1,width:w,height:h,logging:false,removeContainer:true,imageTimeout:5000},opts)).then(function(canvas){
+
+function _neutralizeCrossOrigin(root){
+  var originals=[];
+  root.querySelectorAll('img').forEach(function(img){
+    var src=img.src||'';
+    if(src&&!src.startsWith(location.origin)&&!src.startsWith('data:')&&!src.startsWith('blob:')){
+      var w=img.naturalWidth||img.offsetWidth||100;
+      var h=img.naturalHeight||img.offsetHeight||100;
+      originals.push({el:img,src:img.src,srcset:img.srcset||''});
+      img.srcset='';
+      img.src='data:image/svg+xml,'+encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="'+w+'" height="'+h+'"><rect width="100%" height="100%" fill="%2327272a"/><text x="50%" y="50%" fill="%2371717a" font-size="12" text-anchor="middle" dominant-baseline="middle">img</text></svg>');
+    }
+  });
+  root.querySelectorAll('iframe,video').forEach(function(el){
+    originals.push({el:el,vis:el.style.visibility});
+    el.style.visibility='hidden';
+  });
+  return originals;
+}
+
+function _restoreCrossOrigin(originals){
+  originals.forEach(function(o){
+    if(o.src!==undefined){o.el.src=o.src;if(o.srcset)o.el.srcset=o.srcset;}
+    if(o.vis!==undefined)o.el.style.visibility=o.vis;
+  });
+}
+
+function _renderScreenshot(target,type,selector){
+  var saved=_neutralizeCrossOrigin(target);
+  var w=target===document.body?Math.min(window.innerWidth,1440):undefined;
+  var h=target===document.body?Math.min(window.innerHeight,900):undefined;
+  var opts={scale:1,logging:false,removeContainer:true,imageTimeout:3000,useCORS:false,allowTaint:false,foreignObjectRendering:false};
+  if(w)opts.width=w;
+  if(h)opts.height=h;
+  return html2canvas(target,opts).then(function(canvas){
+    _restoreCrossOrigin(saved);
     var dataUrl=_safeExport(canvas);
-    if(!dataUrl)throw new Error('Canvas tainted - toDataURL blocked');
-    _ssLastOk=Date.now();_ssFailing=false;_ssAttempts=0;
-    log('Screenshot OK: '+canvas.width+'x'+canvas.height);
-    return{timestamp:Date.now(),type:'viewport',width:canvas.width,height:canvas.height,dataUrl:dataUrl,format:'png'};
+    if(!dataUrl){_restoreCrossOrigin(saved);return null;}
+    var result={timestamp:Date.now(),type:type||'viewport',width:canvas.width,height:canvas.height,dataUrl:dataUrl,format:'png'};
+    if(selector)result.selector=selector;
+    log('Screenshot OK: '+(selector||'viewport')+' '+canvas.width+'x'+canvas.height);
+    return result;
+  }).catch(function(e){
+    _restoreCrossOrigin(saved);
+    err('html2canvas render failed',e);
+    return null;
   });
 }
+
 function captureScreenshot(){
-  if(_ssFailing&&_ssAttempts>2&&Date.now()-_ssLastOk<300000)return Promise.resolve(null);
-  _ssAttempts++;
   return new Promise(function(resolve){
-    function attempt3(){
-      log('Attempt 3: minimal capture without images/videos/iframes...');
-      _doCapture({useCORS:false,allowTaint:false,foreignObjectRendering:false,ignoreElements:function(el){
-        var t=el.tagName;return t==='IMG'||t==='VIDEO'||t==='IFRAME'||t==='CANVAS'||t==='SVG';
-      }}).then(resolve).catch(function(e){
-        _ssFailing=true;
-        log('All screenshot attempts failed. Will retry in 5min.');
-        resolve(null);
-      });
-    }
-    function attempt2(){
-      log('Attempt 2: without cross-origin images...');
-      _doCapture({useCORS:false,allowTaint:false,foreignObjectRendering:false,ignoreElements:function(el){
-        if(el.tagName==='IMG'){var s=el.src||'';if(s&&!s.startsWith(location.origin)&&!s.startsWith('data:'))return true;}
-        if(el.tagName==='IFRAME'||el.tagName==='VIDEO')return true;
-        return false;
-      }}).then(resolve).catch(attempt3);
-    }
-    function attempt1(){
-      _doCapture({useCORS:true,allowTaint:false,foreignObjectRendering:false}).then(resolve).catch(attempt2);
-    }
-    function run(){try{attempt1();}catch(e){resolve(null);}}
+    function run(){_renderScreenshot(document.body,'viewport').then(resolve);}
     try{
       if(typeof html2canvas==='function'){run();}
       else{
@@ -336,33 +351,12 @@ function captureElementScreenshot(selector){
   return new Promise(function(resolve){
     var el=document.querySelector(selector);
     if(!el){resolve(null);return;}
-    function doCapture(){
-      var rect=el.getBoundingClientRect();
-      var opts={scale:1,logging:false,removeContainer:true,imageTimeout:5000,
-        x:rect.left+window.scrollX,y:rect.top+window.scrollY,
-        width:Math.ceil(rect.width),height:Math.ceil(rect.height),
-        windowWidth:document.documentElement.scrollWidth,
-        windowHeight:document.documentElement.scrollHeight,
-        useCORS:true,allowTaint:false,foreignObjectRendering:false};
-      html2canvas(el,{scale:1,logging:false,removeContainer:true,imageTimeout:5000,useCORS:true,allowTaint:false,foreignObjectRendering:false}).then(function(canvas){
-        var dataUrl=_safeExport(canvas);
-        if(dataUrl){
-          log('Element screenshot OK: '+selector+' '+canvas.width+'x'+canvas.height);
-          resolve({timestamp:Date.now(),type:'element',selector:selector,width:canvas.width,height:canvas.height,dataUrl:dataUrl,format:'png'});
-        }else{
-          html2canvas(el,{scale:1,logging:false,removeContainer:true,useCORS:false,allowTaint:false,foreignObjectRendering:false,ignoreElements:function(e){var t=e.tagName;return t==='IMG'||t==='VIDEO'||t==='IFRAME'||t==='CANVAS';}}).then(function(c2){
-            var d2=_safeExport(c2);
-            if(d2)resolve({timestamp:Date.now(),type:'element',selector:selector,width:c2.width,height:c2.height,dataUrl:d2,format:'png'});
-            else resolve(null);
-          }).catch(function(){resolve(null);});
-        }
-      }).catch(function(){resolve(null);});
-    }
-    if(typeof html2canvas==='function'){doCapture();}
+    function run(){_renderScreenshot(el,'element',selector).then(resolve);}
+    if(typeof html2canvas==='function'){run();}
     else{
       var s=document.createElement('script');
       s.src='https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js';
-      s.onload=doCapture;s.onerror=function(){resolve(null);};
+      s.onload=run;s.onerror=function(){resolve(null);};
       document.head.appendChild(s);
     }
   });

package/dist/src/transport/connector-script.js.map

@@ -1 +1 @@
-{"version":3,"file":"connector-script.js","sourceRoot":"","sources":["../../../src/transport/connector-script.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,kBAAkB,CAAC,QAAgB,EAAE,MAAc;IACjE,OAAO;;;+BAGsB,MAAM;mCACF,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAqatC,CAAC;AACN,CAAC"}
+{"version":3,"file":"connector-script.js","sourceRoot":"","sources":["../../../src/transport/connector-script.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,kBAAkB,CAAC,QAAgB,EAAE,MAAc;IACjE,OAAO;;;+BAGsB,MAAM;mCACF,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA+ZtC,CAAC;AACN,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "browser-lens-mcp",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "MCP server that connects to your browser for real-time DOM, CSS, layout inspection, screenshot capture, and Figma design comparison — your IDE's AI agent sees exactly what users see",
   "type": "module",
   "main": "dist/src/index.js",