Adding logic for handling search engine toggles

pages/common-page-functions.js

@@ -42,21 +42,18 @@ document.getElementById('powerCheckbox').addEventListener('change', () => {
   });
 });
 
-// Add event listeners for search engine toggles
-document.getElementById('googleCheckbox').addEventListener('change', (event) => {
-  if(event.target.checked) {
-    commonFunctionRequestSearchEngineAccess('google')
-  } else {
-    commonFunctionRemoveSearchEngineAccess('google')
-  }
-});
-// Add event listeners for search engine toggles
-document.getElementById('yandexCheckbox').addEventListener('change', (event) => {
-  if(event.target.checked) {
-    commonFunctionRequestSearchEngineAccess('yandex')
-  } else {
-    commonFunctionRemoveSearchEngineAccess('yandex')
-  }
+const searchEngineToggles = document.querySelectorAll('.searchEngineToggles label');
+console.log(searchEngineToggles);
+searchEngineToggles.forEach((engine) => {
+  let engineInput = engine.querySelector('input');
+  let engineName = engineInput.getAttribute('data-search-engine');
+  engine.addEventListener('change', () => {
+    if (engineInput.checked) {
+      commonFunctionRequestSearchEngineAccess(engineName);
+    } else {
+      commonFunctionRemoveSearchEngineAccess(engineName);
+    }
+  });
 });
 
 // Set notifications setting

pages/search-engine-permissions.js

@@ -1,4 +1,19 @@
 const searchEngineOrigins = {
+    bing: [
+        "https://*.bing.com/search*"
+    ],
+    brave: [
+        "https://search.brave.com/search*"
+    ],
+    duckduckgo: [
+        "https://*.duckduckgo.com/*"
+    ],
+    ecosia: [
+        "https://*.ecosia.org/*",
+    ],
+    kagi: [
+        "https://kagi.com/search*",
+    ],
     google: [
         "https://www.google.com/search*",
         "https://www.google.ad/search*",
@@ -191,6 +206,15 @@ const searchEngineOrigins = {
         "https://www.google.co.zw/search*",
         "https://www.google.cat/search*"
     ],
+    qwant: [
+        "https://*.qwant.com/*"
+    ],
+    startpage: [
+        "https://*.startpage.com/*"
+    ],
+    yahoo: [
+        "https://*.search.yahoo.com/*"
+    ],
     yandex: [
         "https://*.ya.ru/*",
         "https://*.yandex.az/*",
@@ -219,7 +243,10 @@ function commonFunctionRequestSearchEngineAccess(searchEngine) {
         origins: searchEngineOrigins[searchEngine]
     }, (granted) => {
         // Callback is true if the user granted the permissions.
-        if (!granted) return;
+        if (!granted) {
+            document.querySelector(`[data-search-engine="${searchEngine}"`).checked = false;
+            return false;
+        }
 
         chrome.scripting.registerContentScripts([{
             id: `content-search-filtering-${searchEngine}`,

pages/settings/index.html

@@ -128,21 +128,45 @@
         </fieldset>
         <fieldset id="generalSettings">
           <legend><span aria-hidden="true">🔍</span> Search engine settings</legend>
-          <div class="settingToggle">
+          <div class="settingToggle searchEngineToggles">
             <label>
-              <input id="googleCheckbox" type="checkbox" />
+              <input id="googleCheckbox" data-search-engine="google" type="checkbox" />
               Google
             </label>
             <label>
-              <input id="bingCheckbox" type="checkbox" />
+              <input id="bingCheckbox" data-search-engine="bing" type="checkbox" />
               Bing
             </label>
             <label>
-              <input id="duckduckgoCheckbox" type="checkbox" />
+              <input id="duckduckgoCheckbox" data-search-engine="duckduckgo" type="checkbox" />
               DuckDuckGo
             </label>
             <label>
-              <input id="yandexCheckbox" type="checkbox" />
+              <input id="braveCheckbox" data-search-engine="brave" type="checkbox" />
+              Brave
+            </label>
+            <label>
+              <input id="ecosiaCheckbox" data-search-engine="ecosia" type="checkbox" />
+              Ecosia
+            </label>
+            <label>
+              <input id="kagiCheckbox" data-search-engine="kagi" type="checkbox" />
+              Kagi
+            </label>
+            <label>
+              <input id="qwuantCheckbox" data-search-engine="qwant" type="checkbox" />
+              Qwuant
+            </label>
+            <label>
+              <input id="startpageCheckbox" data-search-engine="startpage" type="checkbox" />
+              Startpage
+            </label>
+            <label>
+              <input id="yahooCheckbox" data-search-engine="yahoo" type="checkbox" />
+              Yahoo
+            </label>
+            <label>
+              <input id="yandexCheckbox" data-search-engine="yandex" type="checkbox" />
               Yandex
             </label>
           </div>