Google Search investigations

content-scripts/components/Navbar/Header.tsx

@@ -2,10 +2,12 @@
 import jsx from "texsaur";
 
 import { AuthSession } from "../../types";
-import HeaderLinks from "./HeaderLinks";
+//import HeaderLinks from "./HeaderLinks";
 import Authentication from "./HeaderAuthentication";
+import SearchBar from "./SearchBar";
 
 //TODO(thePeras): I think we should move this to a separate file dedicated to constants or a folder like `data`
+/*
 const HEADER_LINKS = {
     Estudantes: {
         Bolsas: "web_base.gera_pagina?p_pagina=242366",
@@ -41,7 +43,7 @@ const HEADER_LINKS = {
         "Mais opções": "web_base.gera_pagina?p_pagina=1831",
     },
 };
-
+*/
 interface Props {
     auth?: AuthSession | null;
 }
@@ -55,7 +57,8 @@ const Header = ({ auth = null }: Props) => {
                     alt="FEUP Logo"
                 />
             </a>
-            <HeaderLinks links={HEADER_LINKS} />
+            {/*<HeaderLinks links={HEADER_LINKS} /> */}
+            <SearchBar />
             <Authentication auth={auth} />
         </header>
     );

content-scripts/components/Navbar/SearchBar.tsx

@@ -0,0 +1,30 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import jsx from "texsaur";
+
+const SearchBar = () => {
+    return (
+        <div id="se-search">
+            <div>
+                <select id="se-search-select">
+                    <option value="">Tudo</option>
+                    <option value="student">Estudante</option>
+                    <option value="teacher">Professor</option>
+                </select>
+                <input
+                    type="text"
+                    id="se-search-bar"
+                    placeholder="Pesquisar no Sigarra"
+                />
+            </div>
+            <div
+                className="se-header-link-popover se-popover-open"
+                style={{ padding: "20px", width: "300px" }}
+            >
+                <div class="gcse-searchbox"></div>
+                <div class="gcse-searchresults"></div>
+            </div>
+        </div>
+    );
+};
+
+export default SearchBar;

content-scripts/index.ts

@@ -152,6 +152,13 @@ const init = async (): Promise<void> => {
         }
     }
 
+    //    registerGoogleSearchCallbacks();
+
+    // TODO (thePeras): Refactor this
+    const script = document.createElement("script");
+    script.src = chrome.runtime.getURL("js/cse.js");
+    document.body.appendChild(script);
+
     // we run rememberLogin at last, because it's async
     // TODO (luisd): make a better mechanism for functions that depend on previous
     // steps and might be async

content-scripts/prototype.js

@@ -0,0 +1,62 @@
+const myResultsReadyCallback = function (name, q, promos, results, resultsDiv) {
+    console.log("Executing callback");
+    const makePromoElt = (promo) => {
+        const anchor = document.createElement('a');
+        anchor.href = promo['url'];
+        anchor.target = '_blank';
+        anchor.classList.add('gs-title');
+        const span = document.createElement('span');
+        span.innerHTML = 'Promo: ' + promo['title'];
+        anchor.appendChild(span);
+        return anchor;
+    };
+    const makeResultParts = (result) => {
+        const anchor = document.createElement('a');
+        anchor.href = result['url'];
+        anchor.target = '_blank';
+        anchor.classList.add('gs_title');
+        anchor.appendChild(document.createTextNode(result['visibleUrl']));
+        const span = document.createElement('span');
+        span.innerHTML = ' ' + result['title'];
+        return [anchor, span];
+    };
+
+    const table = document.createElement('table');
+    if (promos) {
+        for (const promo of promos) {
+            const row = table.insertRow(-1);
+            const cell = row.insertCell(-1);
+            cell.appendChild(makePromoElt(promo));
+        }
+        resultsDiv.appendChild(table);
+        resultsDiv.appendChild(document.createElement('br'));
+    }
+    if (results) {
+        const table = document.createElement('table');
+        for (const result of results) {
+            const row = table.insertRow(-1);
+            const cell = row.insertCell(-1);
+            const [anchor, span] = makeResultParts(result);
+            cell.appendChild(anchor);
+            const cell2 = row.insertCell(-1);
+            cell2.appendChild(span);
+        }
+        resultsDiv.appendChild(table);
+    }
+    return true;
+};
+
+const registerGoogleSearchCallbacks = () => {
+    window.__gcse = {
+        //parsetags: "explicit",
+        searchCallbacks: {
+            web: {
+                ready: myResultsReadyCallback,
+            },
+        },
+    };
+    console.log("Registered callbacks");
+    console.log(window.__gcse);
+};
+
+export default registerGoogleSearchCallbacks;

manifest.js

@@ -51,6 +51,7 @@ let manifest = {
                 "css/custom.css",
                 "css/simpler.css",
                 "js/override-functions.js",
+                "js/cse.js",
                 "css/icons.css",
                 "images/publicationWebsiteLogo/*",
                 "images/FEUP.svg",

manifest/base.json

@@ -53,6 +53,7 @@
                 "css/custom.css",
                 "css/simpler.css",
                 "js/override-functions.js",
+                "js/cse.js",
                 "css/icons.css",
                 "images/publicationWebsiteLogo/*",
                 "images/FEUP.svg",