fix: moved import/export to options section

.github/workflows/publish-extension.yml

@@ -8,7 +8,6 @@ jobs:
   publish:
     name: Pack and Upload Extension
     runs-on: ubuntu-latest
-    if: "contains(github.event.head_commit.message, 'chore(release):')"
 
     env:
       EXTENSION_ID: ${{ secrets.GOOGLE_EXTENSION_ID }}

_locales/de/messages.json

@@ -88,5 +88,11 @@
     },
     "global_highlight_toggle": {
         "message": "Aktivieren"
-    }
+    },
+    "search_placeholder": {
+    "message": "Suchen..."
+},
+  "options": { "message": "Optionen" },
+  "match_case": { "message": "Groß-/Kleinschreibung beachten" },
+  "match_whole": { "message": "Ganzes Wort übereinstimmen" }
 }

_locales/en/messages.json

@@ -88,5 +88,17 @@
   },
   "global_highlight_toggle": {
     "message": "Enable"
+  },
+  "search_placeholder": {
+    "message": "Search..."
+  },
+  "options": {
+    "message": "Options"
+  },
+  "match_case": {
+    "message": "Match Case"
+  },
+  "match_whole": {
+    "message": "Match Whole Word"
   }
 }

_locales/es/messages.json

@@ -88,5 +88,17 @@
   },
   "global_highlight_toggle": {
     "message": "Activar"
+  },
+  "search_placeholder": {
+    "message": "Buscar..."
+  },
+  "options": {
+    "message": "Opciones"
+  },
+  "match_case": {
+    "message": "Coincidir mayúsculas/minúsculas"
+  },
+  "match_whole": {
+    "message": "Coincidir palabra completa"
   }
 }

_locales/fr/messages.json

@@ -88,5 +88,17 @@
     },
     "global_highlight_toggle": {
         "message": "Activer"
+    },
+    "search_placeholder": {
+        "message": "Rechercher..."
+    },
+    "options": {
+        "message": "Options"
+    },
+    "match_case": {
+        "message": "Respecter la casse"
+    },
+    "match_whole": {
+        "message": "Mot entier seulement"
     }
 }

_locales/hi/messages.json

@@ -88,5 +88,17 @@
     },
     "global_highlight_toggle": {
         "message": "सक्षम करें"
+    },
+    "search_placeholder": {
+        "message": "खोजें..."
+    },
+    "options": {
+        "message": "विकल्प"
+    },
+    "match_case": {
+        "message": "केस मिलाएं"
+    },
+    "match_whole": {
+        "message": "पूरा शब्द मिलाएं"
     }
 }

_locales/it/messages.json

@@ -88,5 +88,17 @@
     },
     "global_highlight_toggle": {
         "message": "Attiva"
+    },
+    "search_placeholder": {
+        "message": "Cerca..."
+    },
+    "options": {
+        "message": "Opzioni"
+    },
+    "match_case": {
+        "message": "Maiuscole/minuscole"
+    },
+    "match_whole": {
+        "message": "Solo parola intera"
     }
 }

_locales/ja/messages.json

@@ -88,5 +88,17 @@
     },
     "global_highlight_toggle": {
         "message": "有効にする"
+    },
+    "search_placeholder": {
+        "message": "検索..."
+    },
+    "options": {
+        "message": "オプション"
+    },
+    "match_case": {
+        "message": "大文字と小文字を区別"
+    },
+    "match_whole": {
+        "message": "完全一致"
     }
 }

_locales/ko/messages.json

@@ -88,5 +88,17 @@
     },
     "global_highlight_toggle": {
         "message": "활성화"
+    },
+    "search_placeholder": {
+        "message": "검색..."
+    },
+    "options": {
+        "message": "옵션"
+    },
+    "match_case": {
+        "message": "대소문자 구분"
+    },
+    "match_whole": {
+        "message": "전체 단어 일치"
     }
 }

_locales/nl/messages.json

@@ -88,5 +88,17 @@
   },
   "global_highlight_toggle": {
     "message": "Inschakelen"
+  },
+  "search_placeholder": {
+    "message": "Zoeken..."
+  },
+  "options": {
+    "message": "Opties"
+  },
+  "match_case": {
+    "message": "Hoofdlettergevoelig"
+  },
+  "match_whole": {
+    "message": "Alleen volledig woord"
   }
 }

_locales/pl/messages.json

