Add Startpage support; refactor search extraction

manifest.json

@@ -54,6 +54,11 @@
       "css": ["build/searchInjection.css"],
       "js": ["build/searchInjection.js"]
     },
+{
+      "matches": ["*://*.startpage.com/*"],
+      "css": ["build/searchInjection.css"],
+      "js": ["build/searchInjection.js"]
+    },
     {
       "matches": [
         "*://*.google.com/*",
@@ -270,4 +275,5 @@
   "permissions": ["storage"],
 
   "host_permissions": ["https://*/*", "http://*/*"]
-}
+}
+

scss/bookmarks.scss

@@ -27,7 +27,8 @@ ul#bookmark-list {
   :root:not(.light) body.is-pc &:not(.light),     // Brave Search
   html.theme-dark &:not(.light),                  // Searx
   html.theme_dark &:not(.light),                  // Kagi
-  body[data-theme=dark] &:not(.light)             // Qwant
+  body[data-theme=dark] &:not(.light),            // Qwant
+  .layout-web--night &:not(.light)                // Startpage
     {
       .description {
         color: $gray-color-dark;

scss/injectionBox.scss

@@ -69,7 +69,6 @@ div#bookmark-list-container {
     font-size: 14px;
     font-family: sans-serif;
   }
-
   .tags a:hover {
     text-decoration: none;
     cursor: default;
@@ -135,6 +134,10 @@ div#bookmark-list-container {
       color: $alternative-color;
     }
 
+    &.startpage:not(.light) {
+      background-color: $startpage-bg-dark;
+      border: 1px solid $startpage-border-color-dark;
+    }
 
     &.google:not(.light) {
       background-color: $google-bg;
@@ -161,6 +164,9 @@ div#bookmark-list-container {
     }
   }
 
