feat: show all found words and allow jump to them (beta)

src/content/ContentScript.ts

@@ -47,21 +47,28 @@ export class ContentScript {
   }
 
   private setupMessageListener(): void {
-    MessageService.onMessage((message: MessageData) => {
+    MessageService.onMessage((message: MessageData, sender: any, sendResponse: (response?: any) => void) => {
       switch (message.type) {
         case 'WORD_LIST_UPDATED':
           this.handleWordListUpdate();
-          break;
+          return false;
         case 'GLOBAL_TOGGLE_UPDATED':
           this.handleGlobalToggleUpdate(message.enabled!);
-          break;
+          return false;
         case 'MATCH_OPTIONS_UPDATED':
           this.handleMatchOptionsUpdate(message.matchCase!, message.matchWhole!);
-          break;
+          return false;
         case 'EXCEPTIONS_LIST_UPDATED':
           this.handleExceptionsUpdate();
-          break;
+          return false;
+        case 'GET_PAGE_HIGHLIGHTS':
+          this.handleGetPageHighlights(sendResponse);
+          return true;
+        case 'SCROLL_TO_HIGHLIGHT':
+          this.handleScrollToHighlight(message.word!, message.index!);
+          return false;
       }
+      return false;
     });
   }
 
@@ -106,4 +113,27 @@ export class ContentScript {
       this.isProcessing = false;
     }
   }
+
+  private handleGetPageHighlights(sendResponse: (response: any) => void): void {
+    const activeWords: ActiveWord[] = [];
+    
+    for (const list of this.lists) {
+      if (!list.active) continue;
+      for (const word of list.words) {
+        if (!word.active) continue;
+        activeWords.push({
+          text: word.wordStr,
+          background: word.background || list.background,
+          foreground: word.foreground || list.foreground
+        });
+      }
+    }
+
+    const highlights = this.highlightEngine.getPageHighlights(activeWords);
+    sendResponse({ highlights });
+  }
+
+  private handleScrollToHighlight(word: string, index: number): void {
+    this.highlightEngine.scrollToHighlight(word, index);
+  }
 }

src/content/HighlightEngine.ts

