From 0f32828df3aba2040745f1b9f57c008049d8e15b Mon Sep 17 00:00:00 2001
From: Victor Lyuboslavsky <victor@fleetdm.com>
Date: Sat, 3 Aug 2024 10:22:09 +0200
Subject: [PATCH] Fixes #23 - validate CSS selector

---
 src/common.css      |  4 ++++
 src/options.ts      | 14 +++++++++++++-
 static/options.html | 10 +++++-----
 3 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/src/common.css b/src/common.css
index 9218ea4..b1db620 100644
--- 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
index bd0604c..6cdfc72 100644
--- 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
index 70a46e6..9685e3a 100644
--- 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>