vite-plugin-specter 0.3.2 → 0.3.4

package/dist/extension-chrome/manifest.json

@@ -0,0 +1,38 @@
+{
+  "manifest_version": 3,
+  "name": "Specter",
+  "version": "0.3.3",
+  "description": "Element inspector for AI-assisted development. Ctrl+Option+Z to activate.",
+  "icons": {
+    "16": "icons/icon16.png",
+    "32": "icons/icon32.png",
+    "48": "icons/icon48.png",
+    "128": "icons/icon128.png"
+  },
+  "action": {
+    "default_icon": {
+      "16": "icons/icon16.png",
+      "32": "icons/icon32.png",
+      "48": "icons/icon48.png",
+      "128": "icons/icon128.png"
+    },
+    "default_title": "Activate Specter on this page"
+  },
+  "background": {
+    "service_worker": "background.js"
+  },
+  "content_scripts": [
+    {
+      "matches": [
+        "<all_urls>"
+      ],
+      "js": [
+        "content.js"
+      ],
+      "run_at": "document_end"
+    }
+  ],
+  "permissions": [
+    "activeTab"
+  ]
+}

package/dist/extension-firefox/content.js

@@ -273,17 +273,11 @@
     return { hex: toHex(m[1], m[2], m[3]), alpha: m[4] !== undefined ? parseFloat(m[4]) : 1 };
   }
 