@@ -88,5 +88,17 @@
   },
   "global_highlight_toggle": {
     "message": "Włącz"
+  },
+  "search_placeholder": {
+    "message": "Szukaj..."
+  },
+  "options": {
+    "message": "Opcje"
+  },
+  "match_case": {
+    "message": "Uwzględnij wielkość liter"
+  },
+  "match_whole": {
+    "message": "Tylko całe słowo"
   }
 }

_locales/pt_BR/messages.json

@@ -88,5 +88,11 @@
     },
     "global_highlight_toggle": {
         "message": "Ativar"
-    }
+    },
+    "search_placeholder": {
+    "message": "Pesquisar..."
+},
+  "options": { "message": "Opções" },
+  "match_case": { "message": "Diferenciar maiúsculas/minúsculas" },
+  "match_whole": { "message": "Palavra inteira" }
 }

_locales/ru/messages.json

@@ -2,6 +2,9 @@
   "extension_name": {
     "message": "Goose Highlighter"
   },
+  "extension_description": {
+    "message": "Выделяйте слова и фразы на любом сайте. Создавайте собственные списки, используйте цвета, импортируйте и экспортируйте данные."
+  },
   "select_list": {
     "message": "Выберите список:"
   },
@@ -85,5 +88,17 @@
   },
   "global_highlight_toggle": {
     "message": "Вкл"
+  },
+  "search_placeholder": {
+    "message": "Поиск..."
+  },
+  "options": {
+    "message": "Опции"
+  },
+  "match_case": {
+    "message": "С учетом регистра"
+  },
+  "match_whole": {
+    "message": "Слово целиком"
   }
 }

_locales/tr/messages.json

@@ -88,5 +88,17 @@
   },
   "global_highlight_toggle": {
     "message": "Etkinleştir"
+  },
+  "search_placeholder": {
+    "message": "Ara..."
+  },
+  "options": {
+    "message": "Seçenekler"
+  },
+  "match_case": {
+    "message": "Büyük/küçük harf duyarlı"
+  },
+  "match_whole": {
+    "message": "Tüm kelimeyle eşleş"
   }
 }

_locales/zh_CN/messages.json

@@ -88,5 +88,17 @@
   },
   "global_highlight_toggle": {
     "message": "启用"
+  },
+  "search_placeholder": {
+    "message": "搜索..."
+  },
+  "options": {
+    "message": "选项"
+  },
+  "match_case": {
+    "message": "区分大小写"
+  },
+  "match_whole": {
+    "message": "全词匹配"
   }
 }

main.js

@@ -1,5 +1,7 @@
 let currentLists = [];
 let isGlobalHighlightEnabled = true;
