mirror of
https://github.com/obsqrbtz/goose-highlighter.git
synced 2026-04-09 04:29:09 +03:00
chore: refactor
This commit is contained in:
106
src/content/ContentScript.ts
Normal file
106
src/content/ContentScript.ts
Normal file
@@ -0,0 +1,106 @@
|
||||
import { HighlightList, MessageData } from '../types.js';
|
||||
import { StorageService } from '../services/StorageService.js';
|
||||
import { MessageService } from '../services/MessageService.js';
|
||||
import { HighlightEngine } from './HighlightEngine.js';
|
||||
import { DOMUtils } from '../utils/DOMUtils.js';
|
||||
|
||||
export class ContentScript {
|
||||
private lists: HighlightList[] = [];
|
||||
private isGlobalHighlightEnabled = true;
|
||||
private exceptionsList: string[] = [];
|
||||
private isCurrentSiteException = false;
|
||||
private matchCase = false;
|
||||
private matchWhole = false;
|
||||
private highlightEngine: HighlightEngine;
|
||||
|
||||
constructor() {
|
||||
this.highlightEngine = new HighlightEngine(() => this.processHighlights());
|
||||
this.initialize();
|
||||
}
|
||||
|
||||
private async initialize(): Promise<void> {
|
||||
await this.loadSettings();
|
||||
this.setupMessageListener();
|
||||
this.setupScrollHandler();
|
||||
this.processHighlights();
|
||||
}
|
||||
|
||||
private async loadSettings(): Promise<void> {
|
||||
const data = await StorageService.get([
|
||||
'lists',
|
||||
'globalHighlightEnabled',
|
||||
'matchCaseEnabled',
|
||||
'matchWholeEnabled',
|
||||
'exceptionsList'
|
||||
]);
|
||||
|
||||
this.lists = data.lists || [];
|
||||
this.isGlobalHighlightEnabled = data.globalHighlightEnabled ?? true;
|
||||
this.matchCase = data.matchCaseEnabled ?? false;
|
||||
this.matchWhole = data.matchWholeEnabled ?? false;
|
||||
this.exceptionsList = data.exceptionsList || [];
|
||||
this.isCurrentSiteException = this.checkCurrentSiteException();
|
||||
}
|
||||
|
||||
private checkCurrentSiteException(): boolean {
|
||||
const currentHostname = window.location.hostname;
|
||||
return this.exceptionsList.includes(currentHostname);
|
||||
}
|
||||
|
||||
private setupMessageListener(): void {
|
||||
MessageService.onMessage((message: MessageData) => {
|
||||
switch (message.type) {
|
||||
case 'WORD_LIST_UPDATED':
|
||||
this.handleWordListUpdate();
|
||||
break;
|
||||
case 'GLOBAL_TOGGLE_UPDATED':
|
||||
this.handleGlobalToggleUpdate(message.enabled!);
|
||||
break;
|
||||
case 'MATCH_OPTIONS_UPDATED':
|
||||
this.handleMatchOptionsUpdate(message.matchCase!, message.matchWhole!);
|
||||
break;
|
||||
case 'EXCEPTIONS_LIST_UPDATED':
|
||||
this.handleExceptionsUpdate();
|
||||
break;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
private setupScrollHandler(): void {
|
||||
const debouncedProcess = DOMUtils.debounce(() => this.processHighlights(), 300);
|
||||
window.addEventListener('scroll', debouncedProcess);
|
||||
}
|
||||
|
||||
private async handleWordListUpdate(): Promise<void> {
|
||||
const data = await StorageService.get(['lists']);
|
||||
this.lists = data.lists || [];
|
||||
this.processHighlights();
|
||||
}
|
||||
|
||||
private handleGlobalToggleUpdate(enabled: boolean): void {
|
||||
this.isGlobalHighlightEnabled = enabled;
|
||||
this.processHighlights();
|
||||
}
|
||||
|
||||
private handleMatchOptionsUpdate(matchCase: boolean, matchWhole: boolean): void {
|
||||
this.matchCase = matchCase;
|
||||
this.matchWhole = matchWhole;
|
||||
this.processHighlights();
|
||||
}
|
||||
|
||||
private async handleExceptionsUpdate(): Promise<void> {
|
||||
const data = await StorageService.get(['exceptionsList']);
|
||||
this.exceptionsList = data.exceptionsList || [];
|
||||
this.isCurrentSiteException = this.checkCurrentSiteException();
|
||||
this.processHighlights();
|
||||
}
|
||||
|
||||
private processHighlights(): void {
|
||||
if (!this.isGlobalHighlightEnabled || this.isCurrentSiteException) {
|
||||
this.highlightEngine.clearHighlights();
|
||||
return;
|
||||
}
|
||||
|
||||
this.highlightEngine.highlight(this.lists, this.matchCase, this.matchWhole);
|
||||
}
|
||||
}
|
||||
161
src/content/HighlightEngine.ts
Normal file
161
src/content/HighlightEngine.ts
Normal file
@@ -0,0 +1,161 @@
|
||||
import { HighlightList, ActiveWord } from '../types.js';
|
||||
import { DOMUtils } from '../utils/DOMUtils.js';
|
||||
|
||||
export class HighlightEngine {
|
||||
private styleSheet: CSSStyleSheet | null = null;
|
||||
private wordStyleMap = new Map<string, string>();
|
||||
private observer: MutationObserver;
|
||||
|
||||
constructor(private onUpdate: () => void) {
|
||||
this.observer = new MutationObserver(DOMUtils.debounce(onUpdate, 300));
|
||||
}
|
||||
|
||||
private initializeStyleSheet(): void {
|
||||
if (!this.styleSheet) {
|
||||
const style = document.createElement('style');
|
||||
style.id = 'goose-highlighter-styles';
|
||||
document.head.appendChild(style);
|
||||
this.styleSheet = style.sheet!;
|
||||
}
|
||||
}
|
||||
|
||||
private updateWordStyles(activeWords: ActiveWord[]): void {
|
||||
this.initializeStyleSheet();
|
||||
|
||||
while (this.styleSheet!.cssRules.length > 0) {
|
||||
this.styleSheet!.deleteRule(0);
|
||||
}
|
||||
|
||||
this.wordStyleMap.clear();
|
||||
const uniqueStyles = new Map<string, string>();
|
||||
|
||||
for (const word of activeWords) {
|
||||
const styleKey = `${word.background}-${word.foreground}`;
|
||||
if (!uniqueStyles.has(styleKey)) {
|
||||
const className = `highlighted-word-${uniqueStyles.size}`;
|
||||
uniqueStyles.set(styleKey, className);
|
||||
|
||||
const rule = `.${className} { background: ${word.background}; color: ${word.foreground}; padding: 0 2px; }`;
|
||||
this.styleSheet!.insertRule(rule, this.styleSheet!.cssRules.length);
|
||||
}
|
||||
|
||||
const lookup = word.text;
|
||||
this.wordStyleMap.set(lookup, uniqueStyles.get(styleKey)!);
|
||||
}
|
||||
}
|
||||
|
||||
clearHighlights(): void {
|
||||
const highlightedElements = document.querySelectorAll('[data-gh]');
|
||||
highlightedElements.forEach(element => {
|
||||
const parent = element.parentNode;
|
||||
if (parent) {
|
||||
parent.replaceChild(document.createTextNode(element.textContent || ''), element);
|
||||
parent.normalize();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
private getTextNodes(): Text[] {
|
||||
const textNodes: Text[] = [];
|
||||
const walker = document.createTreeWalker(
|
||||
document.body,
|
||||
NodeFilter.SHOW_TEXT,
|
||||
{
|
||||
acceptNode: (node: Text) => {
|
||||
if (node.parentNode && (node.parentNode as Element).hasAttribute('data-gh')) {
|
||||
return NodeFilter.FILTER_REJECT;
|
||||
}
|
||||
if (node.parentNode && ['SCRIPT', 'STYLE', 'NOSCRIPT', 'IFRAME'].includes(node.parentNode.nodeName)) {
|
||||
return NodeFilter.FILTER_REJECT;
|
||||
}
|
||||
if (!node.nodeValue?.trim()) {
|
||||
return NodeFilter.FILTER_SKIP;
|
||||
}
|
||||
return NodeFilter.FILTER_ACCEPT;
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
while (walker.nextNode()) {
|
||||
textNodes.push(walker.currentNode as Text);
|
||||
}
|
||||
return textNodes;
|
||||
}
|
||||
|
||||
private extractActiveWords(lists: HighlightList[]): ActiveWord[] {
|
||||
const activeWords: ActiveWord[] = [];
|
||||
for (const list of 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
|
||||
});
|
||||
}
|
||||
}
|
||||
return activeWords;
|
||||
}
|
||||
|
||||
highlight(lists: HighlightList[], matchCase: boolean, matchWhole: boolean): void {
|
||||
this.observer.disconnect();
|
||||
this.clearHighlights();
|
||||
|
||||
const activeWords = this.extractActiveWords(lists);
|
||||
if (activeWords.length === 0) {
|
||||
this.startObserving();
|
||||
return;
|
||||
}
|
||||
|
||||
this.updateWordStyles(activeWords);
|
||||
|
||||
const wordMap = new Map<string, ActiveWord>();
|
||||
for (const word of activeWords) {
|
||||
const key = matchCase ? word.text : word.text.toLowerCase();
|
||||
wordMap.set(key, word);
|
||||
}
|
||||
|
||||
const flags = matchCase ? 'gu' : 'giu';
|
||||
let wordsPattern = Array.from(wordMap.keys()).map(DOMUtils.escapeRegex).join('|');
|
||||
|
||||
if (matchWhole) {
|
||||
wordsPattern = `(?:(?<!\\p{L})|^)(${wordsPattern})(?:(?!\\p{L})|$)`;
|
||||
}
|
||||
|
||||
try {
|
||||
const pattern = new RegExp(`(${wordsPattern})`, flags);
|
||||
const textNodes = this.getTextNodes();
|
||||
|
||||
for (const node of textNodes) {
|
||||
if (!node.nodeValue || !pattern.test(node.nodeValue)) continue;
|
||||
|
||||
const span = document.createElement('span');
|
||||
span.innerHTML = node.nodeValue.replace(pattern, (match) => {
|
||||
const lookup = matchCase ? match : match.toLowerCase();
|
||||
const className = this.wordStyleMap.get(lookup) || 'highlighted-word-0';
|
||||
return `<span data-gh class="${className}">${match}</span>`;
|
||||
});
|
||||
|
||||
node.parentNode?.replaceChild(span, node);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('Regex error:', e);
|
||||
}
|
||||
|
||||
this.startObserving();
|
||||
}
|
||||
|
||||
private startObserving(): void {
|
||||
this.observer.observe(document.body, {
|
||||
childList: true,
|
||||
subtree: true,
|
||||
characterData: true
|
||||
});
|
||||
}
|
||||
|
||||
destroy(): void {
|
||||
this.observer.disconnect();
|
||||
this.clearHighlights();
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user