@@ -4,8 +4,10 @@ import { DOMUtils } from '../utils/DOMUtils.js';
 export class HighlightEngine {
   private styleSheet: CSSStyleSheet | null = null;
   private highlights = new Map<string, Highlight>();
+  private highlightsByWord = new Map<string, Range[]>();
   private observer: MutationObserver;
   private isHighlighting = false;
+  private currentMatchCase = false;
 
   constructor(private onUpdate: () => void) {
     this.observer = new MutationObserver(DOMUtils.debounce((mutations: MutationRecord[]) => {
@@ -106,6 +108,8 @@ export class HighlightEngine {
     if (this.isHighlighting) return;
     this.isHighlighting = true;
 
+    this.currentMatchCase = matchCase;
+
     this.observer.disconnect();
     this.clearHighlightsInternal();
 
@@ -143,6 +147,7 @@ export class HighlightEngine {
       const textNodes = this.getTextNodes();
 
       const rangesByStyle = new Map<number, Range[]>();
+      this.highlightsByWord.clear();
 
       for (const node of textNodes) {
         if (!node.nodeValue) continue;
@@ -164,6 +169,11 @@ export class HighlightEngine {
               rangesByStyle.set(styleIdx, []);
             }
             rangesByStyle.get(styleIdx)!.push(range);
+
+            if (!this.highlightsByWord.has(lookup)) {
+              this.highlightsByWord.set(lookup, []);
+            }
+            this.highlightsByWord.get(lookup)!.push(range);
           }
         }
       }
@@ -187,6 +197,7 @@ export class HighlightEngine {
       CSS.highlights.delete(name);
     }
     this.highlights.clear();
+    this.highlightsByWord.clear();
 
     if (this.styleSheet && this.styleSheet.cssRules.length > 0) {
       while (this.styleSheet.cssRules.length > 0) {
@@ -195,6 +206,67 @@ 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);
+      
+      if (ranges && ranges.length > 0 && !seen.has(lookup)) {
+        seen.set(lookup, {
+          word: activeWord.text,
+          count: ranges.length,
+          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);
+    
+    if (!ranges || ranges.length === 0) return;
+    
+    const targetIndex = Math.min(index, ranges.length - 1);
+    const range = ranges[targetIndex];
+    
+    if (!range) return;
+
+    try {
+      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) {
+            this.styleSheet.deleteRule(ruleIndex);
+          }
+        }, 600);
+      }
+    } catch (e) {
+      console.error('Error scrolling to highlight:', e);
+    }
+  }
+
   stopObserving(): void {
     this.observer.disconnect();
   }

src/popup/PopupController.ts

@@ -1,4 +1,4 @@
-import { HighlightList, HighlightWord, ExportData } from '../types.js';
+import { HighlightList, HighlightWord, ExportData, HighlightInfo } from '../types.js';
 import { StorageService } from '../services/StorageService.js';
 import { MessageService } from '../services/MessageService.js';
 import { DOMUtils } from '../utils/DOMUtils.js';
@@ -14,6 +14,8 @@ export class PopupController {
   private exceptionsList: string[] = [];
   private currentTabHost = '';
   private activeTab = 'lists';
+  private pageHighlights: Array<{ word: string; count: number; background: string; foreground: string }> = [];
+  private highlightIndices = new Map<string, number>();
 
   async initialize(): Promise<void> {
     await this.loadData();
@@ -99,6 +101,10 @@ export class PopupController {
     document.querySelectorAll('.tab-content').forEach(content => {
       content.classList.toggle('active', content.getAttribute('data-tab-content') === tabName);
     });
+
+    if (tabName === 'page-highlights') {
+      this.loadPageHighlights();
+    }
   }
 
   private setupEventListeners(): void {
@@ -106,6 +112,7 @@ export class PopupController {
     this.setupListManagement();
     this.setupWordManagement();
     this.setupSettings();
+    this.setupPageHighlights();
     this.setupExceptions();
     this.setupImportExport();
     this.setupTheme();
@@ -318,6 +325,110 @@ export class PopupController {
     });
   }
 
+  private setupPageHighlights(): void {
+    document.getElementById('refreshHighlightsBtn')?.addEventListener('click', async () => {
+      await this.loadPageHighlights();
+    });
+
+    document.getElementById('pageHighlightsList')?.addEventListener('click', async (e) => {
+      const target = e.target as HTMLElement;
+      const item = target.closest('.page-highlight-item') as HTMLElement;
+      
+      if (!item) return;
+
+      const word = item.dataset.word;
+      if (!word) return;
+
+      if (target.classList.contains('highlight-prev')) {
+        await this.navigateHighlight(word, -1);
+      } else if (target.classList.contains('highlight-next')) {
+        await this.navigateHighlight(word, 1);
+      } else {
+        await this.jumpToHighlight(word, 0);
+      }
+    });
+  }
+
+  private async loadPageHighlights(): Promise<void> {
+    try {
+      const response = await MessageService.sendToActiveTab({ type: 'GET_PAGE_HIGHLIGHTS' });
+      
+      if (response && response.highlights) {
+        this.pageHighlights = response.highlights;
+        this.highlightIndices.clear();
+        this.pageHighlights.forEach(h => this.highlightIndices.set(h.word, 0));
+        this.renderPageHighlights();
+      }
+    } catch (e) {
+      console.error('Error loading page highlights:', e);
+      this.pageHighlights = [];
+      this.renderPageHighlights();
+    }
+  }
+
+  private async jumpToHighlight(word: string, index: number): Promise<void> {
+    this.highlightIndices.set(word, index);
+    await MessageService.sendToActiveTab({
+      type: 'SCROLL_TO_HIGHLIGHT',
+      word,
+      index
+    });
+    this.renderPageHighlights();
+  }
+
+  private async navigateHighlight(word: string, direction: number): Promise<void> {
+    const highlight = this.pageHighlights.find(h => h.word === word);
+    if (!highlight) return;
+
+    const currentIndex = this.highlightIndices.get(word) || 0;
+    let newIndex = currentIndex + direction;
+
+    if (newIndex < 0) newIndex = highlight.count - 1;
+    if (newIndex >= highlight.count) newIndex = 0;
+
+    await this.jumpToHighlight(word, newIndex);
+  }
+
+  private renderPageHighlights(): void {
+    const container = document.getElementById('pageHighlightsList');
+    const countElement = document.getElementById('totalHighlightsCount');
+    
+    if (!container || !countElement) return;
+
+    const totalCount = this.pageHighlights.reduce((sum, h) => sum + h.count, 0);
+    countElement.textContent = totalCount.toString();
+
+    if (this.pageHighlights.length === 0) {
+      container.innerHTML = `<div class="page-highlights-empty">${chrome.i18n.getMessage('no_highlights_on_page') || 'No highlights on this page'}</div>`;
+      return;
+    }
+
+    container.innerHTML = this.pageHighlights.map(highlight => {
+      const currentIndex = this.highlightIndices.get(highlight.word) || 0;
+      return `
+        <div class="page-highlight-item" data-word="${DOMUtils.escapeHtml(highlight.word)}">
+          <div class="page-highlight-word">
+            <span class="page-highlight-preview" style="background-color: ${highlight.background}; color: ${highlight.foreground};">
+              ${DOMUtils.escapeHtml(highlight.word)}
+            </span>
+            ${highlight.count > 1 ? `<span class="page-highlight-position">${currentIndex + 1}/${highlight.count}</span>` : ''}
+          </div>
+          <span class="page-highlight-count">${highlight.count}</span>
+          ${highlight.count > 1 ? `
+            <div class="page-highlight-nav">
+              <button class="highlight-prev" title="${chrome.i18n.getMessage('previous') || 'Previous'}">
+                <i class="fa-solid fa-chevron-up"></i>
+              </button>
+              <button class="highlight-next" title="${chrome.i18n.getMessage('next') || 'Next'}">
+                <i class="fa-solid fa-chevron-down"></i>
+              </button>
+            </div>
+          ` : ''}
+        </div>
+      `;
+    }).join('');
+  }
+
   private setupExceptions(): void {
     document.getElementById('toggleExceptionBtn')?.addEventListener('click', async () => {
       if (!this.currentTabHost) return;

src/services/MessageService.ts

@@ -19,7 +19,15 @@ export class MessageService {
     });
   }
 
-  static onMessage(callback: (message: MessageData) => void): void {
+  static onMessage(callback: (message: MessageData, sender: any, sendResponse: (response?: any) => void) => void | boolean): void {
     chrome.runtime.onMessage.addListener(callback);
   }
+
+  static async sendToActiveTab(message: MessageData): Promise<any> {
+    const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
+    if (tab.id) {
+      return chrome.tabs.sendMessage(tab.id, message);
+    }
+    return null;
+  }
 }

src/types.ts

@@ -28,11 +28,21 @@ export interface ActiveWord {
   foreground: string;
 }
 
+export interface HighlightInfo {
+  word: string;
+  count: number;
+  background: string;
+  foreground: string;
+}
+
 export interface MessageData {
-  type: 'WORD_LIST_UPDATED' | 'GLOBAL_TOGGLE_UPDATED' | 'MATCH_OPTIONS_UPDATED' | 'EXCEPTIONS_LIST_UPDATED';
+  type: 'WORD_LIST_UPDATED' | 'GLOBAL_TOGGLE_UPDATED' | 'MATCH_OPTIONS_UPDATED' | 'EXCEPTIONS_LIST_UPDATED' | 'GET_PAGE_HIGHLIGHTS' | 'PAGE_HIGHLIGHTS_RESPONSE' | 'SCROLL_TO_HIGHLIGHT';
   enabled?: boolean;
   matchCase?: boolean;
   matchWhole?: boolean;
+  highlights?: HighlightInfo[];
+  word?: string;
+  index?: number;
 }
 
 export interface ExportData {