Fixes #23 - validate CSS selector

getvictor · Aug 3, 2024 · 0f32828 · 0f32828
1 parent b4541fc
commit 0f32828
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 6 deletions.
diff --git a/src/common.css b/src/common.css
@@ -5,3 +5,7 @@
 .ob-input {
   @apply block m-1.5 p-2 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500;
 }
+
+.ob-input-error {
+  @apply bg-red-50 border-red-500 text-red-900 placeholder-red-700 focus:ring-red-500 focus:border-red-500;
+}
diff --git a/src/options.ts b/src/options.ts
@@ -11,7 +11,19 @@ chrome.storage.sync.get(null, (data) => {
     input.value = cssSelectors[i] || ""
     input.addEventListener("change", (event) => {
       if (event.target instanceof HTMLInputElement) {
-        cssSelectors[i] = event.target.value
+        const value = event.target.value.trim()
+        if (value !== "") {
+          // Validate target value
+          try {
+            document.querySelectorAll(value)
+          } catch (error: unknown) {
+            event.target.classList.add("ob-input-error")
+            console.info("OpenBlur invalid CSS selector:", value, error)
+            return
+          }
+        }
+        event.target.classList.remove("ob-input-error")
+        cssSelectors[i] = value
         void chrome.storage.sync.set({ cssSelectors })
         // Send message to content script in all tabs
         void chrome.tabs

diff --git a/static/options.html b/static/options.html
@@ -8,15 +8,15 @@ <h1 class="text-3xl m-1.5 font-extrabold">OpenBlur advanced options</h1>
     <br />
     <h2 class="text-xl m-1.5 font-bold">CSS selectors to blur</h2>
     <label for="css_selector_0" class="invisible"></label>
-    <input id="css_selector_0" class="ob-input w-96" type="text" placeholder="CSS selector" />
+    <input id="css_selector_0" class="ob-input w-[50rem]" type="text" placeholder="CSS selector" />
     <label for="css_selector_1" class="invisible"></label>
-    <input id="css_selector_1" class="ob-input w-96" type="text" placeholder="CSS selector" />
+    <input id="css_selector_1" class="ob-input w-[50rem]" type="text" placeholder="CSS selector" />
     <label for="css_selector_2" class="invisible"></label>
-    <input id="css_selector_2" class="ob-input w-96" type="text" placeholder="CSS selector" />
+    <input id="css_selector_2" class="ob-input w-[50rem]" type="text" placeholder="CSS selector" />
     <label for="css_selector_3" class="invisible"></label>
-    <input id="css_selector_3" class="ob-input w-96" type="text" placeholder="CSS selector" />
+    <input id="css_selector_3" class="ob-input w-[50rem]" type="text" placeholder="CSS selector" />
     <label for="css_selector_4" class="invisible"></label>
-    <input id="css_selector_4" class="ob-input w-96" type="text" placeholder="CSS selector" />
+    <input id="css_selector_4" class="ob-input w-[50rem]" type="text" placeholder="CSS selector" />
     <script src="options.js"></script>
   </body>
 </html>