-  function colorLabel(str) {
-    var c = parseColor(str);
-    if (!c) return null;
-    if (c.alpha < 1) return c.hex + ' (' + Math.round(c.alpha * 100) + '% opacity)';
-    return c.hex;
-  }
-
   function colorObj(str) {
     var c = parseColor(str);
     if (!c) return null;
-    return { raw: str, hex: c.hex, alpha: c.alpha, label: colorLabel(str) };
+    var label = c.alpha < 1 ? c.hex + ' (' + Math.round(c.alpha * 100) + '% opacity)' : c.hex;
+    return { raw: str, hex: c.hex, alpha: c.alpha, label: label };
   }
 
   function edge(t, r, b, l) {
@@ -485,6 +479,7 @@
   function clearHoverOutline() {
     if (outlinedEl) {
       outlinedEl.style.outline = prevOutline;
+      outlinedEl.style.outlineOffset = '';
       outlinedEl = null;
     }
   }
@@ -561,7 +556,7 @@
   }
 
   function clearSelection() {
-    selectedEls.forEach(function (el) { el.style.outline = ''; });
+    selectedEls.forEach(function (el) { el.style.outline = ''; el.style.outlineOffset = ''; });
     selectedEls.length = 0;
     selectedBadges.forEach(function (b) { b.remove(); });
     selectedBadges.length = 0;
@@ -926,7 +921,7 @@
     if (isInputFocused()) return;
 
     if (e.key === 'p' || e.key === 'P') {
-      if (measureMode || !lastHovered) return;
+      if (!lastHovered) return;
       clearHoverOutline();
       toggleSelection(lastHovered);
       return;
@@ -945,11 +940,12 @@
     }
 
     if (e.key === 'Escape') {
-      if (pinEl) {
+      if (pinEl || selectedEls.length > 0) {
         clearPin();
+        clearSelection();
         clearMeasureOverlay();
         hideTooltip();
-        updatePillForSelection();
+        collapsePill();
       } else {
         deactivate();
       }
@@ -975,8 +971,9 @@
 
   window.__specterToggle = function() { if (fiActive) deactivate(); else activate(); };
 
-  if (typeof browser !== 'undefined' && browser.runtime && browser.runtime.onMessage) {
-    browser.runtime.onMessage.addListener(function(msg) {
+  var _rt = (typeof browser !== 'undefined' && browser.runtime) || (typeof chrome !== 'undefined' && chrome.runtime);
+  if (_rt && _rt.onMessage) {
+    _rt.onMessage.addListener(function(msg) {
       if (msg && msg.type === 'specter-toggle') window.__specterToggle();
     });
   }

package/dist/extension-firefox/manifest.json

@@ -1,12 +1,18 @@
 {
   "manifest_version": 2,
   "name": "Specter",
-  "version": "0.3.0",
+  "version": "0.3.3",
   "description": "Element inspector for AI-assisted development. Ctrl+Option+Z to activate.",
   "browser_specific_settings": {
     "gecko": {
       "id": "specter@setugk.com",
-      "strict_min_version": "109.0"
+      "strict_min_version": "109.0",
+      "data_collection_permissions": {
+        "required": [
+          "none"
+        ],
+        "optional": []
+      }
     }
   },
   "icons": {

package/dist/index.cjs

@@ -303,17 +303,11 @@ function getClientScript(options) {
     return { hex: toHex(m[1], m[2], m[3]), alpha: m[4] !== undefined ? parseFloat(m[4]) : 1 };
   }
 
-  function colorLabel(str) {
-    var c = parseColor(str);
-    if (!c) return null;
-    if (c.alpha < 1) return c.hex + ' (' + Math.round(c.alpha * 100) + '% opacity)';
-    return c.hex;
-  }
-
   function colorObj(str) {
     var c = parseColor(str);
     if (!c) return null;
-    return { raw: str, hex: c.hex, alpha: c.alpha, label: colorLabel(str) };
+    var label = c.alpha < 1 ? c.hex + ' (' + Math.round(c.alpha * 100) + '% opacity)' : c.hex;
+    return { raw: str, hex: c.hex, alpha: c.alpha, label: label };
   }
 
   function edge(t, r, b, l) {
@@ -515,6 +509,7 @@ function getClientScript(options) {
   function clearHoverOutline() {
     if (outlinedEl) {
       outlinedEl.style.outline = prevOutline;
+      outlinedEl.style.outlineOffset = '';
       outlinedEl = null;
     }
   }
@@ -591,7 +586,7 @@ function getClientScript(options) {
   }
 
   function clearSelection() {
-    selectedEls.forEach(function (el) { el.style.outline = ''; });
+    selectedEls.forEach(function (el) { el.style.outline = ''; el.style.outlineOffset = ''; });
     selectedEls.length = 0;
     selectedBadges.forEach(function (b) { b.remove(); });
     selectedBadges.length = 0;
@@ -956,7 +951,7 @@ function getClientScript(options) {
     if (isInputFocused()) return;
 
     if (e.key === 'p' || e.key === 'P') {
-      if (measureMode || !lastHovered) return;
+      if (!lastHovered) return;
       clearHoverOutline();
       toggleSelection(lastHovered);
       return;
@@ -975,11 +970,12 @@ function getClientScript(options) {
     }
 
     if (e.key === 'Escape') {
-      if (pinEl) {
+      if (pinEl || selectedEls.length > 0) {
         clearPin();
+        clearSelection();
         clearMeasureOverlay();
         hideTooltip();
-        updatePillForSelection();
+        collapsePill();
       } else {
         deactivate();
       }
@@ -1005,8 +1001,9 @@ function getClientScript(options) {
 
   window.__specterToggle = function() { if (fiActive) deactivate(); else activate(); };
 
-  if (typeof browser !== 'undefined' && browser.runtime && browser.runtime.onMessage) {
-    browser.runtime.onMessage.addListener(function(msg) {
+  var _rt = (typeof browser !== 'undefined' && browser.runtime) || (typeof chrome !== 'undefined' && chrome.runtime);
+  if (_rt && _rt.onMessage) {
+    _rt.onMessage.addListener(function(msg) {
       if (msg && msg.type === 'specter-toggle') window.__specterToggle();
     });
   }

package/dist/index.js

@@ -276,17 +276,11 @@ function getClientScript(options) {
     return { hex: toHex(m[1], m[2], m[3]), alpha: m[4] !== undefined ? parseFloat(m[4]) : 1 };
   }
 
-  function colorLabel(str) {
-    var c = parseColor(str);
-    if (!c) return null;
-    if (c.alpha < 1) return c.hex + ' (' + Math.round(c.alpha * 100) + '% opacity)';
-    return c.hex;
-  }
-
   function colorObj(str) {
     var c = parseColor(str);
     if (!c) return null;
-    return { raw: str, hex: c.hex, alpha: c.alpha, label: colorLabel(str) };
+    var label = c.alpha < 1 ? c.hex + ' (' + Math.round(c.alpha * 100) + '% opacity)' : c.hex;
+    return { raw: str, hex: c.hex, alpha: c.alpha, label: label };
   }
 
   function edge(t, r, b, l) {
@@ -488,6 +482,7 @@ function getClientScript(options) {
   function clearHoverOutline() {
     if (outlinedEl) {
       outlinedEl.style.outline = prevOutline;
+      outlinedEl.style.outlineOffset = '';
       outlinedEl = null;
     }
   }
@@ -564,7 +559,7 @@ function getClientScript(options) {
   }
 
   function clearSelection() {
-    selectedEls.forEach(function (el) { el.style.outline = ''; });
+    selectedEls.forEach(function (el) { el.style.outline = ''; el.style.outlineOffset = ''; });
     selectedEls.length = 0;
     selectedBadges.forEach(function (b) { b.remove(); });
     selectedBadges.length = 0;
@@ -929,7 +924,7 @@ function getClientScript(options) {
     if (isInputFocused()) return;
 
     if (e.key === 'p' || e.key === 'P') {
-      if (measureMode || !lastHovered) return;
+      if (!lastHovered) return;
       clearHoverOutline();
       toggleSelection(lastHovered);
       return;
@@ -948,11 +943,12 @@ function getClientScript(options) {
     }
 
     if (e.key === 'Escape') {
-      if (pinEl) {
+      if (pinEl || selectedEls.length > 0) {
         clearPin();
+        clearSelection();
         clearMeasureOverlay();
         hideTooltip();
-        updatePillForSelection();
+        collapsePill();
       } else {
         deactivate();
       }
@@ -978,8 +974,9 @@ function getClientScript(options) {
 
   window.__specterToggle = function() { if (fiActive) deactivate(); else activate(); };
 
-  if (typeof browser !== 'undefined' && browser.runtime && browser.runtime.onMessage) {
-    browser.runtime.onMessage.addListener(function(msg) {
+  var _rt = (typeof browser !== 'undefined' && browser.runtime) || (typeof chrome !== 'undefined' && chrome.runtime);
+  if (_rt && _rt.onMessage) {
+    _rt.onMessage.addListener(function(msg) {
       if (msg && msg.type === 'specter-toggle') window.__specterToggle();
     });
   }

package/extension/background.js

@@ -1,8 +1,4 @@
 // Chrome MV3 service worker
-// Toolbar click injects Specter on any page (not just localhost)
 chrome.action.onClicked.addListener((tab) => {
-  chrome.scripting.executeScript({
-    target: { tabId: tab.id },
-    files: ['content.js'],
-  });
+  chrome.tabs.sendMessage(tab.id, { type: 'specter-toggle' });
 });

package/extension/content.js

@@ -273,17 +273,11 @@
     return { hex: toHex(m[1], m[2], m[3]), alpha: m[4] !== undefined ? parseFloat(m[4]) : 1 };
   }
 
-  function colorLabel(str) {
-    var c = parseColor(str);
-    if (!c) return null;
-    if (c.alpha < 1) return c.hex + ' (' + Math.round(c.alpha * 100) + '% opacity)';
-    return c.hex;
-  }
-
   function colorObj(str) {
     var c = parseColor(str);
     if (!c) return null;
-    return { raw: str, hex: c.hex, alpha: c.alpha, label: colorLabel(str) };
+    var label = c.alpha < 1 ? c.hex + ' (' + Math.round(c.alpha * 100) + '% opacity)' : c.hex;
+    return { raw: str, hex: c.hex, alpha: c.alpha, label: label };
   }
 
   function edge(t, r, b, l) {
@@ -485,6 +479,7 @@
   function clearHoverOutline() {
     if (outlinedEl) {
       outlinedEl.style.outline = prevOutline;
+      outlinedEl.style.outlineOffset = '';
       outlinedEl = null;
     }
   }
@@ -561,7 +556,7 @@
   }
 
   function clearSelection() {
-    selectedEls.forEach(function (el) { el.style.outline = ''; });
+    selectedEls.forEach(function (el) { el.style.outline = ''; el.style.outlineOffset = ''; });
     selectedEls.length = 0;
     selectedBadges.forEach(function (b) { b.remove(); });
     selectedBadges.length = 0;
@@ -926,7 +921,7 @@
     if (isInputFocused()) return;
 
     if (e.key === 'p' || e.key === 'P') {
-      if (measureMode || !lastHovered) return;
+      if (!lastHovered) return;
       clearHoverOutline();
       toggleSelection(lastHovered);
       return;
@@ -945,11 +940,12 @@
     }
 
     if (e.key === 'Escape') {
-      if (pinEl) {
+      if (pinEl || selectedEls.length > 0) {
         clearPin();
+        clearSelection();
         clearMeasureOverlay();
         hideTooltip();
-        updatePillForSelection();
+        collapsePill();
       } else {
         deactivate();
       }
@@ -975,8 +971,9 @@
 
   window.__specterToggle = function() { if (fiActive) deactivate(); else activate(); };
 
-  if (typeof browser !== 'undefined' && browser.runtime && browser.runtime.onMessage) {
-    browser.runtime.onMessage.addListener(function(msg) {
+  var _rt = (typeof browser !== 'undefined' && browser.runtime) || (typeof chrome !== 'undefined' && chrome.runtime);
+  if (_rt && _rt.onMessage) {
+    _rt.onMessage.addListener(function(msg) {
       if (msg && msg.type === 'specter-toggle') window.__specterToggle();
     });
   }

package/extension/manifest.firefox.json

@@ -1,12 +1,18 @@
 {
   "manifest_version": 2,
   "name": "Specter",
-  "version": "0.3.0",
+  "version": "0.3.3",
   "description": "Element inspector for AI-assisted development. Ctrl+Option+Z to activate.",
   "browser_specific_settings": {
     "gecko": {
       "id": "specter@setugk.com",
-      "strict_min_version": "109.0"
+      "strict_min_version": "109.0",
+      "data_collection_permissions": {
+        "required": [
+          "none"
+        ],
+        "optional": []
+      }
     }
   },
   "icons": {
@@ -24,15 +30,23 @@
     "default_title": "Toggle Specter"
   },
   "background": {
-    "scripts": ["background.firefox.js"],
+    "scripts": [
+      "background.firefox.js"
+    ],
     "persistent": false
   },
   "content_scripts": [
     {
-      "matches": ["<all_urls>"],
-      "js": ["content.js"],
+      "matches": [
+        "<all_urls>"
+      ],
+      "js": [
+        "content.js"
+      ],
       "run_at": "document_end"
     }
   ],
-  "permissions": ["activeTab"]
-}
+  "permissions": [
+    "activeTab"
+  ]
+}

package/extension/manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "Specter",
-  "version": "0.3.0",
+  "version": "0.3.3",
   "description": "Element inspector for AI-assisted development. Ctrl+Option+Z to activate.",
   "icons": {
     "16": "icons/icon16.png",
@@ -24,13 +24,15 @@
   "content_scripts": [
     {
       "matches": [
-        "http://localhost/*",
-        "http://127.0.0.1/*",
-        "http://0.0.0.0/*"
+        "<all_urls>"
+      ],
+      "js": [
+        "content.js"
       ],
-      "js": ["content.js"],
       "run_at": "document_end"
     }
   ],
-  "permissions": ["activeTab", "scripting"]
+  "permissions": [
+    "activeTab"
+  ]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-specter",
-  "version": "0.3.2",
+  "version": "0.3.4",
   "description": "Inspect elements and Figma-style measure spacing in your vibe-coded Vite projects. Give your AI exactly what it needs to make the right change.",
   "author": "Setu Kathawate <dev@setugk.com>",
   "homepage": "https://github.com/setugk/vite-plugin-specter#readme",