+  &.dark {
+    @include dark-styling;
+  }
   /**
   .dark-bg is the class duckduckgo globally uses for the dark theme
   data-dt=1 is the attribute of the body tag google uses for the dark theme
@@ -178,7 +184,8 @@ div#bookmark-list-container {
   :root:not(.light) body.is-pc &:not(.light),     // Brave Search
   html.theme-dark &:not(.light),                  // Searx
   html.theme_dark &:not(.light),                  // Kagi
-  body[data-theme=dark] &:not(.light)             // Qwant
+  body[data-theme=dark] &:not(.light),            // Qwant
+  .layout-web--night &:not(.light)                // Startpage
     {
       @include dark-styling;
     }

scss/variables.scss

@@ -52,3 +52,6 @@ $kagi-border-color-dark: rgba(229, 229, 229, 0.2);
 
 $qwant-bg-dark: #2f3237;
 $qwant-border-color-dark: #ffffff29;
+
+$startpage-bg-dark: #171b25;
+$startpage-border-color-dark: #3b435b;

src/configuration.js

@@ -13,18 +13,25 @@ const DEFAULT_CONFIG = {
   themeSearx: "auto",
   themeKagi: "auto",
   themeQwant: "auto",
+  themeStartpage: "auto",
 };
 
 export async function getConfiguration() {
   return new Promise((resolve) => {
     getStorage().get(CONFIG_KEY, (data) => {
-      try {
-        const config = JSON.parse(data[CONFIG_KEY]);
-        resolve(config);
-      } catch {
-        const config = DEFAULT_CONFIG;
-        resolve(config);
+      let config = { ...DEFAULT_CONFIG }; // Start with defaults
+
+      if (data && data[CONFIG_KEY]) {
+        try {
+          const savedConfig = JSON.parse(data[CONFIG_KEY]);
+          // Merge saved values OVER the defaults
+          config = { ...config, ...savedConfig };
+        } catch (e) {
+          console.error("Linkding Injector: Failed to parse config", e);
+        }
       }
+
+      resolve(config);
     });
   });
 }

src/options.svelte

@@ -12,6 +12,7 @@
   let themeSearx;
   let themeKagi;
   let themeQwant;
+  let themeStartpage;
   let isSuccess = false;
   let isError = false;
   let errorMessage = "";
@@ -29,6 +30,7 @@
     themeSearx = config.themeSearx;
     themeKagi = config.themeKagi;
     themeQwant = config.themeQwant;
+    themeStartpage = config.themeStartpage;
   }
 
   init();
@@ -45,6 +47,7 @@
       themeSearx,
       themeKagi,
       themeQwant,
+      themeStartpage,
     };
 
     const testResult = await new LinkdingApi(config).testConnection(config);
@@ -255,6 +258,21 @@
           <i class="form-icon" />auto (default)
         </label>
       </div>
+      <div class="form-group p-relative clearfix">
+        <div class="float-left form-label">Startpage</div>
+        <label class="form-inline float-right form-radio">
+          <input type="radio" bind:group={themeStartpage} value="light" />
+          <i class="form-icon" />light
+        </label>
+        <label class="form-inline float-right form-radio">
+          <input type="radio" bind:group={themeStartpage} value="dark" />
+          <i class="form-icon" />dark
+        </label>
+        <label class="form-inline float-right form-radio">
+          <input type="radio" bind:group={themeStartpage} value="auto" />
+          <i class="form-icon" />auto (default)
+        </label>
+      </div>
       <div class="form-input-hint">
         † Automatic theme detection may fail with these search engines unless
         you set a specific theme (not 'system') in the search engine settings.

src/searchInjection.js

@@ -15,6 +15,14 @@ function escapeHTML(str) {
   return p.innerHTML;
 }
 
+function getStartpageTheme() {
+  const theme = document.getElementById('site_theme')?.getAttribute('data-site-theme');
+  if (['dark', 'night'].includes(theme)) return 'dark';
+  if (['light', 'air'].includes(theme)) return 'light';
+  if (theme === 'device') return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+  return '';
+}
+
 const browser = getBrowser();
 
 const port = browser.runtime.connect({ name: "port-from-cs" });
@@ -27,6 +35,8 @@ if (document.location.hostname.match(/duckduckgo\.com/)) {
   searchEngine = "brave";
 } else if (document.location.hostname.match(/kagi\.com/)) {
   searchEngine = "kagi";
+} else if (document.location.hostname.match(/startpage\.com/)) {
+  searchEngine = "startpage";
 } else if (document.location.href.match(/http.?:\/\/.+\/search/)) {
   searchEngine = "searx";
 } else if (document.location.hostname.match(/qwant\.com/)) {
@@ -43,6 +53,7 @@ const sidebarSelectors = {
   searx: "#sidebar",
   kagi: ".right-content-box > ._0_right_sidebar",
   qwant: ".is-sidebar",
+  startpage: ".layout-web__sidebar, #sidebar",
 };
 
 // When background script answers with results, construct html for the result box
@@ -89,12 +100,13 @@ port.onMessage.addListener(function (m) {
       searx: m.config.themeSearx,
       kagi: m.config.themeKagi,
       qwant: m.config.themeQwant,
+      startpage: m.config.themeStartpage || "auto",
     };
 
     const theme = themes[searchEngine];
 
     if (theme == "auto") {
-      themeClass = ""; // automatic theme detection
+      themeClass = (searchEngine === "startpage") ? getStartpageTheme() : ""; // automatic theme detection
     } else {
       themeClass = theme; // "dark" for dark theme, "light" for light theme
     }
@@ -198,11 +210,16 @@ port.onMessage.addListener(function (m) {
 // Start the search by sending a message to background.js with the search term
 let queryString = location.search;
 let urlParams = new URLSearchParams(queryString);
-let searchTerm = escapeHTML(urlParams.get("q"));
-if (searchEngine == "searx") {
-  searchTerm = escapeHTML(document.querySelector("input#q").value);
+let searchTerm = urlParams.get("q") || urlParams.get("query"); // Check both 'q' and 'query'
+
+// If URL params are missing, fallback to input fields
+if (!searchTerm || searchTerm === "null") {
+  searchTerm = document.querySelector("input[name='query'], input#q")?.value || "";
 }
 
+searchTerm = escapeHTML(searchTerm);
+
+// Now handle the engine-specific sending logic
 if (searchEngine == "brave") {
   // Brave search seems to remove the injection box if it is injected too soon.
   // Wait a bit before injecting.
@@ -224,6 +241,7 @@ if (searchEngine == "brave") {
     subtree: true
   });
 } else {
+  // Startpage, Google, DDG, etc. hit this
   port.postMessage({ searchTerm: searchTerm });
 }