feat: open an injected course page on course block click in popup main (#146)

* feat: Imports to popupcourseblock.tsx

* changing the blocks to accept parameters for clicking functionality which may or may not open the calendar

* put the click parameter in the div of popupcourseblock

* safely calling for onCourseClick in the event it is an undefined function

* handled other calls of popupcourseblock with empty functions for now, and i think popupmain opens calendar now when the course block is clicked

* feat: Testing out passing params to handleOpenCalendar

* url that takes in params to open calendar with params

* further work on url params; from popup main to handleopencalendar to calendar using urlsearchparams

* feat: small calendar shifting after merge:

* fix: merge handling and then references to new click parameter

* fix: optional params

* feat: split into two functions instead

* fix: changing proper usage of handleOpenCalendarWithCourse

* feat: show course popup when calendar opened

* chore: remove useless commented out code

* feat: close popup on calendar nav, fix build errors, remove useless comments/logs

* chore: chromatic so dumb fr why aren't you chrome

* fix: refactor listeners to build properly

* feat: exit early when not in chrome extension

* fix: function return type

* fix: function return type x2

* fix: generic type for useState

* refactor: extract calendar opening on click functions

* refactor: chrome runtime mock, omit question mark if no query params, rename calendar event

* refactor: move course click event into component directly instead of prop

* refactor: removed useless wrapper functions, made popup course block more accessible

* fix: i dont wanna talk about it

---------

Co-authored-by: Samuel Gunter <sgunter@utexas.edu>

src/views/components/common/ExtensionRoot/ExtensionRoot.tsx

@@ -1,17 +1,35 @@
 // import '@unocss/reset/tailwind-compat.css';
 import 'uno.css';
 
-import React from 'react';
+import type TabInfoMessages from '@shared/messages/TabInfoMessages';
+import { MessageListener } from 'chrome-extension-toolkit';
+import React, { useEffect } from 'react';
 
 import styles from './ExtensionRoot.module.scss';
 
 interface Props {
     testId?: string;
 }
+
 /**
  * A wrapper component for the extension elements that adds some basic styling to them
  */
 export default function ExtensionRoot(props: React.PropsWithChildren<Props>): JSX.Element {
+    useEffect(() => {
+        const tabInfoListener = new MessageListener<TabInfoMessages>({
+            getTabInfo: ({ sendResponse }) => {
+                sendResponse({
+                    url: window.location.href,
+                    title: document.title,
+                });
+            },
+        });
+
+        tabInfoListener.listen();
+
+        return () => tabInfoListener.unlisten();
+    }, []);
+
     return (
         <div className={styles.extensionRoot} data-testid={props.testId}>
             {props.children}