morvader · morvader · Mar 10, 2026 · Mar 10, 2026 · Mar 10, 2026
diff --git a/js/annotation_editor.html b/js/annotation_editor.html
@@ -98,6 +98,10 @@
             cursor: text;
         }
 
+        #annotation-canvas.tool-blur {
+            cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="12" r="8" fill="none" stroke="%23818CF8" stroke-width="2" stroke-dasharray="3 2"/><circle cx="12" cy="12" r="3" fill="%23818CF8" opacity="0.5"/></svg>') 12 12, crosshair;
+        }
+
         #text-input {
             position: absolute;
             display: none;
@@ -182,6 +186,18 @@
             background: #B91C1C;
         }
 
+        #blur-tool.active {
+            background: #4F46E5;
+            border-color: #4F46E5;
+            box-shadow:
+                0 0 0 3px rgba(79, 70, 229, 0.3),
+                0 4px 12px rgba(79, 70, 229, 0.4);
+        }
+
+        #blur-tool.active:hover {
+            background: #4338CA;
+        }
+
         .action-button {
             padding: 0 24px;
             height: 44px;
@@ -341,6 +357,7 @@
                 <span><span class="shortcut-key">A</span> Arrow</span>
                 <span><span class="shortcut-key">R</span> Rectangle</span>
                 <span><span class="shortcut-key">T</span> Text</span>
+                <span><span class="shortcut-key">B</span> Blur</span>
                 <span><span class="shortcut-key">Ctrl+Z</span> Undo</span>
                 <span><span class="shortcut-key">Esc</span> Cancel</span>
                 <span><span class="shortcut-key">Ctrl+Enter</span> Save</span>
@@ -372,6 +389,16 @@
                         <line x1="12" y1="4" x2="12" y2="20"></line>
                     </svg>
                 </button>
+                <button class="tool-button" id="blur-tool" data-tooltip="Blur (B)">
+                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <circle cx="12" cy="12" r="8" stroke-dasharray="3 2"/>
+                        <circle cx="12" cy="12" r="3" fill="currentColor" opacity="0.6"/>
+                        <line x1="4" y1="8" x2="2" y2="8"/>
+                        <line x1="22" y1="8" x2="20" y2="8"/>
+                        <line x1="4" y1="16" x2="2" y2="16"/>
+                        <line x1="22" y1="16" x2="20" y2="16"/>
+                    </svg>
+                </button>
                 <button class="tool-button" id="undo-button" data-tooltip="Undo (Ctrl+Z)" disabled>
                     <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                         <polyline points="1 4 1 10 7 10"></polyline>

diff --git a/js/annotation_editor.js b/js/annotation_editor.js
@@ -5,7 +5,7 @@
     const canvas = document.getElementById('annotation-canvas');
     const ctx = canvas.getContext('2d');
 
-    let currentTool = 'arrow'; // 'arrow', 'rectangle', or 'text'
+    let currentTool = 'arrow'; // 'arrow', 'rectangle', 'text', or 'blur'
     let isDrawing = false;
     let isEditingText = false;
     let startX, startY;
@@ -18,6 +18,7 @@
     const LINE_WIDTH = 3;
     const TEXT_FONT_SIZE = 20;
     const TEXT_FONT = `bold ${TEXT_FONT_SIZE}px 'IBM Plex Sans', sans-serif`;
+    const BLUR_RADIUS = 12; // px – strength of the blur effect
 
     // Text input element
     const textInput = document.getElementById('text-input');
@@ -84,6 +85,8 @@
             drawRectangle(annotation.startX, annotation.startY, annotation.width, annotation.height);
         } else if (annotation.type === 'text') {
             drawText(annotation.x, annotation.y, annotation.text);
+        } else if (annotation.type === 'blur') {
+            drawBlur(annotation.x, annotation.y, annotation.width, annotation.height);
         }
     }
 
@@ -120,6 +123,26 @@
         ctx.stroke();
     }
 
+    // Draw blurred region
+    function drawBlur(x, y, width, height) {
+        if (!baseImage || Math.abs(width) < 2 || Math.abs(height) < 2) return;
+
+        // Normalize so rect always starts at top-left
+        const rx = width < 0 ? x + width : x;
+        const ry = height < 0 ? y + height : y;
+        const rw = Math.abs(width);
+        const rh = Math.abs(height);
+
+        ctx.save();
+        ctx.beginPath();
+        ctx.rect(rx, ry, rw, rh);
+        ctx.clip(); // confine blur to the selected rectangle
+        ctx.filter = `blur(${BLUR_RADIUS}px)`;
+        // Redraw the base image with blur; clip prevents it bleeding outside the rect
+        ctx.drawImage(baseImage, 0, 0);
+        ctx.restore();
+    }
+
     // Draw text
     function drawText(x, y, text) {
         ctx.font = TEXT_FONT;
@@ -231,6 +254,10 @@
             const width = pos.x - startX;
             const height = pos.y - startY;
             drawRectangle(startX, startY, width, height);
+        } else if (currentTool === 'blur') {
+            const width = pos.x - startX;
+            const height = pos.y - startY;
+            drawBlur(startX, startY, width, height);
         }
     });
 
@@ -257,6 +284,18 @@
                 width: pos.x - startX,
                 height: pos.y - startY
             });
+        } else if (currentTool === 'blur') {
+            const width = pos.x - startX;
+            const height = pos.y - startY;
+            if (Math.abs(width) >= 2 && Math.abs(height) >= 2) {
+                annotations.push({
+                    type: 'blur',
+                    x: startX,
+                    y: startY,
+                    width: width,
+                    height: height
+                });
+            }
         }
 
         redrawCanvas();
@@ -270,12 +309,14 @@
         document.getElementById('arrow-tool').classList.toggle('active', tool === 'arrow');
         document.getElementById('rectangle-tool').classList.toggle('active', tool === 'rectangle');
         document.getElementById('text-tool').classList.toggle('active', tool === 'text');
+        document.getElementById('blur-tool').classList.toggle('active', tool === 'blur');
         canvas.className = 'tool-' + tool;
     }
 
     document.getElementById('arrow-tool').addEventListener('click', () => setActiveTool('arrow'));
     document.getElementById('rectangle-tool').addEventListener('click', () => setActiveTool('rectangle'));
     document.getElementById('text-tool').addEventListener('click', () => setActiveTool('text'));
+    document.getElementById('blur-tool').addEventListener('click', () => setActiveTool('blur'));
 
     // Undo button
     document.getElementById('undo-button').addEventListener('click', undo);
@@ -328,6 +369,8 @@
             document.getElementById('rectangle-tool').click();
         } else if (e.key === 't' || e.key === 'T') {
             document.getElementById('text-tool').click();
+        } else if (e.key === 'b' || e.key === 'B') {
+            document.getElementById('blur-tool').click();
         } else if (e.key === 'z' && (e.ctrlKey || e.metaKey)) {
             e.preventDefault();
             undo();

diff --git a/manifest.json b/manifest.json
@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "Exploratory Testing Extension",
-  "version": "4.1.0",
+  "version": "4.1.1",
   "description": "Chrome extension for exploratory testing",
   "permissions": [
     "storage",