feat: Kagi search supported

Co-Authored-By: Fivefold <[email protected]>
Co-Authored-By: Dan Bush <[email protected]>

README.md

@@ -10,8 +10,9 @@ Fork from [linkding-injector](https://github.com/Fivefold/linkding-injector)
 - Supports the following search engines:
   - [google](https://www.google.com/)
   - [duckduckgo](https://duckduckgo.com/)
-  - [SearX/SearXNG](https://duckduckgo.com/)*
+  - [SearX/SearXNG](https://github.com/searx/searx)*
   - [Brave Search](https://search.brave.com/)
+  - [Kagi](https://kagi.com/)
 - Automatic light or dark theme detection
 - Open search result in Miniflux
   Works with: Firefox, Chrome

manifest.json

@@ -31,6 +31,17 @@
         "build/searchInjection.js"
       ]
     },
+    {
+      "matches": [
+        "*://kagi.com/*"
+      ],
+      "css": [
+        "build/searchInjection.css"
+      ],
+      "js": [
+        "build/searchInjection.js"
+      ]
+    },
     {
       "matches": [
         "*://search.brave.com/*"

scss/injectionBox.scss

@@ -129,6 +129,11 @@ div#bookmark-list-container {
     }
   }
 
+
+&.kagi { // kagi-specific styles
+    font-size: .875rem;
+  }
+
   // --------- dark styling start ---------
   @mixin dark-styling {
     background-color: $duckduckgo-bg;
@@ -173,13 +178,19 @@ div#bookmark-list-container {
       background-color: $searx-bg-dark;
       border: 1px solid $searx-border-color-dark;
     }
+
+    &.kagi:not(.light) {
+      background-color: $kagi-bg-dark;
+      border: 1px solid $kagi-border-color-dark;
+    }
   }
 
   /**
   .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
   .dark is the class brave search globally uses for the dark theme
   .theme-dark is the class searx globally uses for the dark theme
+.theme_dark is the class kagi globally uses for the dark theme
 
   .light is added if the manual white theme is set and disables these dark 
   styles, while .dark activates them regardless of global theme.
@@ -188,8 +199,9 @@ div#bookmark-list-container {
     &.dark,
   .dark-bg &:not(.light),             // DuckDuckGo
   body[data-dt="1"] &:not(.light),    // Google
-  :root:not(.light) &:not(.light),
-  html.theme-dark &:not(.light)    // Brave Search
+  :root:not(.light) body.is-pc &:not(.light), // Brave Search
+  html.theme-dark &:not(.light),      // Searx
+  html.theme_dark &:not(.light)       // Kagi
     {
       @include dark-styling;
     }

scss/variables.scss

@@ -42,4 +42,11 @@ $brave-bg: #1e2028;
 $searx-bg-dark: #202124;
 $searx-border-color-dark: #3c4043;
 
+
+$kagi-bg: #282828;
+$kagi-border-color: #dfe1e5;
+
+$kagi-bg-dark: #262837;
+$kagi-border-color-dark: rgba(229, 229, 229, 0.2);
+
 $primary-color: #5755d9;

src/options.svelte

@@ -14,6 +14,7 @@
   let themeGoogle;
   let themeBrave;
   let themeSearx;
+  let themeKagi
   let toMiniflux;
   let isSuccess;
   let isError;
@@ -28,6 +29,7 @@
     themeDuckduckgo: 'auto',
     themeBrave: 'auto',
     themeSearx: 'auto',
+    themeKagi : 'auto',
     toMiniflux: false,
   };
 
@@ -47,6 +49,7 @@
     themeGoogle = mergedConfig.themeGoogle;
     themeBrave = mergedConfig.themeBrave;
     themeSearx = mergedConfig.themeSearx;
+    themeKagi = mergedConfig.themeKagi;
     toMiniflux = mergedConfig.toMiniflux;
   }
 
@@ -218,6 +221,21 @@
           <i class="form-icon" />auto
         </label>
       </div>
+      <div class="form-group p-relative clearfix">
+        <div class="form-label float-left">Kagi Search</div>
+        <label class="form-radio form-inline float-right">
+          <input type="radio" bind:group={themeKagi} value="light" />
+          <i class="form-icon" />light
+        </label>
+        <label class="form-radio form-inline float-right">
+          <input type="radio" bind:group={themeKagi} value="dark" />
+          <i class="form-icon" />dark
+        </label>
+        <label class="form-radio form-inline float-right">
+          <input type="radio" bind:group={themeKagi} 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

@@ -17,25 +17,27 @@ function escapeHTML(str) {
 
 const browser = getBrowser();
 
-const port = browser.runtime.connect({ name: "port-from-cs" });
+const port = browser.runtime.connect({ name: 'port-from-cs' });
 let searchEngine;
 if (document.location.hostname.match(/duckduckgo/)) {
   searchEngine = 'duckduckgo';
 } else if (document.location.hostname.match(/google/)) {
-  searchEngine = "google";
+  searchEngine = 'google';
 } else if (document.location.hostname.match(/search\.brave\.com/)) {
-  searchEngine = "brave";
+  searchEngine = 'brave';
+} else if (document.location.hostname.match(/kagi\.com/)) {
+  searchEngine = 'kagi';
 } else if (document.location.href.match(/http.?:\/\/.+\/search/)) {
-  searchEngine = "searx";
+  searchEngine = 'searx';
 } else {
-  console.debug("Linkding-Injector extension: no search engine found.");
+  console.debug('Miniflux-Injector extension: no search engine found.');
 }
 
 // When background script answers with results, construct html for the result box
 port.onMessage.addListener(function (m) {
   const parser = new DOMParser();
   let themeClass;
-  let htmlString = "";
+  let htmlString = '';
   let html;
 
   // In case we don't get results, but a message from the background script,
@@ -72,12 +74,13 @@ port.onMessage.addListener(function (m) {
       google: m.config.themeGoogle,
       brave: m.config.themeBrave,
       searx: m.config.themeSearx,
+      kagi: m.config.themeKagi,
     };
 
     const theme = themes[searchEngine];
 
-    if (theme == "auto") {
-      themeClass = ""; // automatic theme detection
+    if (theme == 'auto') {
+      themeClass = ''; // automatic theme detection
     } else {
       themeClass = theme; // "dark" for dark theme, "light" for light theme
     }
@@ -92,7 +95,7 @@ port.onMessage.addListener(function (m) {
       <div id="navbar">
         <span id="mf-logo">  
           <img src=${browser.runtime.getURL(
-            (searchEngine === 'google' || searchEngine === 'searx')
+            searchEngine === 'google' || searchEngine === 'searx'
               ? 'icons/logo_full_google.svg'
               : 'icons/logo_full.svg'
           )} alt="miniflux injector"/>
@@ -144,30 +147,31 @@ port.onMessage.addListener(function (m) {
   // Finding the sidebar
 
   const sidebarSelectors = {
-    duckduckgo: "section[data-area=sidebar]",
-    google: "#rhs",
-    brave: "#side-right",
-    searx: "#sidebar",
+    duckduckgo: 'section[data-area=sidebar]',
+    google: '#rhs',
+    brave: '#side-right',
+    searx: '#sidebar',
+    kagi: '.right-content-box',
   };
   const sidebarSelector = sidebarSelectors[searchEngine];
   let sidebar = document.querySelector(sidebarSelector);
 
   // Google completely omits the sidebar container if there is no content.
   // We need to add it manually before injection
-  if (searchEngine === "google" && sidebar === null) {
+  if (searchEngine === 'google' && sidebar === null) {
     let sidebarContainerString = `
     <div id="rhs" class="TQc1id hSOk2e rhstc4"></div>`;
     let sidebarContainer = parser.parseFromString(
       sidebarContainerString,
-      "text/html"
+      'text/html'
     );
-    let container = document.querySelector("#rcnt");
-    container.appendChild(sidebarContainer.body.querySelector("div"));
-    sidebar = document.querySelector("#rhs");
+    let container = document.querySelector('#rcnt');
+    container.appendChild(sidebarContainer.body.querySelector('div'));
+    sidebar = document.querySelector('#rhs');
   }
 
   // Convert the html string into a DOM document
-  html = parser.parseFromString(htmlString, "text/html");
+  html = parser.parseFromString(htmlString, 'text/html');
   // The actual injection
   if (!document.querySelector('#bookmark-list-container')) {
     sidebar.prepend(html.body.querySelector('div'));
@@ -186,8 +190,8 @@ port.onMessage.addListener(function (m) {
 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);
+if (searchEngine === 'searx') {
+  searchTerm = escapeHTML(document.querySelector('input#q').value);
 }
 
 port.postMessage({ searchTerm: searchTerm });