+let matchCase = false;
+let matchWhole = false;
 
 function escapeRegex(s) {
   return s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
@@ -62,7 +64,12 @@ function processNodes() {
     const wordMap = new Map();
     for (const word of activeWords) wordMap.set(word.text.toLowerCase(), word);
 
-    const pattern = new RegExp(`(${Array.from(wordMap.keys()).map(escapeRegex).join('|')})`, 'gi');
+    let flags = matchCase ? 'g' : 'gi';
+    let wordsPattern = Array.from(wordMap.keys()).map(escapeRegex).join('|');
+    if (matchWhole) {
+      wordsPattern = `\\b(?:${wordsPattern})\\b`;
+    }
+    const pattern = new RegExp(`(${wordsPattern})`, flags);
 
     for (const node of textNodes) {
       if (!pattern.test(node.nodeValue)) continue;
@@ -102,12 +109,14 @@ function debounce(func, wait) {
 }
 
 // Initial highlight on load
-chrome.storage.local.get(["lists", "globalHighlightEnabled"], ({ lists, globalHighlightEnabled }) => {
+chrome.storage.local.get(["lists", "globalHighlightEnabled", "matchCaseEnabled", "matchWholeEnabled"], ({ lists, globalHighlightEnabled, matchCaseEnabled, matchWholeEnabled }) => {
   if (Array.isArray(lists)) setListsAndUpdate(lists);
   if (globalHighlightEnabled !== undefined) {
     isGlobalHighlightEnabled = globalHighlightEnabled;
   }
-  processNodes(); // Initial processing
+  matchCase = !!matchCaseEnabled;
+  matchWhole = !!matchWholeEnabled;
+  processNodes();
 });
 
 // Listen for updates from the popup and re-apply highlights
@@ -119,6 +128,10 @@ chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
   } else if (message.type === "GLOBAL_TOGGLE_UPDATED") {
     isGlobalHighlightEnabled = message.enabled;
     processNodes();
+  } else if (message.type === "MATCH_OPTIONS_UPDATED") {
+    matchCase = !!message.matchCase;
+    matchWhole = !!message.matchWhole;
+    processNodes();
   }
 });
 

popup/popup.css

@@ -7,6 +7,7 @@
   --button-hover: #444;
   --button-text: white;
   --accent: #ec9c23;
+  --accent-hover: #ffb84d;
   --accent-text: #000;
   --highlight-tag: #292929;
   --highlight-tag-border: #444;
@@ -18,6 +19,10 @@
   --switch-bg: #444;
   --checkbox-accent: #ec9c23;
   --checkbox-border: #666;
+  --scrollbar-bg: var(--section-bg);
+  --scrollbar-thumb: var(--accent);
+  --scrollbar-thumb-hover: var(--accent-hover);
+  --scrollbar-thumb-border: var(--section-bg);
 }
 
 body {
@@ -115,11 +120,40 @@ textarea {
 
 input[type="color"] {
   background: none;
-  border: none;
-  cursor: pointer;
+  border: 2px solid var(--input-border);
+  border-radius: 8px;
+  box-shadow: 0 1px 4px rgba(0,0,0,0.10);
   width: 36px;
   height: 36px;
   margin-left: 6px;
+  cursor: pointer;
+  padding: 0;
+  transition: border 0.2s, box-shadow 0.2s;
+  appearance: none;
+  -webkit-appearance: none;
+  overflow: hidden;
+}
+
+input[type="color"]::-webkit-color-swatch-wrapper {
+  padding: 0;
+  border-radius: 0;
+}
+
+input[type="color"]::-webkit-color-swatch {
+  border-radius: 0;
+  border: none;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+}
+
+input[type="color"]::-moz-color-swatch {
+  border-radius: 0;
+  border: none;
+  padding: 0;
+  width: 100%;
+  height: 100%;
 }
 
 input[type="checkbox"] {
@@ -128,9 +162,9 @@ input[type="checkbox"] {
   background-color: var(--input-bg);
   border: 1px solid var(--checkbox-border);
   border-radius: 4px;
-  width: 16px;
-  height: 16px;
-  transform: scale(1.2);
+  width: 12px;
+  height: 12px;
+  transform: scale(1);
   cursor: pointer;
   position: relative;
 }
@@ -138,10 +172,10 @@ input[type="checkbox"] {
 input[type="checkbox"]:checked::after {
   content: "";
   position: absolute;
-  top: 2px;
-  left: 5px;
-  width: 4px;
-  height: 9px;
+  top: 1px;
+  left: 3px;
+  width: 3px; 
+  height: 7px;
   border: solid var(--checkbox-accent);
   border-width: 0 2px 2px 0;
   transform: rotate(45deg);
@@ -223,6 +257,19 @@ button.danger:hover {
   flex-wrap: wrap;
 }
 
+.button-row label {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  cursor: pointer;
+  font-size: 1em;
+}
+
+.button-row input[type="checkbox"] {
+  margin: 0;
+  vertical-align: middle;
+}
+
 .color-row {
   display: flex;
   gap: 24px;
@@ -236,6 +283,12 @@ button.danger:hover {
   gap: 6px;
 }
 
+#wordSearch{
+  width:100%;
+  margin-bottom:8px;
+  margin-top: 8px;
+}
+
 #wordList {
   margin-top: 8px;
   position: relative;
@@ -381,3 +434,75 @@ label:has(input.switch) {
   align-items: center;
   gap: 8px;
 }
+
+#wordList,
+body {
+  scrollbar-width: thin;
+  scrollbar-color: var(--accent) var(--section-bg);
+}
+
+#wordList::-webkit-scrollbar,
+body::-webkit-scrollbar {
+  width: 8px;
+  background: var(--section-bg);
+  border-radius: 8px;
+}
+
+#wordList::-webkit-scrollbar-thumb,
+body::-webkit-scrollbar-thumb {
+  background: var(--accent);
+  border-radius: 8px;
+  min-height: 24px;
+  border: 2px solid var(--section-bg);
+}
+
+#wordList::-webkit-scrollbar-thumb:hover,
+body::-webkit-scrollbar-thumb:hover {
+  background: var(--accent-hover);
+}
+
+#wordList::-webkit-scrollbar-corner,
+body::-webkit-scrollbar-corner {
+  background: var(--section-bg);
+}
+
+:root {
+  --scrollbar-bg: var(--section-bg);
+  --scrollbar-thumb: var(--accent);
+  --scrollbar-thumb-hover: var(--accent-hover);
+  --scrollbar-thumb-border: var(--section-bg);
+}
+
+html, body, #wordList {
+  scrollbar-width: thin;
+  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-bg);
+}
+
+html::-webkit-scrollbar,
+body::-webkit-scrollbar,
+#wordList::-webkit-scrollbar {
+  width: 8px;
+  background: var(--scrollbar-bg);
+  border-radius: 8px;
+}
+
+html::-webkit-scrollbar-thumb,
+body::-webkit-scrollbar-thumb,
+#wordList::-webkit-scrollbar-thumb {
+  background: var(--scrollbar-thumb);
+  border-radius: 8px;
+  min-height: 24px;
+  border: 2px solid var(--scrollbar-thumb-border);
+}
+
+html::-webkit-scrollbar-thumb:hover,
+body::-webkit-scrollbar-thumb:hover,
+#wordList::-webkit-scrollbar-thumb:hover {
+  background: var(--scrollbar-thumb-hover);
+}
+
+html::-webkit-scrollbar-corner,
+body::-webkit-scrollbar-corner,
+#wordList::-webkit-scrollbar-corner {
+  background: var(--scrollbar-bg);
+}

