chore(release): 1.7.2

## [1.7.2](https://github.com/obsqrbtz/goose-highlighter/compare/v1.7.1...v1.7.2) (2025-10-06)

### Bug Fixes

* do not create <mark> elements, just wrap found words in <span> and add .css styling ([6ba0d2e](6ba0d2eb7c))

.releaserc.json

@@ -19,7 +19,7 @@
                     "manifest.json",
                     "CHANGELOG.md"
                 ],
-                "message": "chore(release): ${nextRelease.version} [skip ci]\n\n${nextRelease.notes}"
+                "message": "chore(release): ${nextRelease.version}\n\n${nextRelease.notes}"
             }
         ]
     ]

CHANGELOG.md

@@ -1,3 +1,17 @@
+## [1.7.2](https://github.com/obsqrbtz/goose-highlighter/compare/v1.7.1...v1.7.2) (2025-10-06)
+
+
+### Bug Fixes
+
+* do not create <mark> elements, just wrap found words in <span> and add .css styling ([6ba0d2e](https://github.com/obsqrbtz/goose-highlighter/commit/6ba0d2eb7c7346cdca3921a12d300a714439efa5))
+
+## [1.7.1](https://github.com/obsqrbtz/goose-highlighter/compare/v1.7.0...v1.7.1) (2025-06-27)
+
+
+### Bug Fixes
+
+* unicode support in regex ([ae1cf48](https://github.com/obsqrbtz/goose-highlighter/commit/ae1cf48c53cd42e65279cf2acde1a2860d8a31ee))
+
 # [1.7.0](https://github.com/obsqrbtz/goose-highlighter/compare/v1.6.0...v1.7.0) (2025-06-26)
 
 

background.js

@@ -1,10 +1,10 @@
 chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
-    if (changeInfo.status === "complete" && /^https?:/.test(tab.url)) {
+    if (changeInfo.status === 'complete' && /^https?:/.test(tab.url)) {
         chrome.scripting.executeScript({
             target: { tabId },
-            files: ["main.js"]
+            files: ['main.js']
         }).catch(err => {
-            console.warn("Injection failed:", err);
+            console.warn('Injection failed:', err);
         });
     }
 });

eslint.config.mjs

@@ -0,0 +1,31 @@
+import globals from 'globals';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import js from '@eslint/js';
+import { FlatCompat } from '@eslint/eslintrc';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const compat = new FlatCompat({
+    baseDirectory: __dirname,
+    recommendedConfig: js.configs.recommended,
+    allConfig: js.configs.all
+});
+
+export default [...compat.extends('eslint:recommended'), {
+    languageOptions: {
+        globals: {
+            ...globals.browser,
+            ...globals.webextensions,
+            chrome: 'readonly',
+        },
+
+        ecmaVersion: 12,
+        sourceType: 'module',
+    },
+
+    rules: {
+        semi: ['error', 'always'],
+        quotes: ['error', 'single'],
+    },
+}];

main.js

@@ -2,20 +2,54 @@ let currentLists = [];
 let isGlobalHighlightEnabled = true;
 let matchCase = false;
 let matchWhole = false;
+let styleSheet = null;
+let wordStyleMap = new Map();
 
 function escapeRegex(s) {
-  return s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  return s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+
+function initializeStyleSheet() {
+  if (!styleSheet) {
+    const style = document.createElement('style');
+    style.id = 'goose-highlighter-styles';
+    document.head.appendChild(style);
+    styleSheet = style.sheet;
+  }
+}
+
+function updateWordStyles(activeWords) {
+  initializeStyleSheet();
+  
+  while (styleSheet.cssRules.length > 0) {
+    styleSheet.deleteRule(0);
+  }
+  
+  wordStyleMap.clear();
+  const uniqueStyles = new Map();
+  
+  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; }`;
+      styleSheet.insertRule(rule, styleSheet.cssRules.length);
+    }
+    
+    const lookup = matchCase ? word.text : word.text.toLowerCase();
+    wordStyleMap.set(lookup, uniqueStyles.get(styleKey));
+  }
 }
 
 function clearHighlights() {
-  // Remove all <mark> elements added by the highlighter
+  const highlightedElements = document.querySelectorAll('[data-gh]');
-  const marks = document.querySelectorAll('mark[data-gh]');
+  for (const element of highlightedElements) {
-  for (const mark of marks) {
+    const parent = element.parentNode;
-    // Replace the <mark> with its text content
-    const parent = mark.parentNode;
     if (parent) {
-      parent.replaceChild(document.createTextNode(mark.textContent), mark);
+      parent.replaceChild(document.createTextNode(element.textContent), element);
-      parent.normalize(); // Merge adjacent text nodes
+      parent.normalize();
     }
   }
 }
@@ -25,7 +59,6 @@ function processNodes() {
   observer.disconnect();
   clearHighlights();
 
-  // If global highlighting is disabled, skip processing
   if (!isGlobalHighlightEnabled) {
     observer.observe(document.body, {
       childList: true,
@@ -38,7 +71,7 @@ function processNodes() {
   const textNodes = [];
   const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, {
     acceptNode: node => {
-      if (node.parentNode && node.parentNode.nodeName === 'MARK') return NodeFilter.FILTER_REJECT;
+      if (node.parentNode && node.parentNode.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;
@@ -61,27 +94,38 @@ function processNodes() {
   }
 
 if (activeWords.length > 0) {
-    const wordMap = new Map();
+  updateWordStyles(activeWords);
-    for (const word of activeWords) wordMap.set(word.text.toLowerCase(), word);
   
-    let flags = matchCase ? 'g' : 'gi';
+  const wordMap = new Map();
-    let wordsPattern = Array.from(wordMap.keys()).map(escapeRegex).join('|');
+  for (const word of activeWords) {
-    if (matchWhole) {
+    wordMap.set(matchCase ? word.text : word.text.toLowerCase(), word);
-      wordsPattern = `\\b(?:${wordsPattern})\\b`;
   }
+
+  let flags = matchCase ? 'gu' : 'giu';
+  let wordsPattern = Array.from(wordMap.keys()).map(escapeRegex).join('|');
+  
+  if (matchWhole) {
+    wordsPattern = `(?:(?<!\\p{L})|^)(${wordsPattern})(?:(?!\\p{L})|$)`;
+  }
+  
+  try {
     const pattern = new RegExp(`(${wordsPattern})`, flags);
 
     for (const node of textNodes) {
-      if (!pattern.test(node.nodeValue)) continue;
+      if (!node.nodeValue || !pattern.test(node.nodeValue)) continue;
 
       const span = document.createElement('span');
       span.innerHTML = node.nodeValue.replace(pattern, match => {
-        const word = wordMap.get(match.toLowerCase()) || { background: '#ffff00', foreground: '#000000' };
+        const lookup = matchCase ? match : match.toLowerCase();
-        return `<mark data-gh style="background:${word.background};color:${word.foreground};padding:0 2px;">${match}</mark>`;
+        const className = 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);
+  }
 }
 
   observer.observe(document.body, {
@@ -98,7 +142,6 @@ function setListsAndUpdate(lists) {
   debouncedProcessNodes();
 }
 
-// Debounce helper function
 function debounce(func, wait) {
   let timeout;
   return function () {
@@ -109,7 +152,7 @@ function debounce(func, wait) {
 }
 
 // Initial highlight on load
-chrome.storage.local.get(["lists", "globalHighlightEnabled", "matchCaseEnabled", "matchWholeEnabled"], ({ lists, globalHighlightEnabled, matchCaseEnabled, matchWholeEnabled }) => {
+chrome.storage.local.get(['lists', 'globalHighlightEnabled', 'matchCaseEnabled', 'matchWholeEnabled'], ({ lists, globalHighlightEnabled, matchCaseEnabled, matchWholeEnabled }) => {
   if (Array.isArray(lists)) setListsAndUpdate(lists);
   if (globalHighlightEnabled !== undefined) {
     isGlobalHighlightEnabled = globalHighlightEnabled;
@@ -120,15 +163,15 @@ chrome.storage.local.get(["lists", "globalHighlightEnabled", "matchCaseEnabled",
 });
 
 // Listen for updates from the popup and re-apply highlights
-chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
+chrome.runtime.onMessage.addListener((message) => {
-  if (message.type === "WORD_LIST_UPDATED") {
+  if (message.type === 'WORD_LIST_UPDATED') {
-    chrome.storage.local.get("lists", ({ lists }) => {
+    chrome.storage.local.get('lists', ({ lists }) => {
       if (Array.isArray(lists)) setListsAndUpdate(lists);
     });
-  } else if (message.type === "GLOBAL_TOGGLE_UPDATED") {
+  } else if (message.type === 'GLOBAL_TOGGLE_UPDATED') {
     isGlobalHighlightEnabled = message.enabled;
     processNodes();
-  } else if (message.type === "MATCH_OPTIONS_UPDATED") {
+  } else if (message.type === 'MATCH_OPTIONS_UPDATED') {
     matchCase = !!message.matchCase;
     matchWhole = !!message.matchWhole;
     processNodes();

manifest.json

@@ -2,7 +2,7 @@
   "manifest_version": 3,
   "name": "__MSG_extension_name__",
   "description": "__MSG_extension_description__",
-  "version": "1.7.0",
+  "version": "1.7.2",
   "default_locale": "en",
   "permissions": [
     "scripting",

package.json

@@ -1,8 +1,12 @@
 {
   "devDependencies": {
+    "@eslint/css": "^0.9.0",
+    "@eslint/js": "^9.30.0",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/exec": "^7.1.0",
     "@semantic-release/git": "^10.0.1",
+    "eslint": "^9.30.0",
+    "globals": "^16.2.0",
     "semantic-release": "^24.2.5"
   },
   "scripts": {

popup/popup.js

@@ -1,19 +1,18 @@
-const listSelect = document.getElementById("listSelect");
+const listSelect = document.getElementById('listSelect');
-const listName = document.getElementById("listName");
+const listName = document.getElementById('listName');
-const listBg = document.getElementById("listBg");
+const listBg = document.getElementById('listBg');
-const listFg = document.getElementById("listFg");
+const listFg = document.getElementById('listFg');
-const listActive = document.getElementById("listActive");
+const listActive = document.getElementById('listActive');
-const bulkPaste = document.getElementById("bulkPaste");
+const bulkPaste = document.getElementById('bulkPaste');
-const wordList = document.getElementById("wordList");
+const wordList = document.getElementById('wordList');
-const importInput = document.getElementById("importInput");
+const importInput = document.getElementById('importInput');
-const matchCase = document.getElementById("matchCase");
+const matchCase = document.getElementById('matchCase');
-const matchWhole = document.getElementById("matchWhole");
+const matchWhole = document.getElementById('matchWhole');
 let lists = [];
 let currentListIndex = 0;
-let saveTimeout;
 let selectedCheckboxes = new Set();
 let globalHighlightEnabled = true;
-let wordSearchQuery = "";
+let wordSearchQuery = '';
 let matchCaseEnabled = false;
 let matchWholeEnabled = false;
 
@@ -24,18 +23,11 @@ function escapeHtml(str) {
       '<': '&lt;',
       '>': '&gt;',
       '"': '&quot;',
-      "'": '&#39;'
+      '\'': '&#39;'
     })[m];
   });
 }
 
-async function debouncedSave() {
-  clearTimeout(saveTimeout);
-  saveTimeout = setTimeout(async () => {
-    await chrome.storage.local.set({ lists });
-  }, 500);
-}
-
 async function save() {
   await chrome.storage.local.set({
     lists: lists,
@@ -49,13 +41,13 @@ async function save() {
   chrome.tabs.query({}, function (tabs) {
     for (let tab of tabs) {
       if (tab.id) {
-        chrome.tabs.sendMessage(tab.id, { type: "WORD_LIST_UPDATED" });
+        chrome.tabs.sendMessage(tab.id, { type: 'WORD_LIST_UPDATED' });
         chrome.tabs.sendMessage(tab.id, {
-          type: "GLOBAL_TOGGLE_UPDATED",
+          type: 'GLOBAL_TOGGLE_UPDATED',
           enabled: globalHighlightEnabled
         });
         chrome.tabs.sendMessage(tab.id, {
-          type: "MATCH_OPTIONS_UPDATED",
+          type: 'MATCH_OPTIONS_UPDATED',
           matchCase: matchCaseEnabled,
           matchWhole: matchWholeEnabled
         });
@@ -70,7 +62,7 @@ async function updateGlobalToggleState() {
     for (let tab of tabs) {
       if (tab.id) {
         chrome.tabs.sendMessage(tab.id, {
-          type: "GLOBAL_TOGGLE_UPDATED",
+          type: 'GLOBAL_TOGGLE_UPDATED',
           enabled: globalHighlightEnabled
         });
       }
@@ -95,9 +87,9 @@ async function load() {
   if (!lists.length) {
     lists.push({
       id: Date.now(),
-      name: chrome.i18n.getMessage("default_list_name"),
+      name: chrome.i18n.getMessage('default_list_name'),
-      background: "#ffff00",
+      background: '#ffff00',
-      foreground: "#000000",
+      foreground: '#000000',
       active: true,
       words: []
     });
@@ -105,13 +97,13 @@ async function load() {
   renderLists();
   renderWords();
 
-  document.getElementById("globalHighlightToggle").checked = globalHighlightEnabled;
+  document.getElementById('globalHighlightToggle').checked = globalHighlightEnabled;
 }
 
 function renderLists() {
   listSelect.innerHTML = lists.map((list, index) =>
     `<option value="${index}">${escapeHtml(list.name)}</option>`
-  ).join("");
+  ).join('');
   listSelect.value = currentListIndex;
   updateListForm();
 }
@@ -152,7 +144,7 @@ function renderWords() {
   for (let i = startIndex; i < endIndex; i++) {
     const w = filteredWords[i];
     if (!w) continue;
-    const container = document.createElement("div");
+    const container = document.createElement('div');
     container.style.height = `${itemHeight}px`;
     container.style.position = 'absolute';
     container.style.top = `${i * itemHeight}px`;
@@ -169,16 +161,16 @@ function renderWords() {
 
     const realIndex = list.words.indexOf(w);
 
-    const cbSelect = document.createElement("input");
+    const cbSelect = document.createElement('input');
-    cbSelect.type = "checkbox";
+    cbSelect.type = 'checkbox';
-    cbSelect.className = "word-checkbox";
+    cbSelect.className = 'word-checkbox';
     cbSelect.dataset.index = realIndex;
     if (selectedCheckboxes.has(realIndex)) {
       cbSelect.checked = true;
     }
 
-    const inputWord = document.createElement("input");
+    const inputWord = document.createElement('input');
-    inputWord.type = "text";
+    inputWord.type = 'text';
     inputWord.value = w.wordStr;
     inputWord.dataset.wordEdit = realIndex;
     inputWord.style.flexGrow = '1';
@@ -189,34 +181,34 @@ function renderWords() {
     inputWord.style.backgroundColor = 'var(--input-bg)';
     inputWord.style.color = 'var(--text-color)';
 
-    const inputBg = document.createElement("input");
+    const inputBg = document.createElement('input');
-    inputBg.type = "color";
+    inputBg.type = 'color';
     inputBg.value = w.background || list.background;
     inputBg.dataset.bgEdit = realIndex;
     inputBg.style.width = '24px';
     inputBg.style.height = '24px';
     inputBg.style.flexShrink = '0';
 
-    const inputFg = document.createElement("input");
+    const inputFg = document.createElement('input');
-    inputFg.type = "color";
+    inputFg.type = 'color';
     inputFg.value = w.foreground || list.foreground;
     inputFg.dataset.fgEdit = realIndex;
     inputFg.style.width = '24px';
     inputFg.style.height = '24px';
     inputFg.style.flexShrink = '0';
 
-    const activeContainer = document.createElement("label");
+    const activeContainer = document.createElement('label');
-    activeContainer.className = "word-active";
+    activeContainer.className = 'word-active';
     activeContainer.style.display = 'flex';
     activeContainer.style.alignItems = 'center';
     activeContainer.style.gap = '4px';
     activeContainer.style.flexShrink = '0';
 
-    const cbActive = document.createElement("input");
+    const cbActive = document.createElement('input');
-    cbActive.type = "checkbox";
+    cbActive.type = 'checkbox';
     cbActive.checked = w.active !== false;
     cbActive.dataset.activeEdit = realIndex;
-    cbActive.className = "switch";
+    cbActive.className = 'switch';
 
     activeContainer.appendChild(cbActive);
 
@@ -239,7 +231,7 @@ function renderWords() {
 
 document.addEventListener('DOMContentLoaded', () => {
   localizePage();
-  document.getElementById("selectAllBtn").onclick = () => {
+  document.getElementById('selectAllBtn').onclick = () => {
     const list = lists[currentListIndex];
     list.words.forEach((_, index) => {
       selectedCheckboxes.add(index);
@@ -247,13 +239,13 @@ document.addEventListener('DOMContentLoaded', () => {
     renderWords();
   };
 
-  document.getElementById("globalHighlightToggle").addEventListener('change', function () {
+  document.getElementById('globalHighlightToggle').addEventListener('change', function () {
     globalHighlightEnabled = this.checked;
     updateGlobalToggleState();
   });
 
-  wordList.addEventListener("change", e => {
+  wordList.addEventListener('change', e => {
-    if (e.target.type === "checkbox") {
+    if (e.target.type === 'checkbox') {
       if (e.target.dataset.index != null) {
         if (e.target.checked) {
           selectedCheckboxes.add(+e.target.dataset.index);
@@ -286,12 +278,12 @@ document.addEventListener('DOMContentLoaded', () => {
     updateListForm();
   };
 
-  document.getElementById("newListBtn").onclick = () => {
+  document.getElementById('newListBtn').onclick = () => {
     lists.push({
       id: Date.now(),
-      name: chrome.i18n.getMessage("new_list_name"),
+      name: chrome.i18n.getMessage('new_list_name'),
-      background: "#ffff00",
+      background: '#ffff00',
-      foreground: "#000000",
+      foreground: '#000000',
       active: true,
       words: []
     });
@@ -299,8 +291,8 @@ document.addEventListener('DOMContentLoaded', () => {
     save();
   };
 
-  document.getElementById("deleteListBtn").onclick = () => {
+  document.getElementById('deleteListBtn').onclick = () => {
-    if (confirm(chrome.i18n.getMessage("confirm_delete_list"))) {
+    if (confirm(chrome.i18n.getMessage('confirm_delete_list'))) {
       lists.splice(currentListIndex, 1);
       currentListIndex = Math.max(0, currentListIndex - 1);
       save();
@@ -312,16 +304,16 @@ document.addEventListener('DOMContentLoaded', () => {
   listFg.oninput = () => { lists[currentListIndex].foreground = listFg.value; save(); };
   listActive.onchange = () => { lists[currentListIndex].active = listActive.checked; save(); };
 
-  document.getElementById("addWordsBtn").onclick = () => {
+  document.getElementById('addWordsBtn').onclick = () => {
     const words = bulkPaste.value.split(/\n+/).map(w => w.trim()).filter(Boolean);
     const list = lists[currentListIndex];
-    for (const w of words) list.words.push({ wordStr: w, background: "", foreground: "", active: true });
+    for (const w of words) list.words.push({ wordStr: w, background: '', foreground: '', active: true });
-    bulkPaste.value = "";
+    bulkPaste.value = '';
     save();
   };
 
-  document.getElementById("deleteSelectedBtn").onclick = () => {
+  document.getElementById('deleteSelectedBtn').onclick = () => {
-    if (confirm(chrome.i18n.getMessage("confirm_delete_words"))) {
+    if (confirm(chrome.i18n.getMessage('confirm_delete_words'))) {
       const list = lists[currentListIndex];
       const toDelete = Array.from(selectedCheckboxes);
       lists[currentListIndex].words = list.words.filter((_, i) => !toDelete.includes(i));
@@ -331,7 +323,7 @@ document.addEventListener('DOMContentLoaded', () => {
     }
   };
 
-  document.getElementById("disableSelectedBtn").onclick = () => {
+  document.getElementById('disableSelectedBtn').onclick = () => {
     const list = lists[currentListIndex];
     selectedCheckboxes.forEach(index => {
       list.words[index].active = false;
@@ -340,7 +332,7 @@ document.addEventListener('DOMContentLoaded', () => {
     renderWords();
   };
 
-  document.getElementById("enableSelectedBtn").onclick = () => {
+  document.getElementById('enableSelectedBtn').onclick = () => {
     const list = lists[currentListIndex];
     selectedCheckboxes.forEach(index => {
       list.words[index].active = true;
@@ -349,7 +341,7 @@ document.addEventListener('DOMContentLoaded', () => {
     renderWords();
   };
 
-  wordList.addEventListener("input", e => {
+  wordList.addEventListener('input', e => {
     const index = e.target.dataset.wordEdit ?? e.target.dataset.bgEdit ?? e.target.dataset.fgEdit;
     if (index == null) return;
 
@@ -361,18 +353,18 @@ document.addEventListener('DOMContentLoaded', () => {
     save();
   });
 
-  const exportBtn = document.getElementById("exportBtn");
+  const exportBtn = document.getElementById('exportBtn');
   exportBtn.onclick = () => {
-    const blob = new Blob([JSON.stringify(lists, null, 2)], { type: "application/json" });
+    const blob = new Blob([JSON.stringify(lists, null, 2)], { type: 'application/json' });
     const url = URL.createObjectURL(blob);
-    const a = document.createElement("a");
+    const a = document.createElement('a');
     a.href = url;
-    a.download = "highlight-lists.json";
+    a.download = 'highlight-lists.json';
     a.click();
     URL.revokeObjectURL(url);
   };
 
-  const importBtn = document.getElementById("importBtn");
+  const importBtn = document.getElementById('importBtn');
   importBtn.onclick = () => importInput.click();
 
   importInput.onchange = e => {
@@ -388,7 +380,7 @@ document.addEventListener('DOMContentLoaded', () => {
           save();
         }
       } catch (err) {
-        alert(chrome.i18n.getMessage("invalid_json_error"));
+        alert(chrome.i18n.getMessage('invalid_json_error:' + err.message));
       }
     };
     reader.readAsText(file);
@@ -435,13 +427,13 @@ document.addEventListener('DOMContentLoaded', () => {
     }
   });
 
-  document.getElementById("deselectAllBtn").onclick = () => {
+  document.getElementById('deselectAllBtn').onclick = () => {
     selectedCheckboxes.clear();
     renderWords();
   };
 
-  const wordSearch = document.getElementById("wordSearch");
+  const wordSearch = document.getElementById('wordSearch');
-  wordSearch.addEventListener("input", (e) => {
+  wordSearch.addEventListener('input', (e) => {
     wordSearchQuery = e.target.value;
     renderWords();
   });

storage.js

@@ -1,8 +0,0 @@
-async function getLists() {
-    const { lists } = await chrome.storage.local.get("lists");
-    return lists || [];
-}
-
-async function saveLists(lists) {
-    await chrome.storage.local.set({ lists });
-}