Site Exceptions
diff --git a/src/content/ContentScript.ts b/src/content/ContentScript.ts
index 3dfe7ba..bc71a22 100644
--- a/src/content/ContentScript.ts
+++ b/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);
+ }
}
\ No newline at end of file
diff --git a/src/content/HighlightEngine.ts b/src/content/HighlightEngine.ts
index 9955da8..4a7a3f4 100644
--- a/src/content/HighlightEngine.ts
+++ b/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
();
+ private highlightsByWord = new Map();
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();
+ 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();
+
+ 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();
}
diff --git a/src/popup/PopupController.ts b/src/popup/PopupController.ts
index 370f665..b64a801 100644
--- a/src/popup/PopupController.ts
+++ b/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();
async initialize(): Promise {
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 {
+ 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 {
+ this.highlightIndices.set(word, index);
+ await MessageService.sendToActiveTab({
+ type: 'SCROLL_TO_HIGHLIGHT',
+ word,
+ index
+ });
+ this.renderPageHighlights();
+ }
+
+ private async navigateHighlight(word: string, direction: number): Promise {
+ 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 = `${chrome.i18n.getMessage('no_highlights_on_page') || 'No highlights on this page'}
`;
+ return;
+ }
+
+ container.innerHTML = this.pageHighlights.map(highlight => {
+ const currentIndex = this.highlightIndices.get(highlight.word) || 0;
+ return `
+
+
+
+ ${DOMUtils.escapeHtml(highlight.word)}
+
+ ${highlight.count > 1 ? `${currentIndex + 1}/${highlight.count}` : ''}
+
+
${highlight.count}
+ ${highlight.count > 1 ? `
+
+
+
+
+ ` : ''}
+