popup/popup.html

@@ -77,10 +77,16 @@
         <button id="disableSelectedBtn"><span data-i18n="disable_selected">Disable</span></button>
         <button id="deleteSelectedBtn" class="danger"><span data-i18n="delete_selected">Delete</span></button>
       </div>
+      <input type="text" id="wordSearch" data-i18n="search_placeholder" placeholder="Search..." />
       <div id="wordList"></div>
     </div>
 
     <div class="section">
+      <h2><i class="fa-solid fa-sliders"></i> <span data-i18n="options">Options</span></h2>
+      <div class="button-row" style="margin-bottom:8px;">
+        <label><input type="checkbox" id="matchCase" /> <span data-i18n="match_case">Match Case</span></label>
+        <label><input type="checkbox" id="matchWhole" /> <span data-i18n="match_whole">Match Whole Word</span></label>
+      </div>
       <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 />

popup/popup.js

@@ -6,11 +6,16 @@ const listActive = document.getElementById("listActive");
 const bulkPaste = document.getElementById("bulkPaste");
 const wordList = document.getElementById("wordList");
 const importInput = document.getElementById("importInput");
+const matchCase = document.getElementById("matchCase");
+const matchWhole = document.getElementById("matchWhole");
 let lists = [];
 let currentListIndex = 0;
 let saveTimeout;
 let selectedCheckboxes = new Set();
 let globalHighlightEnabled = true;
+let wordSearchQuery = "";
+let matchCaseEnabled = false;
+let matchWholeEnabled = false;
 
 function escapeHtml(str) {
   return str.replace(/[&<>"']/g, function (m) {
@@ -34,7 +39,9 @@ async function debouncedSave() {
 async function save() {
   await chrome.storage.local.set({
     lists: lists,
-    globalHighlightEnabled: globalHighlightEnabled
+    globalHighlightEnabled: globalHighlightEnabled,
+    matchCaseEnabled,
+    matchWholeEnabled
   });
   renderLists();
   renderWords();
@@ -47,6 +54,11 @@ async function save() {
           type: "GLOBAL_TOGGLE_UPDATED",
           enabled: globalHighlightEnabled
         });
+        chrome.tabs.sendMessage(tab.id, {
+          type: "MATCH_OPTIONS_UPDATED",
+          matchCase: matchCaseEnabled,
+          matchWhole: matchWholeEnabled
+        });
       }
     }
   });
