chore(release): 1.10.1

## [1.10.1](https://github.com/obsqrbtz/goose-highlighter/compare/v1.10.0...v1.10.1) (2025-11-20)

### Bug Fixes

* add fake highlighting for textareas ([f3c999a](f3c999ad19))
* correct matches list buttons handling ([f895327](f895327eb0))
* go to textarea match ([fc4ef86](fc4ef8655d))

CHANGELOG.md

@@ -1,3 +1,12 @@
+## [1.10.1](https://github.com/obsqrbtz/goose-highlighter/compare/v1.10.0...v1.10.1) (2025-11-20)
+
+
+### Bug Fixes
+
+* add fake highlighting for textareas ([f3c999a](https://github.com/obsqrbtz/goose-highlighter/commit/f3c999ad192d20ad4024261d8b3c8628de21382a))
+* correct matches list buttons handling ([f895327](https://github.com/obsqrbtz/goose-highlighter/commit/f895327eb0efc325309fea02eb4030eb8301916a))
+* go to textarea match ([fc4ef86](https://github.com/obsqrbtz/goose-highlighter/commit/fc4ef8655d0a4bce8ef6b67e45f5929e21c9b746))
+
 # [1.10.0](https://github.com/obsqrbtz/goose-highlighter/compare/v1.9.3...v1.10.0) (2025-11-20)
 
 

manifest.json

@@ -2,7 +2,7 @@
   "manifest_version": 3,
   "name": "__MSG_extension_name__",
   "description": "__MSG_extension_description__",
-  "version": "1.10.0",
+  "version": "1.10.1",
   "default_locale": "en",
   "permissions": [
     "scripting",

src/content/HighlightEngine.ts

@@ -5,9 +5,12 @@ export class HighlightEngine {
   private styleSheet: CSSStyleSheet | null = null;
   private highlights = new Map<string, Highlight>();
   private highlightsByWord = new Map<string, Range[]>();
+  private textareaMatchesByWord = new Map<string, Array<{ input: HTMLTextAreaElement | HTMLInputElement; position: number }>>();
   private observer: MutationObserver;
   private isHighlighting = false;
   private currentMatchCase = false;
+  private textareaOverlays = new Map<HTMLTextAreaElement | HTMLInputElement, HTMLElement>();
+  private resizeObserver: ResizeObserver;
 
   constructor(private onUpdate: () => void) {
     this.observer = new MutationObserver(DOMUtils.debounce((mutations: MutationRecord[]) => {
@@ -27,6 +30,16 @@ export class HighlightEngine {
         this.onUpdate();
       }
     }, CONSTANTS.DEBOUNCE_DELAY));
+
+    this.resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const input = entry.target as HTMLTextAreaElement | HTMLInputElement;
+        const overlay = this.textareaOverlays.get(input);
+        if (overlay) {
+          this.updateOverlayPosition(input, overlay);
+        }
+      }
+    });
   }
 
   private initializeStyleSheet(): void {
@@ -62,6 +75,23 @@ export class HighlightEngine {
   clearHighlights(): void {
     this.observer.disconnect();
     this.clearHighlightsInternal();
+    this.clearTextareaOverlays();
+  }
+
+  private clearTextareaOverlays(): void {
+    for (const [input, overlay] of this.textareaOverlays.entries()) {
+      this.resizeObserver.unobserve(input);
+      overlay.remove();
+    }
+    this.textareaOverlays.clear();
+  }
+
+  private updateOverlayPosition(input: HTMLTextAreaElement | HTMLInputElement, overlay: HTMLElement): void {
+    const rect = input.getBoundingClientRect();
+    overlay.style.width = `${input.clientWidth}px`;
+    overlay.style.height = `${input.clientHeight}px`;
+    overlay.style.top = `${rect.top + window.scrollY}px`;
+    overlay.style.left = `${rect.left + window.scrollX}px`;
   }
 
   private getTextNodes(): Text[] {
@@ -71,7 +101,7 @@ export class HighlightEngine {
       NodeFilter.SHOW_TEXT,
       {
         acceptNode: (node: Text) => {
-          if (node.parentNode && ['SCRIPT', 'STYLE', 'NOSCRIPT', 'IFRAME'].includes(node.parentNode.nodeName)) {
+          if (node.parentNode && ['SCRIPT', 'STYLE', 'NOSCRIPT', 'IFRAME', 'TEXTAREA', 'INPUT'].includes(node.parentNode.nodeName)) {
             return NodeFilter.FILTER_REJECT;
           }
           if (!node.nodeValue?.trim()) {
@@ -112,6 +142,7 @@ export class HighlightEngine {
 
     this.observer.disconnect();
     this.clearHighlightsInternal();
+    this.clearTextareaOverlays();
 
     const activeWords = this.extractActiveWords(lists);
     if (activeWords.length === 0) {
@@ -148,6 +179,7 @@ export class HighlightEngine {
 
       const rangesByStyle = new Map<number, Range[]>();
       this.highlightsByWord.clear();
+      this.textareaMatchesByWord.clear();
 
       for (const node of textNodes) {
         if (!node.nodeValue) continue;
@@ -184,6 +216,8 @@ export class HighlightEngine {
         this.highlights.set(highlightName, highlight);
         CSS.highlights.set(highlightName, highlight);
       }
+
+      this.highlightTextareas(pattern, styleMap, activeWords);
     } catch (e) {
       console.error('Regex error:', e);
     }
@@ -192,12 +226,121 @@ export class HighlightEngine {
     this.isHighlighting = false;
   }
 
+  private highlightTextareas(pattern: RegExp, styleMap: Map<string, number>, activeWords: ActiveWord[]): void {
+    const textareas = document.querySelectorAll('textarea, input[type="text"], input[type="search"], input[type="email"], input[type="url"]');
+
+    for (const element of Array.from(textareas)) {
+      const input = element as HTMLTextAreaElement | HTMLInputElement;
+      const text = input.value;
+
+      if (!text) continue;
+
+      const matches: Array<{ start: number; end: number; background: string; foreground: string }> = [];
+      pattern.lastIndex = 0;
+      let match;
+
+      while ((match = pattern.exec(text)) !== null) {
+        const lookup = this.currentMatchCase ? match[0] : match[0].toLowerCase();
+        const styleIdx = styleMap.get(lookup);
+
+        if (styleIdx !== undefined) {
+          const activeWord = activeWords.find(w =>
+            (this.currentMatchCase ? w.text : w.text.toLowerCase()) === lookup
+          );
+          if (activeWord) {
+            matches.push({
+              start: match.index,
+              end: match.index + match[0].length,
+              background: activeWord.background,
+              foreground: activeWord.foreground
+            });
+
+            // Track textarea matches for navigation
+            if (!this.textareaMatchesByWord.has(lookup)) {
+              this.textareaMatchesByWord.set(lookup, []);
+            }
+            this.textareaMatchesByWord.get(lookup)!.push({
+              input,
+              position: match.index
+            });
+          }
+        }
+      }
+
+      if (matches.length > 0) {
+        this.createTextareaOverlay(input, text, matches);
+      }
+    }
+  }
+
+  private createTextareaOverlay(input: HTMLTextAreaElement | HTMLInputElement, text: string, matches: Array<{ start: number; end: number; background: string; foreground: string }>): void {
+    const overlay = document.createElement('div');
+    overlay.className = 'goose-highlighter-textarea-overlay';
+
+    const computedStyle = window.getComputedStyle(input);
+    const styles = [
+      'font-family', 'font-size', 'font-weight', 'font-style',
+      'line-height', 'letter-spacing', 'word-spacing',
+      'padding-top', 'padding-right', 'padding-bottom', 'padding-left',
+      'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width',
+      'white-space', 'word-wrap', 'overflow-wrap'
+    ];
+
+    overlay.style.position = 'absolute';
+    overlay.style.pointerEvents = 'none';
+    overlay.style.color = 'transparent';
+    overlay.style.overflow = 'hidden';
+    overlay.style.whiteSpace = input.tagName === 'TEXTAREA' ? 'pre-wrap' : 'pre';
+    overlay.style.overflowWrap = 'break-word';
+
+    for (const prop of styles) {
+      overlay.style.setProperty(prop, computedStyle.getPropertyValue(prop));
+    }
+
+    this.updateOverlayPosition(input, overlay);
+
+    let html = '';
+    let lastIndex = 0;
+
+    for (const match of matches) {
+      html += this.escapeHtml(text.substring(lastIndex, match.start));
+      html += `<mark style="background-color: ${match.background}; color: ${match.foreground}; padding: 0; margin: 0;">${this.escapeHtml(text.substring(match.start, match.end))}</mark>`;
+      lastIndex = match.end;
+    }
+    html += this.escapeHtml(text.substring(lastIndex));
+
+    overlay.innerHTML = html;
+    document.body.appendChild(overlay);
+    this.textareaOverlays.set(input, overlay);
+
+    this.resizeObserver.observe(input);
+
+    const updateOverlay = () => {
+      this.resizeObserver.unobserve(input);
+      overlay.remove();
+      this.textareaOverlays.delete(input);
+    };
+
+    input.addEventListener('input', updateOverlay, { once: true });
+    input.addEventListener('scroll', () => {
+      overlay.scrollTop = input.scrollTop;
+      overlay.scrollLeft = input.scrollLeft;
+    });
+  }
+
+  private escapeHtml(text: string): string {
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+  }
+
   private clearHighlightsInternal(): void {
     for (const name of this.highlights.keys()) {
       CSS.highlights.delete(name);
     }
     this.highlights.clear();
     this.highlightsByWord.clear();
+    this.textareaMatchesByWord.clear();
 
     if (this.styleSheet && this.styleSheet.cssRules.length > 0) {
       while (this.styleSheet.cssRules.length > 0) {
@@ -208,53 +351,74 @@ export class HighlightEngine {
 
   getPageHighlights(activeWords: ActiveWord[]): Array<{ word: string; count: number; background: string; foreground: string }> {
     const seen = new Map<string, { word: string; count: number; background: string; foreground: string }>();
-    
+
     for (const activeWord of activeWords) {
       const lookup = this.currentMatchCase ? activeWord.text : activeWord.text.toLowerCase();
       const ranges = this.highlightsByWord.get(lookup);
-      
+      const textareaMatches = this.textareaMatchesByWord.get(lookup);
-      if (ranges && ranges.length > 0 && !seen.has(lookup)) {
+
+      const totalCount = (ranges?.length || 0) + (textareaMatches?.length || 0);
+
+      if (totalCount > 0 && !seen.has(lookup)) {
         seen.set(lookup, {
           word: activeWord.text,
-          count: ranges.length,
+          count: totalCount,
           background: activeWord.background,
           foreground: activeWord.foreground
         });
       }
     }
-    
+
     return Array.from(seen.values());
   }
 
   scrollToHighlight(word: string, index: number): void {
     const lookup = this.currentMatchCase ? word : word.toLowerCase();
-    const ranges = this.highlightsByWord.get(lookup);
+    const ranges = this.highlightsByWord.get(lookup) || [];
-    
+    const textareaMatches = this.textareaMatchesByWord.get(lookup) || [];
-    if (!ranges || ranges.length === 0) return;
+
-    
+    const totalMatches = ranges.length + textareaMatches.length;
-    const targetIndex = Math.min(index, ranges.length - 1);
+    if (totalMatches === 0) return;
-    const range = ranges[targetIndex];
+
-    
+    const targetIndex = Math.min(index, totalMatches - 1);
-    if (!range) return;
 
     try {
+      if (targetIndex >= ranges.length) {
+        const textareaIndex = targetIndex - ranges.length;
+        const textareaMatch = textareaMatches[textareaIndex];
+        this.scrollToTextareaMatch(textareaMatch.input, textareaMatch.position, word.length);
+        return;
+      }
+
+      const range = ranges[targetIndex];
+      if (!range) return;
+
+      // First, scroll any scrollable containers
+      const element = range.commonAncestorContainer.nodeType === Node.TEXT_NODE
+        ? range.commonAncestorContainer.parentElement
+        : range.commonAncestorContainer as Element;
+
+      if (element) {
+        this.scrollIntoViewInContainers(element);
+      }
+
+      // Then scroll the main window
       const rect = range.getBoundingClientRect();
-      
       const absoluteTop = window.pageYOffset + rect.top;
       const middle = absoluteTop - (window.innerHeight / 2) + (rect.height / 2);
-      
+
       window.scrollTo({
         top: middle,
         behavior: 'smooth'
       });
-      
+
       const flashHighlight = new Highlight(range);
       CSS.highlights.set('gh-flash', flashHighlight);
-      
+
       if (this.styleSheet) {
         const flashRule = '::highlight(gh-flash) { background-color: rgba(255, 165, 0, 0.8); box-shadow: 0 0 10px 3px rgba(255, 165, 0, 0.8); }';
         const ruleIndex = this.styleSheet.insertRule(flashRule, this.styleSheet.cssRules.length);
-        
+
         setTimeout(() => {
           CSS.highlights.delete('gh-flash');
           if (this.styleSheet && ruleIndex < this.styleSheet.cssRules.length) {
@@ -267,6 +431,102 @@ export class HighlightEngine {
     }
   }
 
+  private scrollToTextareaMatch(input: HTMLTextAreaElement | HTMLInputElement, position: number, wordLength: number): void {
+    input.scrollIntoView({ behavior: 'smooth', block: 'center' });
+
+    if (input.tagName === 'TEXTAREA') {
+      const textarea = input as HTMLTextAreaElement;
+      const text = textarea.value;
+      const beforeText = text.substring(0, position);
+      const lines = beforeText.split('\n');
+      const lineNumber = lines.length - 1;
+
+      const computedStyle = window.getComputedStyle(textarea);
+      const lineHeight = parseFloat(computedStyle.lineHeight) || parseFloat(computedStyle.fontSize) * 1.2;
+
+      const targetScrollTop = lineNumber * lineHeight - (textarea.clientHeight / 2);
+      textarea.scrollTop = Math.max(0, targetScrollTop);
+    }
+
+    input.focus();
+    input.setSelectionRange(position, position + wordLength);
+
+    const overlay = this.textareaOverlays.get(input);
+    if (overlay) {
+      const marks = overlay.querySelectorAll('mark');
+      for (const mark of Array.from(marks)) {
+        const markElement = mark as HTMLElement;
+        const markText = markElement.textContent || '';
+        const markStart = this.getTextPosition(overlay, markElement);
+
+        if (markStart === position) {
+          const originalBackground = markElement.style.backgroundColor;
+          markElement.style.backgroundColor = 'rgba(255, 165, 0, 0.8)';
+          markElement.style.boxShadow = '0 0 10px 3px rgba(255, 165, 0, 0.8)';
+
+          setTimeout(() => {
+            markElement.style.backgroundColor = originalBackground;
+            markElement.style.boxShadow = '';
+          }, 600);
+          break;
+        }
+      }
+    }
+  }
+
+  private getTextPosition(overlay: HTMLElement, targetMark: HTMLElement): number {
+    let position = 0;
+    const walker = document.createTreeWalker(overlay, NodeFilter.SHOW_TEXT | NodeFilter.SHOW_ELEMENT);
+
+    let node: Node | null;
+    while ((node = walker.nextNode())) {
+      if (node === targetMark) {
+        return position;
+      }
+      if (node.nodeType === Node.TEXT_NODE) {
+        position += node.textContent?.length || 0;
+      }
+    }
+
+    return position;
+  }
+
+  private scrollIntoViewInContainers(element: Element): void {
+    let current: Element | null = element;
+
+    while (current && current !== document.body) {
+      const parent: HTMLElement | null = current.parentElement;
+      if (!parent) break;
+
+      const parentStyle = window.getComputedStyle(parent);
+      const isScrollable = (
+        (parentStyle.overflow === 'auto' || parentStyle.overflow === 'scroll' ||
+          parentStyle.overflowY === 'auto' || parentStyle.overflowY === 'scroll' ||
+          parentStyle.overflowX === 'auto' || parentStyle.overflowX === 'scroll') &&
+        (parent.scrollHeight > parent.clientHeight || parent.scrollWidth > parent.clientWidth)
+      );
+
+      if (isScrollable) {
+        const parentRect = parent.getBoundingClientRect();
+        const elementRect = element.getBoundingClientRect();
+
+        if (elementRect.top < parentRect.top) {
+          parent.scrollTop -= (parentRect.top - elementRect.top) + 20;
+        } else if (elementRect.bottom > parentRect.bottom) {
+          parent.scrollTop += (elementRect.bottom - parentRect.bottom) + 20;
+        }
+
+        if (elementRect.left < parentRect.left) {
+          parent.scrollLeft -= (parentRect.left - elementRect.left) + 20;
+        } else if (elementRect.right > parentRect.right) {
+          parent.scrollLeft += (elementRect.right - parentRect.right) + 20;
+        }
+      }
+
+      current = parent;
+    }
+  }
+
   stopObserving(): void {
     this.observer.disconnect();
   }
@@ -281,6 +541,8 @@ export class HighlightEngine {
 
   destroy(): void {
     this.observer.disconnect();
+    this.resizeObserver.disconnect();
     this.clearHighlights();
+    this.clearTextareaOverlays();
   }
 }

src/popup/PopupController.ts

@@ -339,12 +339,17 @@ export class PopupController {
       const word = item.dataset.word;
       if (!word) return;
 
-      if (target.classList.contains('highlight-prev')) {
+      const button = target.closest('button');
+      
+      if (button?.classList.contains('highlight-prev')) {
+        e.stopPropagation();
         await this.navigateHighlight(word, -1);
-      } else if (target.classList.contains('highlight-next')) {
+      } else if (button?.classList.contains('highlight-next')) {
+        e.stopPropagation();
         await this.navigateHighlight(word, 1);
-      } else {
+      } else if (!button) {
-        await this.jumpToHighlight(word, 0);
+        const currentIndex = this.highlightIndices.get(word) || 0;
+        await this.jumpToHighlight(word, currentIndex);
       }
     });
   }