mirror of
https://github.com/obsqrbtz/goose-highlighter.git
synced 2026-04-09 04:29:09 +03:00
Compare commits
12 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
4f575d9534 | ||
| affddd3dbc | |||
|
|
c8334f9e68 | ||
| 172aa7583b | |||
|
|
6d7d9ac151 | ||
| 5ef380e544 | |||
|
|
c634f6bc8b | ||
| 67577c89cf | |||
|
|
326e585021 | ||
| 8be53f3240 | |||
| f07617fa55 | |||
| e79874922a |
35
CHANGELOG.md
35
CHANGELOG.md
@@ -1,3 +1,38 @@
|
||||
## [1.9.2](https://github.com/obsqrbtz/goose-highlighter/compare/v1.9.1...v1.9.2) (2025-11-14)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **highlight:** prevent creating extra <span>'s ([#1](https://github.com/obsqrbtz/goose-highlighter/issues/1)) ([affddd3](https://github.com/obsqrbtz/goose-highlighter/commit/affddd3dbc7de30100ca134ec65f4dc090275ca5))
|
||||
|
||||
## [1.9.1](https://github.com/obsqrbtz/goose-highlighter/compare/v1.9.0...v1.9.1) (2025-11-05)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* remove halowen styling ([172aa75](https://github.com/obsqrbtz/goose-highlighter/commit/172aa7583b325761af43c780db4ac61dc4bda99b))
|
||||
|
||||
# [1.9.0](https://github.com/obsqrbtz/goose-highlighter/compare/v1.8.5...v1.9.0) (2025-10-31)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* haloween styling ([5ef380e](https://github.com/obsqrbtz/goose-highlighter/commit/5ef380e54447f45f7360dd4b7b84456aae55bfee))
|
||||
|
||||
## [1.8.5](https://github.com/obsqrbtz/goose-highlighter/compare/v1.8.4...v1.8.5) (2025-10-29)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* highlight colors when multiple list have different configurations ([67577c8](https://github.com/obsqrbtz/goose-highlighter/commit/67577c89cffca1ab6d40a8913e51b7c3c6f91c85))
|
||||
|
||||
## [1.8.4](https://github.com/obsqrbtz/goose-highlighter/compare/v1.8.3...v1.8.4) (2025-10-28)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* do not re-highlight when already processing highlights ([8be53f3](https://github.com/obsqrbtz/goose-highlighter/commit/8be53f32402c2f0f228ca003ef3805c5ff0b6e88))
|
||||
|
||||
## [1.8.3](https://github.com/obsqrbtz/goose-highlighter/compare/v1.8.2...v1.8.3) (2025-10-08)
|
||||
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
# Goose Highlighter
|
||||
# <img src="img/logo.png" alt="Goose Highlighter Logo" width="32" style="vertical-align: middle;"> Goose Highlighter
|
||||
|
||||
Goose Highlighter is a browser extension that allows you to highlight words on any webpage.
|
||||
|
||||
|
||||
BIN
img/logo.png
Normal file
BIN
img/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
@@ -2,7 +2,7 @@
|
||||
"manifest_version": 3,
|
||||
"name": "__MSG_extension_name__",
|
||||
"description": "__MSG_extension_description__",
|
||||
"version": "1.8.3",
|
||||
"version": "1.9.2",
|
||||
"default_locale": "en",
|
||||
"permissions": [
|
||||
"scripting",
|
||||
|
||||
@@ -68,7 +68,7 @@ export class ContentScript {
|
||||
}
|
||||
|
||||
private setupScrollHandler(): void {
|
||||
const debouncedProcess = DOMUtils.debounce(() => this.processHighlights(), 300);
|
||||
const debouncedProcess = DOMUtils.debounce(() => this.processHighlights(), CONSTANTS.DEBOUNCE_DELAY);
|
||||
window.addEventListener('scroll', debouncedProcess);
|
||||
}
|
||||
|
||||
|
||||
@@ -5,25 +5,31 @@ export class HighlightEngine {
|
||||
private styleSheet: CSSStyleSheet | null = null;
|
||||
private wordStyleMap = new Map<string, string>();
|
||||
private observer: MutationObserver;
|
||||
private isHighlighting = false;
|
||||
|
||||
constructor(private onUpdate: () => void) {
|
||||
this.observer = new MutationObserver(DOMUtils.debounce((mutations: MutationRecord[]) => {
|
||||
const hasRelevantChanges = mutations.some((mutation: MutationRecord) => {
|
||||
if (this.isHighlighting) return;
|
||||
|
||||
const hasContentChanges = mutations.some((mutation: MutationRecord) => {
|
||||
if (mutation.type !== 'childList') return false;
|
||||
|
||||
if (mutation.target instanceof Element && mutation.target.hasAttribute('data-gh')) {
|
||||
return false;
|
||||
}
|
||||
const addedNodes = Array.from(mutation.addedNodes);
|
||||
const removedNodes = Array.from(mutation.removedNodes);
|
||||
const isOurChange = [...addedNodes, ...removedNodes].some(node =>
|
||||
node instanceof Element && (node.hasAttribute('data-gh') || node.querySelector('[data-gh]'))
|
||||
);
|
||||
return !isOurChange;
|
||||
|
||||
const allNodes = [...Array.from(mutation.addedNodes), ...Array.from(mutation.removedNodes)];
|
||||
return allNodes.some(node => {
|
||||
if (node.nodeType === Node.TEXT_NODE) return true;
|
||||
if (node instanceof Element && !node.hasAttribute('data-gh')) return true;
|
||||
return false;
|
||||
});
|
||||
});
|
||||
|
||||
if (hasRelevantChanges) {
|
||||
onUpdate();
|
||||
if (hasContentChanges) {
|
||||
this.onUpdate();
|
||||
}
|
||||
}, 300));
|
||||
}, CONSTANTS.DEBOUNCE_DELAY));
|
||||
}
|
||||
|
||||
private initializeStyleSheet(): void {
|
||||
@@ -35,7 +41,7 @@ export class HighlightEngine {
|
||||
}
|
||||
}
|
||||
|
||||
private updateWordStyles(activeWords: ActiveWord[]): void {
|
||||
private updateWordStyles(activeWords: ActiveWord[], matchCase: boolean): void {
|
||||
this.initializeStyleSheet();
|
||||
|
||||
while (this.styleSheet!.cssRules.length > 0) {
|
||||
@@ -55,7 +61,7 @@ export class HighlightEngine {
|
||||
this.styleSheet!.insertRule(rule, this.styleSheet!.cssRules.length);
|
||||
}
|
||||
|
||||
const lookup = word.text;
|
||||
const lookup = matchCase ? word.text : word.text.toLowerCase();
|
||||
this.wordStyleMap.set(lookup, uniqueStyles.get(styleKey)!);
|
||||
}
|
||||
}
|
||||
@@ -109,6 +115,9 @@ export class HighlightEngine {
|
||||
}
|
||||
|
||||
highlight(lists: HighlightList[], matchCase: boolean, matchWhole: boolean): void {
|
||||
if (this.isHighlighting) return;
|
||||
this.isHighlighting = true;
|
||||
|
||||
this.observer.disconnect();
|
||||
|
||||
this.clearHighlightsInternal();
|
||||
@@ -116,10 +125,11 @@ export class HighlightEngine {
|
||||
const activeWords = this.extractActiveWords(lists);
|
||||
if (activeWords.length === 0) {
|
||||
this.startObserving();
|
||||
this.isHighlighting = false;
|
||||
return;
|
||||
}
|
||||
|
||||
this.updateWordStyles(activeWords);
|
||||
this.updateWordStyles(activeWords, matchCase);
|
||||
|
||||
const wordMap = new Map<string, ActiveWord>();
|
||||
for (const word of activeWords) {
|
||||
@@ -141,20 +151,41 @@ export class HighlightEngine {
|
||||
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>`;
|
||||
});
|
||||
const fragment = document.createDocumentFragment();
|
||||
const text = node.nodeValue;
|
||||
let lastIndex = 0;
|
||||
|
||||
node.parentNode?.replaceChild(span, node);
|
||||
pattern.lastIndex = 0;
|
||||
let match;
|
||||
|
||||
while ((match = pattern.exec(text)) !== null) {
|
||||
if (match.index > lastIndex) {
|
||||
fragment.appendChild(document.createTextNode(text.substring(lastIndex, match.index)));
|
||||
}
|
||||
|
||||
const lookup = matchCase ? match[0] : match[0].toLowerCase();
|
||||
const className = this.wordStyleMap.get(lookup) || 'highlighted-word-0';
|
||||
const highlightSpan = document.createElement('span');
|
||||
highlightSpan.setAttribute('data-gh', '');
|
||||
highlightSpan.className = className;
|
||||
highlightSpan.textContent = match[0];
|
||||
fragment.appendChild(highlightSpan);
|
||||
|
||||
lastIndex = pattern.lastIndex;
|
||||
}
|
||||
|
||||
if (lastIndex < text.length) {
|
||||
fragment.appendChild(document.createTextNode(text.substring(lastIndex)));
|
||||
}
|
||||
|
||||
node.parentNode?.replaceChild(fragment, node);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('Regex error:', e);
|
||||
}
|
||||
|
||||
this.startObserving();
|
||||
this.isHighlighting = false;
|
||||
}
|
||||
|
||||
private clearHighlightsInternal(): void {
|
||||
@@ -182,8 +213,6 @@ export class HighlightEngine {
|
||||
this.observer.observe(document.body, {
|
||||
childList: true,
|
||||
subtree: true,
|
||||
characterData: true,
|
||||
// Don't observe attribute changes to avoid triggering on our own style changes
|
||||
attributes: false
|
||||
});
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user