@@ -69,10 +81,16 @@ async function updateGlobalToggleState() {
 async function load() {
   const res = await chrome.storage.local.get({
     lists: [],
-    globalHighlightEnabled: true
+    globalHighlightEnabled: true,
+    matchCaseEnabled: false,
+    matchWholeEnabled: false
   });
   lists = res.lists;
-  globalHighlightEnabled = res.globalHighlightEnabled !== false; // Default to true if undefined
+  globalHighlightEnabled = res.globalHighlightEnabled !== false;
+  matchCaseEnabled = !!res.matchCaseEnabled;
+  matchWholeEnabled = !!res.matchWholeEnabled;
+  matchCase.checked = matchCaseEnabled;
+  matchWhole.checked = matchWholeEnabled;
 
   if (!lists.length) {
     lists.push({
@@ -108,7 +126,12 @@ function updateListForm() {
 
 function renderWords() {
   const list = lists[currentListIndex];
-  const fragment = document.createDocumentFragment();
+
+  let filteredWords = list.words;
+  if (wordSearchQuery.trim()) {
+    const q = wordSearchQuery.trim().toLowerCase();
+    filteredWords = list.words.filter(w => w.wordStr.toLowerCase().includes(q));
+  }
 
   const itemHeight = 32;
   const containerHeight = wordList.clientHeight;
@@ -116,18 +139,19 @@ function renderWords() {
   const startIndex = Math.floor(scrollTop / itemHeight);
   const endIndex = Math.min(
     startIndex + Math.ceil(containerHeight / itemHeight) + 2,
-    list.words.length
+    filteredWords.length
   );
 
   wordList.innerHTML = '';
 
   const spacer = document.createElement('div');
   spacer.style.position = 'relative';
-  spacer.style.height = `${list.words.length * itemHeight}px`;
+  spacer.style.height = `${filteredWords.length * itemHeight}px`;
   spacer.style.width = '100%';
 
   for (let i = startIndex; i < endIndex; i++) {
-    const w = list.words[i];
+    const w = filteredWords[i];
+    if (!w) continue;
     const container = document.createElement("div");
     container.style.height = `${itemHeight}px`;
     container.style.position = 'absolute';
@@ -143,18 +167,20 @@ function renderWords() {
     container.style.background = 'var(--highlight-tag)';
     container.style.border = '1px solid var(--highlight-tag-border)';
 
+    const realIndex = list.words.indexOf(w);
+
     const cbSelect = document.createElement("input");
     cbSelect.type = "checkbox";
     cbSelect.className = "word-checkbox";
-    cbSelect.dataset.index = i;
-    if (selectedCheckboxes.has(i)) {
+    cbSelect.dataset.index = realIndex;
+    if (selectedCheckboxes.has(realIndex)) {
       cbSelect.checked = true;
     }
 
     const inputWord = document.createElement("input");
     inputWord.type = "text";
     inputWord.value = w.wordStr;
-    inputWord.dataset.wordEdit = i;
+    inputWord.dataset.wordEdit = realIndex;
     inputWord.style.flexGrow = '1';
     inputWord.style.minWidth = '0';
     inputWord.style.padding = '4px 8px';
@@ -166,7 +192,7 @@ function renderWords() {
     const inputBg = document.createElement("input");
     inputBg.type = "color";
     inputBg.value = w.background || list.background;
-    inputBg.dataset.bgEdit = i;
+    inputBg.dataset.bgEdit = realIndex;
     inputBg.style.width = '24px';
     inputBg.style.height = '24px';
     inputBg.style.flexShrink = '0';
@@ -174,7 +200,7 @@ function renderWords() {
     const inputFg = document.createElement("input");
     inputFg.type = "color";
     inputFg.value = w.foreground || list.foreground;
-    inputFg.dataset.fgEdit = i;
+    inputFg.dataset.fgEdit = realIndex;
     inputFg.style.width = '24px';
     inputFg.style.height = '24px';
     inputFg.style.flexShrink = '0';
@@ -189,7 +215,7 @@ function renderWords() {
     const cbActive = document.createElement("input");
     cbActive.type = "checkbox";
     cbActive.checked = w.active !== false;
-    cbActive.dataset.activeEdit = i;
+    cbActive.dataset.activeEdit = realIndex;
     cbActive.className = "switch";
 
     activeContainer.appendChild(cbActive);
@@ -207,7 +233,7 @@ function renderWords() {
 
   const wordCount = document.getElementById('wordCount');
   if (wordCount) {
-    wordCount.textContent = list.words.length;
+    wordCount.textContent = filteredWords.length;
   }
 }
 
@@ -221,7 +247,6 @@ document.addEventListener('DOMContentLoaded', () => {
     renderWords();
   };
 
-  // Add event listener for the global toggle
   document.getElementById("globalHighlightToggle").addEventListener('change', function () {
     globalHighlightEnabled = this.checked;
     updateGlobalToggleState();
@@ -415,5 +440,20 @@ document.addEventListener('DOMContentLoaded', () => {
     renderWords();
   };
 
+  const wordSearch = document.getElementById("wordSearch");
+  wordSearch.addEventListener("input", (e) => {
+    wordSearchQuery = e.target.value;
+    renderWords();
+  });
+
+  matchCase.addEventListener('change', () => {
+    matchCaseEnabled = matchCase.checked;
+    save();
+  });
+  matchWhole.addEventListener('change', () => {
+    matchWholeEnabled = matchWhole.checked;
+    save();
+  });
+
   load();
 });