feat: improve React/Angular source detection with full path resolution

- Fix source map path resolution to show full paths instead of filenames
- Remove leading slashes from resolved paths
- Restore React detection to use native debug info with fallback
- Clean up debug console.error statements
- Bump version to 0.0.10

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

Author: AlexStrNik

chrome-devtools-extension/injected.js

@@ -14,7 +14,7 @@
 
     getReactInfo(element) {
       const fiberKey = Object.keys(element).find((key) =>
-        key.startsWith("__reactFiber"),
+        key.startsWith("__reactFiber")
       );
 
       if (!fiberKey) return null;
@@ -23,7 +23,10 @@
       if (!fiber?._debugOwner?.elementType) return null;
 
       const componentType = fiber._debugOwner.elementType;
-      const name = componentType.name || componentType.displayName;
+      const name =
+        componentType.name ||
+        componentType.displayName ||
+        fiber._debugOwner.type?.name;
 
       if (!name || this.isReactInternal(name)) return null;
 
@@ -53,6 +56,8 @@
             }
           }
         }
+      } else {
+        fileName = "not available";
       }
 
       return {
@@ -61,7 +66,9 @@
         file:
           fileName && lineNumber
             ? `${fileName}:${lineNumber}`
-            : "not available",
+            : fileName,
+        needsSourceDetection: !fileName || !lineNumber,
+        elementId: element.getAttribute("data-claude-devtools-id"),
       };
     }
 
@@ -89,7 +96,8 @@
               ? component.constructor.name.substring(1)
               : component.constructor.name,
             props: Object.keys(props).length > 0 ? props : null,
-            file: "detecting...",
+            file: "not available",
+            needsSourceDetection: true,
             elementId: element.getAttribute("data-claude-devtools-id"),
           };
         }
@@ -119,7 +127,7 @@
     if (event.data?.type === "CLAUDE_DEVTOOLS_GET_COMPONENT_INFO") {
       const elementId = event.data.elementId;
       const element = document.querySelector(
-        `[data-claude-devtools-id="${elementId}"]`,
+        `[data-claude-devtools-id="${elementId}"]`
       );
       const componentInfo = element ? detector.getComponentInfo(element) : null;
 
@@ -129,6 +137,7 @@
             framework: componentInfo.framework,
             file: componentInfo.file,
             props: sanitizeProps(componentInfo.props),
+            needsSourceDetection: componentInfo.needsSourceDetection,
           }
         : null;
 
@@ -138,7 +147,7 @@
           id: event.data.id,
           componentInfo: sanitizedInfo,
         },
-        "*",
+        "*"
       );
     }
   });

chrome-devtools-extension/manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "Claude DevTools",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "description": "Pick elements and send them to Claude with React/Angular/Vue component detection",
   "permissions": ["activeTab", "storage", "tabs", "debugger", "scripting"],
   "host_permissions": ["<all_urls>"],

chrome-devtools-extension/panel.html

@@ -68,6 +68,11 @@
         font-weight: normal;
         margin-right: 4px;
       }
+      .header-version {
+        color: var(--text-muted);
+        font-size: 10px;
+        margin-left: 4px;
+      }
       .connection-status {
         display: flex;
         align-items: center;
@@ -286,6 +291,7 @@
     <div class="header">
       <img src="claude.png" class="header-icon" alt="Claude" />
       <span class="header-title">Claude DevTools</span>
+      <span class="header-version" id="extensionVersion"></span>
       <div class="connection-status">
         <div class="status-dot" id="statusDot"></div>
         <span id="connectionStatus">connected</span>