☰

perplexa

Greasemonkey script to get Perplexity answers within Google search

  1. // ==UserScript==
  2. // @name        perplexa
  3. // @match       https://www.google.com/search*
  4. // @namespace    guebosch
  5. // @version      2024-08-11
  6. // @description  Greasemonkey script to get Perplexity answers within Google search
  7. // @author       guebosch, https://github.com/adtac
  8. // @grant        none
  9. // @license      GPLv3
  10. // ==/UserScript==
  11.  
  12. // Draft: Fix the errors below
  13.  
  14. async function getID() {
  15.     const resp = await fetch("https://www.perplexity.ai/socket.io/?EIO=4&transport=polling", {
  16.         credentials: "include",
  17.     });
  18.     const text = await resp.text();
  19.     const json = JSON.parse(text.substr(text.indexOf("{")));
  20.     return json.sid;
  21. }
  22.  
  23. async function postID(sid) {
  24.     const resp = await fetch("https://www.perplexity.ai/socket.io/?EIO=3&transport=polling&sid=" + sid, {
  25.         method: "POST",
  26.         body: '40{"jwt":"anonymous-ask-user"}',
  27.         credentials: "include",
  28.     });
  29.     return resp.status == 200;
  30. };
  31.  
  32. async function show(query) {
  33.     const root = document.createElement("div");
  34.     root.style.position = "absolute";
  35.     root.style.right = "32px";
  36.     root.style.top = (document.getElementById("appbar").offsetTop + 16) + "px";
  37.     root.style.borderRadius = "4px";
  38.     root.style.background = "white";
  39.     root.style.width = "24rem";
  40.     root.style.border = "1px solid #e0e0e0";
  41.     root.style.padding = "0";
  42.     root.style.margin = "0";
  43.     
  44.     root.style.overflowY = "hidden";
  45.     root.style.minHeight = "6rem";
  46.     root.style.maxHeight = "6rem";
  47.     
  48.     const main = document.createElement("p");
  49.     main.style.fontSize = "13px";
  50.     main.style.position = "relative";
  51.     main.style.padding = "0";
  52.     main.style.margin = "0";
  53.     main.style.padding = "12px 24px";
  54.     root.appendChild(main);
  55.     
  56.     const more = document.createElement("button");
  57.     more.innerText = "Expand";
  58.     more.style.color = "#808080";
  59.     more.style.position = "absolute";
  60.     more.style.top = "2rem";
  61.     more.style.right = "0px";
  62.     more.style.width = "100%";
  63.     more.style.height = "4rem";
  64.     more.style.background = "linear-gradient(180deg, transparent, white 50%)";
  65.     more.style.border = "none";
  66.     more.style.borderRadius = "4px";
  67.     more.style.cursor = "pointer";
  68.     more.style.paddingTop = "2rem";
  69.     more.style.fontSize = "10px";
  70.     root.appendChild(more);
  71.     more.addEventListener("click", () => {
  72.         root.removeChild(more);
  73.         root.style.overflowY = "unset";
  74.         root.style.minHeight = "unset";
  75.         root.style.maxHeight = "unset";
  76.     })
  77.     document.body.appendChild(root);
  78.     
  79.     const sid = await getID();
  80.     await postID(sid);
  81.     const ws = new WebSocket("wss://www.perplexity.ai/socket.io/?EIO=4&transport=websocket&sid=" + sid);
  82.     ws.addEventListener("open", (e) => {
  83.         ws.send("2probe");
  84.         ws.send("5");
  85.         ws.send("421" + JSON.stringify([
  86.             "perplexity_ask",
  87.             query,
  88.             {
  89.                 "version": "2.5",
  90.                 "search_focus": "internet",
  91.                 "mode": "concise",
  92.                 "prompt_source": "user",
  93.                 "query_source": "home",
  94.             },
  95.         ]));
  96.     });
  97.     
  98.     ws.addEventListener("message", (e) => {
  99.         if (e.data == "2") {
  100.             ws.send("3");
  101.             return;
  102.         }
  103.         
  104.         let s = e.data;
  105.         while (/^\d/.test(s)) {
  106.             s = s.substr(1);
  107.         }
  108.         if (s == "") {
  109.             return;
  110.         }
  111.         try { s = JSON.parse(s); } catch (e) {}
  112.         if (Object.prototype.toString.call(s) != "[object Array]") {
  113.             return;
  114.         }
  115.         
  116.         let t = null;
  117.         if (s[0] == "query_progress") {
  118.             t = "query_progress"
  119.             s = s.slice(1);
  120.         }
  121.         
  122.         const { status } = s[0];
  123.         let data = null;
  124.         switch (status) {
  125.             case "pending":
  126.                 data = JSON.parse(s[0].text);
  127.             case "completed":
  128.                 data = JSON.parse(s[0].text);
  129.         }
  130.         
  131.         if (data == null) {
  132.             return;
  133.         }
  134.         
  135.         const p = document.createElement("p");
  136.         main.innerHTML = "";
  137.         main.appendChild(p);
  138.         
  139.         let ans = data.answer;
  140.         while (true) {
  141.             const repl = ans.replace(/(\[\d+\])\./, ".$1"); // "[1]." -> ".[1]" for nicer formatting
  142.             if (repl == ans) {
  143.                 break;
  144.             }
  145.             ans = repl;
  146.         }
  147.         
  148.         while (ans.length > 0) {
  149.             const m = ans.match(/\[\d+\]/);
  150.             let end = ans.length;
  151.             if (m) {
  152.                 end = m.index;
  153.             }
  154.             if (end == 0) {
  155.                 const cite = parseInt(ans.substr(1, ans.indexOf("]")));
  156.                 const { name, url } = data.web_results[cite-1];
  157.                 const a = document.createElement("a");
  158.                 a.style.margin = "4px";
  159.                 a.style.float = "right";
  160.                 a.style.width = "24px";
  161.                 a.style.height = "24px";
  162.                 a.style.outline = "1px solid #f0f0f0";
  163.                 a.style.borderRadius = "4px";
  164.                 a.style.background = "center url(https://www.google.com/s2/favicons?sz=128&domain=" + (new URL(url)).hostname + ")";
  165.                 a.style.backgroundSize = "cover";
  166.                 a.title = name;
  167.                 a.href = url;
  168.                 p.appendChild(a);
  169.                 ans = ans.substr(cite.toString().length + 2)
  170.             } else {
  171.                 const span = document.createElement("span");
  172.                 span.style.width = "calc(100% - 5rem)";
  173.                 span.style.float = "left";
  174.                 span.style.borderRight = "1px solid #f0f0f0";
  175.                 span.style.padding = "4px 1rem 4px 0px";
  176.                 span.style.marginBottom = "1rem";
  177.                 span.innerText = ans.substr(0, end).trim();
  178.                 p.appendChild(span);
  179.                 ans = ans.substr(end);
  180.             }
  181.         }
  182.         
  183.         if (status == "completed") {
  184.             const a = document.createElement("a");
  185.             a.style.margin = "4px";
  186.             a.style.fontSize = "10px";
  187.             a.style.color = "#1d4ed8";
  188.             a.style.width = "24px";
  189.             a.style.height = "24px";
  190.             a.style.border = "1px solid #f0f0f0";
  191.             a.style.borderRadius = "4px";
  192.             a.style.background = "center url(https://www.google.com/s2/favicons?sz=128&domain=perplexity.ai)";
  193.             a.style.backgroundSize = "cover";
  194.             a.href = "https://perplexity.ai/search?q=" + encodeURIComponent(query);
  195.             const el = document.createElement("p");
  196.             el.style.display = "flex";
  197.             el.style.justifyContent = "flex-end";
  198.             el.style.width = "100%";
  199.             el.style.textAlign = "right";
  200.             el.marginTop = "4px";
  201.             el.appendChild(a);
  202.             p.appendChild(el);
  203.             ws.close();
  204.         }
  205.     });
  206. }
  207.  
  208. function main() {
  209.     const search = document.location.search;
  210.     const params = new URLSearchParams(search);
  211.     show(params.get("q"));
  212. }
  213.  
  214. main();