feat: added matching flags

popup/popup.css

@@ -257,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;

popup/popup.html

@@ -77,19 +77,27 @@
         <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..."/>
+      <input type="text" id="wordSearch" data-i18n="search_placeholder" placeholder="Search..." />
       <div id="wordList"></div>
     </div>
 
     <div class="section">
-      <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>
+      <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>
   </div>
 
+  <div class="section">
+    <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>
+    </div>
+  </div>
+
   <script src="../storage.js"></script>
   <script src="popup.js"></script>
 </body>

popup/popup.js

@@ -6,12 +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) {
@@ -35,7 +39,9 @@ async function debouncedSave() {
 async function save() {
   await chrome.storage.local.set({
     lists: lists,
-    globalHighlightEnabled: globalHighlightEnabled
+    globalHighlightEnabled: globalHighlightEnabled,
+    matchCaseEnabled,
+    matchWholeEnabled
   });
   renderLists();
   renderWords();
@@ -48,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
+        });
       }
     }
   });
@@ -70,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({
@@ -429,5 +446,14 @@ document.addEventListener('DOMContentLoaded', () => {
     renderWords();
   });
 
+  matchCase.addEventListener('change', () => {
+    matchCaseEnabled = matchCase.checked;
+    save();
+  });
+  matchWhole.addEventListener('change', () => {
+    matchWholeEnabled = matchWhole.checked;
+    save();
+  });
+
   load();
 });