Initial

package.json

@@ -100,7 +100,8 @@
       "storage",
       "scripting",
       "webNavigation",
-      "tabs"
+      "tabs",
+      "nativeMessaging"
     ],
     "host_permissions": [
       "https://utdallas.collegescheduler.com/terms/*/courses/*",

src/background.ts

@@ -1,6 +1,6 @@
 import { Storage } from '@plasmohq/storage';
 
-import { CourseHeader, scrapeCourseData } from '~content';
+import { CourseHeader, listenForTableChange, scrapeCourseData } from '~content';
 
 export interface ShowCourseTabPayload {
   header: CourseHeader;
@@ -16,6 +16,7 @@ const storage = new Storage();
 
 /** Injects the content script if we hit a course page */
 chrome.webNavigation.onHistoryStateUpdated.addListener((details) => {
+  console.log('hello');
   if (
     /^.*:\/\/utdallas\.collegescheduler\.com\/terms\/.*\/courses\/.+$/.test(
       details.url,
@@ -38,6 +39,13 @@ chrome.webNavigation.onHistoryStateUpdated.addListener((details) => {
         }
       },
     );
+    chrome.tabs.sendMessage(details.tabId, 'disconnect');
+    chrome.scripting.executeScript({
+      target: {
+        tabId: details.tabId,
+      },
+      func: listenForTableChange,
+    });
     chrome.action.setBadgeText({ text: '!' });
     chrome.action.setBadgeBackgroundColor({ color: 'green' });
     courseTabId = details.tabId;
@@ -48,6 +56,29 @@ chrome.webNavigation.onHistoryStateUpdated.addListener((details) => {
   }
 });
 
+chrome.runtime.onMessage.addListener(function (message) {
+  if (message === 'tableChange') {
+    console.log('hi');
+    chrome.scripting.executeScript(
+      {
+        target: {
+          tabId: courseTabId,
+        },
+        // content script injection only works reliably on the prod packaged extension
+        // b/c of the plasmo dev server connections
+        func: scrapeCourseData,
+      },
+      async function (resolve) {
+        if (resolve && resolve[0] && resolve[0].result) {
+          const result: ShowCourseTabPayload = resolve[0].result;
+          scrapedCourseData = result;
+          await storage.set('scrapedCourseData', scrapedCourseData);
+        }
+      },
+    );
+  }
+});
+
 /** Sets the icon to be active if we're on a course tab */
 chrome.tabs.onActivated.addListener(async () => {
   const cachedTabUrl: string = await storage.get('courseTabUrl');

src/content.ts

@@ -91,3 +91,28 @@ export async function scrapeCourseData() {
     return [...new Set(professors)];
   }
 }
+
+export async function listenForTableChange() {
+  const observer = new MutationObserver((mutationsList) => {
+    for (const mutation of mutationsList) {
+      if (
+        mutation.type === 'attributes' &&
+        mutation.attributeName === 'class'
+      ) {
+        if (mutation.target.classList.contains('active')) {
+          console.log(mutation.target.innerText.split(' ')[0]);
+          chrome.runtime.sendMessage('tableChange');
+        }
+      }
+    }
+  });
+  observer.observe(document.body, {
+    attributes: true,
+    subtree: true,
+  });
+  chrome.runtime.onMessage.addListener(function (message) {
+    if (message === 'disconnect') {
+      observer.disconnect();
+    }
+  });
+}