Link colors + popup + layout fix + donations

src/assets/global.css

@@ -5,15 +5,20 @@
     /* max-width: 500px;
     min-width: 460px;
     width: 30vw; */
-    width: 500px;
+    width: 500px !important;
     overflow-y: auto;
     /* padding-left: 6rem; */
     /* padding-right: 3rem; */
-    font-size: max(0.9rem, 15px);
-    margin-bottom: 1em;
+    font-size: max(0.9rem, 14px) !important;
+    margin-bottom: 2em;
     font-size: inherit;
 }
 
+.mrrContainer > * {
+    width: auto !important;
+    margin-bottom: 2em;
+}
+
 .mrrContainer h1 { font-size: 1.8em; line-height: 1.2em; font-weight: normal; }
 .mrrContainer h2 { font-size: 1.6em; line-height: 1.2em; font-weight: normal; }
 .mrrContainer h3 { font-size: 1.3em; line-height: 1.2em; font-weight: normal; }
@@ -36,6 +41,7 @@
 
 .mrrContainer a {
     text-decoration: none;
+    color: rgb(var(--mrr-link-color));
 }
 .mrrContainer a:hover {
     text-decoration: underline;

src/content/duckduckgohandler.ts

@@ -19,7 +19,6 @@ registerHandler({
     setupContainer: (): HTMLElement => {
         const sidebar = document.querySelector(".results--sidebar") as HTMLElement
         sidebar.style.maxWidth = "min-content"
-        console.log(window.innerWidth);
 
         if (window.innerWidth <= 1480) sidebar.style.marginLeft = "calc(var(--max-content-width) + 20px)"
 
@@ -40,8 +39,21 @@ registerHandler({
         const rgb = searchInputColor.match(/\d+/g)!
                                     .map((value) => parseInt(value))
 
-        return {
+        const link = document.querySelector('#links h2 a')
+        const linkColor = window.getComputedStyle(link).getPropertyValue("color")
+
+        const linkRgb = linkColor.match(/\d+/g)!
+                                    .map((value) => parseInt(value))
+
+                                    return {
             '--mrr-color': rgb.join(", "),
+            '--mrr-link-color': linkRgb.join(", "),
         }
+    },
+
+    filteredSearchUrl: (currentUrl: URL, triggerHost: string): URL => {
+        currentUrl.searchParams.set("q", currentUrl.searchParams.get("q") + ' site:' + triggerHost)
+
+        return currentUrl
     }
 })

src/content/googlehandler.ts

@@ -6,12 +6,17 @@ registerHandler({
 
         const links: URL[] = []
 
-        if (resultsElement != null) {
-            [...resultsElement.children].forEach((e) => {
-                const link = e.querySelector("a")
-                if (link != null) links.push(new URL(link.href));
-            })
-        }
+        // if (resultsElement != null) {
+        //     [...resultsElement.children].forEach((e) => {
+        //         const link = e.querySelector("a")
+        //         if (link != null) links.push(new URL(link.href));
+        //     })
+        // }
+        // const links = []
+
+        document.querySelectorAll("#rso div:has(cite) a:has(h3)").forEach((node: HTMLLinkElement) => {
+            links.push(new URL(node.href))
+        })
 
         return links
     },
@@ -32,10 +37,11 @@ registerHandler({
             rcnt.style.flexWrap = "initial";
         }
 
-        mrrContainer.style.paddingLeft = "1.5rem"
+        mrrContainer.style.paddingLeft = "0"
+        mrrContainer.style.marginLeft = "2rem"
         mrrContainer.classList.add("mrrContainer")
 
-        rcnt.appendChild(mrrContainer as Node)
+        rcnt.append(mrrContainer as Node)
 
         return mrrContainer
     },
@@ -46,8 +52,21 @@ registerHandler({
         const rgb = bodyColor.match(/\d+/g)!
                              .map((value) => parseInt(value))
 
+        const link = document.querySelector('#rso .g a h3')
+        const linkColor = window.getComputedStyle(link).getPropertyValue("color")
+
+        const linkRgb = linkColor.match(/\d+/g)!
+                                    .map((value) => parseInt(value))
+
         return {
             '--mrr-color': rgb.join(", "),
+            '--mrr-link-color': linkRgb.join(", "),
         }
+    },
+
+    filteredSearchUrl: (currentUrl: URL, triggerHost: string): URL => {
+        currentUrl.searchParams.set("q", currentUrl.searchParams.get("q") + ' site:' + triggerHost)
+
+        return currentUrl
     }
 })

src/content/searxhandler.ts

@@ -32,8 +32,21 @@ registerHandler({
         const rgb = searchInputColor.match(/\d+/g)!
                                     .map((value) => parseInt(value))
 
-        return {
+        const link = document.querySelector('#urls .result > h3 > a')
+        const linkColor = window.getComputedStyle(link).getPropertyValue("color")
+
+        const linkRgb = linkColor.match(/\d+/g)!
+                                    .map((value) => parseInt(value))
+
+                                    return {
             '--mrr-color': rgb.join(", "),
+            '--mrr-link-color': linkRgb.join(", "),
         }
+    },
+
+    filteredSearchUrl: (currentUrl: URL, triggerHost: string): URL => {
+        currentUrl.searchParams.set("q", currentUrl.searchParams.get("q") + ' site:' + triggerHost)
+
+        return currentUrl
     }
 })

src/content/startpagehandler.ts

@@ -33,10 +33,22 @@ registerHandler({
         const rgb = searchInputColor.match(/\d+/g)!
                                     .map((value) => parseInt(value))
 
-        // ADD LINK COLORS TO THEME
+        const link = document.querySelector('.result-link > h3')
+        const linkColor = window.getComputedStyle(link).getPropertyValue("color")
+
+        const linkRgb = linkColor.match(/\d+/g)!
+                                    .map((value) => parseInt(value))
 
-        return {
+                                    return {
             '--mrr-color': rgb.join(", "),
+            '--mrr-link-color': linkRgb.join(", "),
         }
+    },
+
+    filteredSearchUrl: (currentUrl: URL, triggerHost: string): URL => {
+        let searchInput = document.getElementById("q") as HTMLInputElement
+        currentUrl.searchParams.set("q", searchInput.value + ' site:' + triggerHost)
+
+        return currentUrl
     }
 })

src/lib/registerhandler.ts

@@ -3,53 +3,121 @@ import 'virtual:windi-components.css';
 import 'virtual:windi-utilities.css';
 import '../assets/global.css';
 
-import type { PlatformHandler } from "./types";
+import type { PlatformHandler, RichResult } from "./types";
 
 import StackExchange from "../richresults/stackexchange/StackExchange";
 import Reddit from "../richresults/reddit/Reddit";
 
 const RICH_RESULTS = [StackExchange, Reddit]
 
-export async function registerHandler(platform: PlatformHandler) {
-    const results = await platform.getResultUrls()
+async function mountResult(richResult: RichResult, url: URL, platform: PlatformHandler) {
+    const theme = platform.getTheme()
+    const mrrColor = theme['--mrr-color']
+    const rgb = mrrColor.split(', ').map(s => parseInt(s))
+
+    const isDark = rgb[0]+rgb[1]+rgb[2] > 130*3
+
+    var hljsCss = document.createElement("link");
+    hljsCss.rel = "stylesheet";
+    hljsCss.href = chrome.runtime.getURL(isDark ? 'src/assets/hljs/github-dark.css' : 'src/assets/hljs/github.css');
+
+    document.head.appendChild(hljsCss);
+
+    for (const [key, value] of Object.entries(theme)) {
+        document.body.style.setProperty(key, value);
+    }
+
+    const container = platform.setupContainer()
+    if (container == null) throw new Error("Container couldn't be created")
 
-    urlLoop:    
+    const innerContainer = document.createElement("div")
+    container.prepend(innerContainer)
+
+    container.style.color = `rgb(${mrrColor})`
+
+    // mount
+    new richResult.component({ target: innerContainer, props: { url } })
+}
+
+function inIframe () {
+    try {
+        return window.self !== window.top;
+    } catch (e) {
+        return true;
+    }
+}
+
+async function checkResultsAndMount(results: URL[], platform: PlatformHandler): Promise<Boolean> {
     for (const url of results) {
-
-        resultLoop:
         for (const richResult of RICH_RESULTS) {
-
             if (richResult.match(url)) {
-                // setup
-                const theme = platform.getTheme()
-                const mrrColor = theme['--mrr-color']
-                const rgb = mrrColor.split(', ').map(s => parseInt(s))
-
-                const isDark = rgb[0]+rgb[1]+rgb[2] > 130*3
+                await mountResult(richResult, url, platform)
+                return true;
+            }
+        }    
+    }
 
-                var hljsCss = document.createElement("link");
-                hljsCss.rel = "stylesheet";
-                hljsCss.href = chrome.runtime.getURL(isDark ? 'src/assets/hljs/github-dark.css' : 'src/assets/hljs/github.css');
-
-                document.head.appendChild(hljsCss);
+    return false;
+}
 
-                for (const [key, value] of Object.entries(theme)) {
-                    document.body.style.setProperty(key, value);
-                }
-
-                const container = platform.setupContainer()
-
-                if (container == null) return
-
-                container.style.color = `rgb(${mrrColor})`
+export async function registerHandler(platform: PlatformHandler) {
+    const results = await platform.getResultUrls()
+
+    if (inIframe()){
+        window.top.postMessage({
+            results: results.map(url => url.href)
+        })
+        return
+    }
+
+    let mounted = await checkResultsAndMount(results, platform);
+
+    if (mounted) return
 
-                // mount
-                new richResult.component({ target: container, props: { url } })
+
+
+    let innerSearchFilterHost: string
+
+    richResultLoop:
+    for (const richResult of RICH_RESULTS) {
+        for (const host in richResult.triggers) {
+            const triggerHosts = richResult.triggers[host];
+            for (const result of results) {
+                const hostname = result.hostname.startsWith('www.') ? result.hostname.substring(4) : result.hostname
 
-                break urlLoop;
-            } else {
-                continue resultLoop;
+                if (triggerHosts.indexOf(hostname) != -1) {
+                    innerSearchFilterHost = host
+                    break richResultLoop;
+                }
             }
-        }    
+        }
     }
+
+    if (innerSearchFilterHost == null) return 
+
+    // Inner search
+    let innerSearch = document.createElement('iframe')
+
+    const innerUrl = platform.filteredSearchUrl(new URL(window.location.href), innerSearchFilterHost);
+
+    innerSearch.src = innerUrl.href
+
+    innerSearch.style.display = 'none'
+    document.body.appendChild(innerSearch)
+
+    async function listener(msg) {
+        if (mounted) return
+
+        if (typeof msg.data != 'object' || !("results" in msg.data)) {
+            return
+        }
+
+        const iframeResults = msg.data.results.map(href => new URL(href))
+        mounted = await checkResultsAndMount(iframeResults, platform)
+
+        innerSearch.remove()
+        window.removeEventListener('message', listener)
+    }
+
+    window.addEventListener('message', listener)
 }

src/lib/types.ts

@@ -4,9 +4,11 @@ export interface PlatformHandler {
     getResultUrls: () => Promise<URL[]>,
     setupContainer: () => HTMLElement | null,
     getTheme: () => {[key: string]: any},
+    filteredSearchUrl: (currentUrl: URL, triggerHost: string) => URL
 }
 
 export interface RichResult {
     match: (url: URL) => boolean,
     component: ComponentType,
+    triggers: {[host: string]: Array<string>}
 }

src/manifest.ts

@@ -16,22 +16,29 @@ export default defineManifest({
     service_worker: 'src/background/main.ts',
     type: 'module',
   },
+  action: {
+    default_popup: "src/popup/index.html"
+  },
   content_scripts: [
     {
       matches: ['*://www.google.com/search?q=*'],
       js: ['src/content/googlehandler.ts'],
+      all_frames: true,
     },
     {
       matches: ['*://www.startpage.com/sp/search', '*://www.startpage.com/sp/search*', '*://www.startpage.com/do/search', '*://www.startpage.com/do/search*'],
       js: ['src/content/startpagehandler.ts'],
+      all_frames: true,
     },
     {
       matches: ['*://duckduckgo.com/?q=*'],
       js: ['src/content/duckduckgohandler.ts'],
+      all_frames: true,
     },
     {
       matches: ['*://searx.tiekoetter.com/search?q=*'],
       js: ['src/content/searxhandler.ts'],
+      all_frames: true,
     },
   ],
   web_accessible_resources: [