chore(release): 1.9.3

## [1.9.3](https://github.com/obsqrbtz/goose-highlighter/compare/v1.9.2...v1.9.3) (2025-11-18) ### Bug Fixes * use CSS Custom Highlight API to avoid dom modifications (fixes [#1](https://github.com/obsqrbtz/goose-highlighter/issues/1)) ([3f2bb60](3f2bb6080b))
fix: use CSS Custom Highlight API to avoid dom modifications (fixes #1 )
2026-04-09 04:29:09 +03:00 · 2025-11-19 01:26:16 +03:00 · 2025-11-19 01:25:55 +03:00 · 2025-11-18 20:58:59 +03:00 · 2025-11-14 13:40:56 +03:00 · 2025-11-14 13:40:43 +03:00
9 changed files with 1027 additions and 1463 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,24 @@
+## [1.9.3](https://github.com/obsqrbtz/goose-highlighter/compare/v1.9.2...v1.9.3) (2025-11-18)
+
+
+### Bug Fixes
+
+* use CSS Custom Highlight API to avoid dom modifications (fixes [#1](https://github.com/obsqrbtz/goose-highlighter/issues/1)) ([3f2bb60](https://github.com/obsqrbtz/goose-highlighter/commit/3f2bb6080ba3a9ac0599ad6594f0d877c12bb62f))
+
+## [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)


--- a/img/pumpkin.webm
+++ b/img/pumpkin.webm
--- a/manifest.json
+++ b/manifest.json
@@ -2,7 +2,7 @@
  "manifest_version": 3,
  "name": "__MSG_extension_name__",
  "description": "__MSG_extension_description__",
-  "version": "1.9.0",
+  "version": "1.9.3",
  "default_locale": "en",
  "permissions": [
    "scripting",
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -8,7 +8,7 @@
    "@types/chrome": "^0.0.270",
    "eslint": "^9.30.0",
    "globals": "^16.2.0",
-    "semantic-release": "^24.2.5",
+    "semantic-release": "^24.2.9",
    "typescript": "^5.6.0"
  },
  "scripts": {
--- a/popup/popup.css
+++ b/popup/popup.css
@@ -6,8 +6,8 @@
  --button-bg: #222;
  --button-hover: #444;
  --button-text: white;
-  --accent: #ff6b35;
-  --accent-hover: #ff8c42;
+  --accent: #ec9c23;
+  --accent-hover: #ffb84d;
  --accent-text: #000;
  --highlight-tag: #292929;
  --highlight-tag-border: #444;
@@ -17,7 +17,7 @@
  --border-radius: 12px;
  --section-bg: #111;
  --switch-bg: #444;
-  --checkbox-accent: #ff6b35;
+  --checkbox-accent: #ec9c23;
  --checkbox-border: #666;
  --scrollbar-bg: var(--section-bg);
  --scrollbar-thumb: var(--accent);
@@ -28,10 +28,6 @@
 body {
  font-family: 'Inter', sans-serif;
  background: var(--bg-color);
-  background-image:
-    radial-gradient(circle at 20% 80%, rgba(255, 107, 53, 0.03) 0%, transparent 50%),
-    radial-gradient(circle at 80% 20%, rgba(255, 140, 0, 0.02) 0%, transparent 50%),
-    radial-gradient(circle at 40% 40%, rgba(139, 69, 19, 0.01) 0%, transparent 50%);
  color: var(--text-color);
  margin: 0;
  padding: 0;
@@ -49,7 +45,7 @@ body.light {
  --button-bg: #e0e0e0;
  --button-hover: #d0d0d0;
  --button-text: #222;
-  --accent: #ff6b35;
+  --accent: #ec9c23;
  --accent-text: #000;
  --highlight-tag: #f0f0f0;
  --highlight-tag-border: #d0d0d0;
@@ -58,7 +54,7 @@ body.light {
  --shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  --section-bg: #fff;
  --switch-bg: #ccc;
-  --checkbox-accent: #ff6b35;
+  --checkbox-accent: #ec9c23;
  --checkbox-border: #999;
 }

@@ -419,14 +415,11 @@ input[type="file"] {
  align-items: center;
  padding: 12px 16px;
  background: var(--bg-color);
-  background-image: linear-gradient(135deg, rgba(255, 107, 53, 0.05) 0%, transparent 50%);
  border-radius: 12px;
-  border: 1px solid rgba(255, 107, 53, 0.1);
  color: var(--fg-color);
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 16px;
-  box-shadow: 0 2px 8px rgba(255, 107, 53, 0.1);
 }

 .icon-toggles {
@@ -492,55 +485,6 @@ input[type="file"] {
  font-weight: 900;
 }

-/* Halloween */
-.halloween-icon {
-  color: #ff6b35;
-  text-shadow: 0 0 8px rgba(255, 107, 53, 0.3);
-  animation: halloween-glow 3s ease-in-out infinite alternate;
-}
-
-@keyframes halloween-glow {
-  0% {
-    text-shadow: 0 0 8px rgba(255, 107, 53, 0.3);
-  }
-
-  100% {
-    text-shadow: 0 0 12px rgba(255, 107, 53, 0.6), 0 0 16px rgba(255, 140, 0, 0.2);
-  }
-}
-
-.section-header:hover .halloween-icon {
-  color: #ff8c42;
-  text-shadow: 0 0 15px rgba(255, 140, 66, 0.8);
-}
-
-.flying-pumpkin-video {
-  display: inline-block;
-  width: 24px;
-  height: 24px;
-  margin-left: 4px;
-  vertical-align: middle;
-  filter: drop-shadow(0 0 8px rgba(255, 107, 53, 0.4));
-  transition: filter 0.3s ease;
-  background: transparent;
-}
-
-.header-pumpkin {
-  width: 32px;
-  height: 32px;
-  margin-right: 8px;
-  margin-left: 0;
-  filter: drop-shadow(0 0 10px rgba(255, 107, 53, 0.5));
-}
-
-.title:hover .flying-pumpkin-video {
-  filter: drop-shadow(0 0 12px rgba(255, 107, 53, 0.7));
-}
-
-.title:hover .header-pumpkin {
-  filter: drop-shadow(0 0 16px rgba(255, 107, 53, 0.8));
-}
-
 label:has(input.switch) {
  display: flex;
  align-items: center;
@@ -585,9 +529,7 @@ body::-webkit-scrollbar-corner {
  --scrollbar-thumb-border: var(--section-bg);
 }

-html,
-body,
-#wordList {
+html, body, #wordList {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-bg);
 }
--- a/popup/popup.html
+++ b/popup/popup.html
@@ -8,7 +8,6 @@
  <link rel="stylesheet" href="popup.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" />
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
-
 </head>

 <body class="dark">
@@ -16,9 +15,7 @@

    <div class="header-bar">
      <span class="title">
-        <video class="flying-pumpkin-video header-pumpkin" autoplay loop muted>
-          <source src="../img/pumpkin.webm" type="video/webm">
-        </video> Goose Highlighter
+        <i class="fa-solid fa-highlighter"></i> Goose Highlighter
      </span>
      <div class="icon-toggles">
        <label class="icon-toggle" title="Toggle highlighting">
@@ -34,31 +31,27 @@

    <div class="section" data-section="exceptions">
      <div class="section-header">
-        <h2><i class="fa-solid fa-ban halloween-icon"></i> <span data-i18n="site_exceptions">Site Exceptions</span></h2>
+        <h2><i class="fa-solid fa-ban"></i> <span data-i18n="site_exceptions">Site Exceptions</span></h2>
        <button class="collapse-toggle" data-target="exceptions">
          <i class="fa-solid fa-chevron-up"></i>
        </button>
      </div>
      <div class="section-content" id="exceptions-content">
        <div class="button-row">
-          <button id="toggleExceptionBtn"><i class="fa-solid fa-ban"></i> <span id="exceptionBtnText"
-              data-i18n="add_exception">Add to Exceptions</span></button>
-          <button id="manageExceptionsBtn"><i class="fa-solid fa-list"></i> <span
-              data-i18n="manage_exceptions">Manage</span></button>
+          <button id="toggleExceptionBtn"><i class="fa-solid fa-ban"></i> <span id="exceptionBtnText" data-i18n="add_exception">Add to Exceptions</span></button>
+          <button id="manageExceptionsBtn"><i class="fa-solid fa-list"></i> <span data-i18n="manage_exceptions">Manage</span></button>
        </div>
        <div id="exceptionsPanel" class="exceptions-panel" style="display: none;">
          <h3 data-i18n="exceptions_list">Exception Sites:</h3>
          <div id="exceptionsList" class="exceptions-list"></div>
-          <button id="clearExceptionsBtn" class="danger"><i class="fa-solid fa-trash"></i> <span
-              data-i18n="clear_all">Clear All</span></button>
+          <button id="clearExceptionsBtn" class="danger"><i class="fa-solid fa-trash"></i> <span data-i18n="clear_all">Clear All</span></button>
        </div>
      </div>
    </div>

    <div class="section" data-section="lists">
      <div class="section-header">
-        <h2><i class="fa-solid fa-list halloween-icon"></i> <span data-i18n="highlight_lists">Highlight Lists</span>
-        </h2>
+        <h2><i class="fa-solid fa-list"></i> <span data-i18n="highlight_lists">Highlight Lists</span></h2>
        <button class="collapse-toggle" data-target="lists">
          <i class="fa-solid fa-chevron-up"></i>
        </button>
@@ -76,7 +69,7 @@

    <div class="section" data-section="settings">
      <div class="section-header">
-        <h2><i class="fa-solid fa-gear halloween-icon"></i> <span data-i18n="list_settings">List Settings</span></h2>
+        <h2><i class="fa-solid fa-gear"></i> <span data-i18n="list_settings">List Settings</span></h2>
        <button class="collapse-toggle" data-target="settings">
          <i class="fa-solid fa-chevron-up"></i>
        </button>
@@ -97,14 +90,13 @@
          <span data-i18n="enable_highlight">Enable Highlighting</span>
          <input type="checkbox" class="switch" id="listActive" />
        </label>
-        <button id="applyListSettingsBtn"><i class="fa-solid fa-check"></i> <span
-            data-i18n="apply">Apply</span></button>
+        <button id="applyListSettingsBtn"><i class="fa-solid fa-check"></i> <span data-i18n="apply">Apply</span></button>
      </div>
    </div>

    <div class="section" data-section="addwords">
      <div class="section-header">
-        <h2><i class="fa-solid fa-pen halloween-icon"></i> <span data-i18n="add_words">Add Words</span></h2>
+        <h2><i class="fa-solid fa-pen"></i> <span data-i18n="add_words">Add Words</span></h2>
        <button class="collapse-toggle" data-target="addwords">
          <i class="fa-solid fa-chevron-up"></i>
        </button>
@@ -117,8 +109,7 @@

    <div class="section" data-section="wordlist">
      <div class="section-header">
-        <h2><i class="fa-solid fa-tags halloween-icon"></i> <span data-i18n="word_list">Word List</span>(<span
-            id="wordCount">0</span>)
+        <h2><i class="fa-solid fa-tags"></i> <span data-i18n="word_list">Word List</span>(<span id="wordCount">0</span>)
        </h2>
        <button class="collapse-toggle" data-target="wordlist">
          <i class="fa-solid fa-chevron-up"></i>
@@ -139,7 +130,7 @@

    <div class="section" data-section="options">
      <div class="section-header">
-        <h2><i class="fa-solid fa-sliders halloween-icon"></i> <span data-i18n="options">Options</span></h2>
+        <h2><i class="fa-solid fa-sliders"></i> <span data-i18n="options">Options</span></h2>
        <button class="collapse-toggle" data-target="options">
          <i class="fa-solid fa-chevron-up"></i>
        </button>
@@ -152,8 +143,7 @@
        <div class="button-row">
          <button id="importBtn"><i class="fa-solid fa-upload"></i> <span data-i18n="import_list">Import</span></button>
          <input type="file" id="importInput" accept="application/json" hidden />
-          <button id="exportBtn"><i class="fa-solid fa-download"></i> <span
-              data-i18n="export_list">Export</span></button>
+          <button id="exportBtn"><i class="fa-solid fa-download"></i> <span data-i18n="export_list">Export</span></button>
        </div>
      </div>
    </div>
--- a/src/content/HighlightEngine.ts
+++ b/src/content/HighlightEngine.ts
@@ -1,9 +1,9 @@
-import { HighlightList, ActiveWord } from '../types.js';
+import { HighlightList, ActiveWord, CONSTANTS } from '../types.js';
 import { DOMUtils } from '../utils/DOMUtils.js';

 export class HighlightEngine {
  private styleSheet: CSSStyleSheet | null = null;
-  private wordStyleMap = new Map<string, string>();
+  private highlights = new Map<string, Highlight>();
  private observer: MutationObserver;
  private isHighlighting = false;

@@ -13,15 +13,10 @@ export class HighlightEngine {

      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 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;
+          if (node instanceof Element) return true;
          return false;
        });
      });
@@ -41,28 +36,24 @@ export class HighlightEngine {
    }
  }

-  private updateWordStyles(activeWords: ActiveWord[], matchCase: boolean): void {
+  private updateHighlightStyles(activeWords: ActiveWord[]): void {
    this.initializeStyleSheet();

    while (this.styleSheet!.cssRules.length > 0) {
      this.styleSheet!.deleteRule(0);
    }

-    this.wordStyleMap.clear();
-    const uniqueStyles = new Map<string, string>();
+    const uniqueStyles = new Map<string, number>();
+    let styleIndex = 0;

    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; }`;
+        uniqueStyles.set(styleKey, styleIndex);
+        const rule = `::highlight(gh-${styleIndex}) { background-color: ${word.background}; color: ${word.foreground}; }`;
        this.styleSheet!.insertRule(rule, this.styleSheet!.cssRules.length);
+        styleIndex++;
      }
-
-      const lookup = matchCase ? word.text : word.text.toLowerCase();
-      this.wordStyleMap.set(lookup, uniqueStyles.get(styleKey)!);
    }
  }

@@ -78,9 +69,6 @@ export class HighlightEngine {
      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;
          }
@@ -119,7 +107,6 @@ export class HighlightEngine {
    this.isHighlighting = true;

    this.observer.disconnect();
-
    this.clearHighlightsInternal();

    const activeWords = this.extractActiveWords(lists);
@@ -129,16 +116,23 @@ export class HighlightEngine {
      return;
    }

-    this.updateWordStyles(activeWords, matchCase);
+    this.updateHighlightStyles(activeWords);
+
+    const styleMap = new Map<string, number>();
+    const uniqueStyles = new Map<string, number>();
+    let styleIndex = 0;

-    const wordMap = new Map<string, ActiveWord>();
    for (const word of activeWords) {
-      const key = matchCase ? word.text : word.text.toLowerCase();
-      wordMap.set(key, word);
+      const styleKey = `${word.background}-${word.foreground}`;
+      if (!uniqueStyles.has(styleKey)) {
+        uniqueStyles.set(styleKey, styleIndex++);
+      }
+      const lookup = matchCase ? word.text : word.text.toLowerCase();
+      styleMap.set(lookup, uniqueStyles.get(styleKey)!);
    }

    const flags = matchCase ? 'gu' : 'giu';
-    let wordsPattern = Array.from(wordMap.keys()).map(DOMUtils.escapeRegex).join('|');
+    let wordsPattern = Array.from(styleMap.keys()).map(DOMUtils.escapeRegex).join('|');

    if (matchWhole) {
      wordsPattern = `(?:(?<!\\p{L})|^)(${wordsPattern})(?:(?!\\p{L})|$)`;
@@ -148,17 +142,37 @@ export class HighlightEngine {
      const pattern = new RegExp(`(${wordsPattern})`, flags);
      const textNodes = this.getTextNodes();

+      const rangesByStyle = new Map<number, Range[]>();
+
      for (const node of textNodes) {
-        if (!node.nodeValue || !pattern.test(node.nodeValue)) continue;
+        if (!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 text = node.nodeValue;
+        pattern.lastIndex = 0;
+        let match;

-        node.parentNode?.replaceChild(span, node);
+        while ((match = pattern.exec(text)) !== null) {
+          const lookup = matchCase ? match[0] : match[0].toLowerCase();
+          const styleIdx = styleMap.get(lookup);
+
+          if (styleIdx !== undefined) {
+            const range = new Range();
+            range.setStart(node, match.index);
+            range.setEnd(node, match.index + match[0].length);
+
+            if (!rangesByStyle.has(styleIdx)) {
+              rangesByStyle.set(styleIdx, []);
+            }
+            rangesByStyle.get(styleIdx)!.push(range);
+          }
+        }
+      }
+
+      for (const [styleIdx, ranges] of rangesByStyle) {
+        const highlight = new Highlight(...ranges);
+        const highlightName = `gh-${styleIdx}`;
+        this.highlights.set(highlightName, highlight);
+        CSS.highlights.set(highlightName, highlight);
      }
    } catch (e) {
      console.error('Regex error:', e);
@@ -169,14 +183,10 @@ export class HighlightEngine {
  }

  private clearHighlightsInternal(): 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();
+    for (const name of this.highlights.keys()) {
+      CSS.highlights.delete(name);
    }
-    });
+    this.highlights.clear();

    if (this.styleSheet && this.styleSheet.cssRules.length > 0) {
      while (this.styleSheet.cssRules.length > 0) {
--- a/src/types/css-highlights.d.ts
+++ b/src/types/css-highlights.d.ts
@@ -0,0 +1,27 @@
+// CSS Highlights API type declarations
+interface Highlight {
+  new(...ranges: Range[]): Highlight;
+  add(range: Range): void;
+  clear(): void;
+  delete(range: Range): boolean;
+  has(range: Range): boolean;
+  readonly size: number;
+}
+
+interface HighlightRegistry {
+  set(name: string, highlight: Highlight): void;
+  get(name: string): Highlight | undefined;
+  delete(name: string): boolean;
+  clear(): void;
+  has(name: string): boolean;
+  readonly size: number;
+}
+
+interface CSS {
+  highlights: HighlightRegistry;
+}
+
+declare var Highlight: {
+  prototype: Highlight;
+  new(...ranges: Range[]): Highlight;
+};
Author	SHA1	Message	Date
semantic-release-bot	d275a6fd0d	chore(release): 1.9.3 ## [1.9.3](https://github.com/obsqrbtz/goose-highlighter/compare/v1.9.2...v1.9.3) (2025-11-18) ### Bug Fixes * use CSS Custom Highlight API to avoid dom modifications (fixes [#1](https://github.com/obsqrbtz/goose-highlighter/issues/1)) ([`3f2bb60`](`3f2bb6080b`))	2025-11-19 01:26:16 +03:00
Daniel Dada	3f2bb6080b	fix: use CSS Custom Highlight API to avoid dom modifications (fixes #1 )	2025-11-19 01:25:55 +03:00
Daniel Dada	3da28a2ad7	chore: update deps	2025-11-18 20:58:59 +03:00
semantic-release-bot	4f575d9534	chore(release): 1.9.2 ## [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`](`affddd3dbc`))	2025-11-14 13:40:56 +03:00
Daniel Dada	affddd3dbc	fix(highlight): prevent creating extra <span>'s (#1 )	2025-11-14 13:40:43 +03:00
semantic-release-bot	c8334f9e68	chore(release): 1.9.1 ## [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`](`172aa7583b`))	2025-11-05 14:59:42 +03:00
Daniel Dada	172aa7583b	fix: remove halowen styling	2025-11-05 14:59:27 +03:00