From ba177d0fef7a71492c0369416c948de0ce00e086 Mon Sep 17 00:00:00 2001 From: SevicheCC <91365763+Sevichecc@users.noreply.github.com> Date: Tue, 31 Oct 2023 21:46:50 +0800 Subject: [PATCH] feat: Kagi search supported Co-Authored-By: Fivefold <38764218+Fivefold@users.noreply.github.com> Co-Authored-By: Dan Bush <2723704+danbush@users.noreply.github.com> --- README.md | 3 ++- manifest.json | 11 ++++++++++ scss/injectionBox.scss | 16 +++++++++++++-- scss/variables.scss | 7 +++++++ src/options.svelte | 18 +++++++++++++++++ src/searchInjection.js | 46 +++++++++++++++++++++++------------------- 6 files changed, 77 insertions(+), 24 deletions(-) diff --git a/README.md b/README.md index c71b243..866061c 100644 --- a/README.md +++ b/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 diff --git a/manifest.json b/manifest.json index 668a86b..f319f1f 100644 --- a/manifest.json +++ b/manifest.json @@ -31,6 +31,17 @@ "build/searchInjection.js" ] }, + { + "matches": [ + "*://kagi.com/*" + ], + "css": [ + "build/searchInjection.css" + ], + "js": [ + "build/searchInjection.js" + ] + }, { "matches": [ "*://search.brave.com/*" diff --git a/scss/injectionBox.scss b/scss/injectionBox.scss index f2747ba..4d59427 100644 --- a/scss/injectionBox.scss +++ b/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,6 +178,11 @@ 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; + } } /** @@ -180,6 +190,7 @@ div#bookmark-list-container { 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; } diff --git a/scss/variables.scss b/scss/variables.scss index 6d72adb..728033d 100644 --- a/scss/variables.scss +++ b/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; diff --git a/src/options.svelte b/src/options.svelte index b4dedae..38c5fbf 100644 --- a/src/options.svelte +++ b/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 @@ auto +
+
Kagi Search
+ + + +
† Automatic theme detection may fail with these search engines unless you set a specific theme (not 'system') in the search engine settings. diff --git a/src/searchInjection.js b/src/searchInjection.js index f6e86e3..72c8c1e 100644 --- a/src/searchInjection.js +++ b/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) {