Firefox fix (#61)

* realBrowser

* update plasmo to 0.85.2

* Seperate firefox dev

* fix instructor names not loading

* move background file into background folder

* add permission request tab

* Pretty permissions tag

* invoke popup on install

* Host changes

* add check for permissions when popup opens

* clean up the styling on permission request popup

* Remove console logs and empty className

---------

Co-authored-by: Ethan Bickel <[email protected]>

package.json

@@ -7,6 +7,7 @@
   "packageManager": "[email protected]",
   "scripts": {
     "dev": "plasmo dev",
+    "dev:firefox": "plasmo dev --target=firefox-mv3",
     "build": "plasmo build",
     "package": "plasmo package",
     "format": "prettier --write .",
@@ -20,7 +21,7 @@
     "@plasmohq/storage": "^1.3.1",
     "apexcharts": "^3.37.1",
     "next": "^13.1.5",
-    "plasmo": "^0.67.3",
+    "plasmo": "^0.85.2",
     "react": "18.2.0",
     "react-apexcharts": "^1.4.0",
     "react-dom": "18.2.0",
@@ -104,9 +105,9 @@
       "nativeMessaging"
     ],
     "host_permissions": [
-      "https://utdallas.collegescheduler.com/terms/*/courses/*",
-      "https://www.ratemyprofessors.com/",
-      "https://trends.utdnebula.com/"
+      "https://utdallas.collegescheduler.com/*",
+      "https://www.ratemyprofessors.com/*",
+      "https://trends.utdnebula.com/*"
     ],
     "browser_specific_settings": {
       "gecko": {

src/background.ts → src/background/index.ts

@@ -1,6 +1,7 @@
 import { Storage } from '@plasmohq/storage';
 
 import { CourseHeader, listenForTableChange, scrapeCourseData } from '~content';
+import { neededOrigins } from '~data/config';
 
 export interface ShowCourseTabPayload {
   header: CourseHeader;
@@ -14,15 +15,17 @@ let scrapedCourseData: ShowCourseTabPayload = null;
 // for persistent state
 const storage = new Storage();
 
+const realBrowser = process.env.PLASMO_BROWSER === 'chrome' ? chrome : browser;
+
 /** Injects the content script if we hit a course page */
-chrome.webNavigation.onHistoryStateUpdated.addListener((details) => {
+realBrowser.webNavigation.onHistoryStateUpdated.addListener((details) => {
   if (
     /^.*:\/\/utdallas\.collegescheduler\.com\/terms\/.*\/courses\/.+$/.test(
       details.url,
     )
   ) {
     //Scrape data
-    chrome.scripting.executeScript(
+    realBrowser.scripting.executeScript(
       {
         target: {
           tabId: details.tabId,
@@ -40,28 +43,28 @@ chrome.webNavigation.onHistoryStateUpdated.addListener((details) => {
       },
     );
     //Listen for table change to rescrape data
-    chrome.tabs.sendMessage(details.tabId, 'disconnectObserver');
-    chrome.scripting.executeScript({
+    realBrowser.tabs.sendMessage(details.tabId, 'disconnectObserver');
+    realBrowser.scripting.executeScript({
       target: {
         tabId: details.tabId,
       },
       func: listenForTableChange,
     });
     //Store tab info
-    chrome.action.setBadgeText({ text: '!' });
-    chrome.action.setBadgeBackgroundColor({ color: 'green' });
+    realBrowser.action.setBadgeText({ text: '!' });
+    realBrowser.action.setBadgeBackgroundColor({ color: 'green' });
     courseTabId = details.tabId;
     storage.set('courseTabId', courseTabId);
     storage.set('courseTabUrl', details.url);
   } else {
-    chrome.action.setBadgeText({ text: '' });
+    realBrowser.action.setBadgeText({ text: '' });
   }
 });
 
 /** Rescrape data on table change */
-chrome.runtime.onMessage.addListener(function (message) {
+realBrowser.runtime.onMessage.addListener(function (message) {
   if (message === 'tableChange') {
-    chrome.scripting.executeScript(
+    realBrowser.scripting.executeScript(
       {
         target: {
           tabId: courseTabId,
@@ -80,14 +83,32 @@ chrome.runtime.onMessage.addListener(function (message) {
 });
 
 /** Sets the icon to be active if we're on a course tab */
-chrome.tabs.onActivated.addListener(async () => {
+realBrowser.tabs.onActivated.addListener(async () => {
   const cachedTabUrl: string = await storage.get('courseTabUrl');
   const currentTabUrl: string = (await getCurrentTab()).url;
   if (cachedTabUrl === currentTabUrl) {
-    chrome.action.setBadgeText({ text: '!' });
-    chrome.action.setBadgeBackgroundColor({ color: 'green' });
+    realBrowser.action.setBadgeText({ text: '!' });
+    realBrowser.action.setBadgeBackgroundColor({ color: 'green' });
   } else {
-    chrome.action.setBadgeText({ text: '' });
+    realBrowser.action.setBadgeText({ text: '' });
+  }
+});
+
+realBrowser.runtime.onInstalled.addListener(async () => {
+  const currentPermissions: { permissions: string[]; origins: string[] } =
+    await realBrowser.permissions.getAll();
+  if (
+    neededOrigins.filter(
+      (origin) => !currentPermissions.origins.includes(origin),
+    ).length !== 0
+  ) {
+    const popupURL = await realBrowser.runtime.getURL('tabs/permissions.html');
+    realBrowser.windows.create({
+      url: popupURL,
+      type: 'popup',
+      width: 550,
+      height: 250,
+    });
   }
 });
 
@@ -103,6 +124,6 @@ export async function getScrapedCourseData() {
 async function getCurrentTab() {
   const queryOptions = { active: true, lastFocusedWindow: true };
   // `tab` will either be a `tabs.Tab` instance or `undefined`.
-  const [tab] = await chrome.tabs.query(queryOptions);
+  const [tab] = await realBrowser.tabs.query(queryOptions);
   return tab;
 }

src/background/messages/getScrapeData.ts

@@ -1,6 +1,6 @@
 import type { PlasmoMessaging } from '@plasmohq/messaging';
 
-import { getScrapedCourseData } from '../../background';
+import { getScrapedCourseData } from '..';
 
 const handler: PlasmoMessaging.MessageHandler = async (req, res) => {
   const data = await getScrapedCourseData();

src/content.ts

@@ -1,11 +1,14 @@
+import type { PlasmoCSConfig } from 'plasmo';
+
 export interface CourseHeader {
   subjectPrefix: string;
   courseNumber: string;
 }
 
 // Plasmo CS config export
-export const config = {
+export const config: PlasmoCSConfig = {
   matches: ['https://utdallas.collegescheduler.com/terms/*/courses/*'],
+  world: 'MAIN',
 };
 
 /**
@@ -97,6 +100,7 @@ export async function scrapeCourseData() {
   }
 }
 
+const realBrowser = process.env.PLASMO_BROWSER === 'chrome' ? chrome : browser;
 /** This listens for clicks on the buttons that switch between the enabled and disabled professor tabs and reports back to background.ts */
 export function listenForTableChange() {
   const observer = new MutationObserver((mutationsList) => {
@@ -107,7 +111,7 @@ export function listenForTableChange() {
       ) {
         //button corresponding to shown table is given an active class
         if (mutation.target.classList.contains('active')) {
-          chrome.runtime.sendMessage('tableChange');
+          realBrowser.runtime.sendMessage('tableChange');
         }
       }
     }
@@ -117,7 +121,7 @@ export function listenForTableChange() {
     subtree: true,
   });
   //remove observer when ordered by backgroud.ts to avoid duplicates
-  chrome.runtime.onMessage.addListener(function (message) {
+  realBrowser.runtime.onMessage.addListener(function (message) {
     if (message === 'disconnectObserver') {
       observer.disconnect();
     }

src/data/config.ts

@@ -13,3 +13,9 @@ export const PROFESSOR_QUERY = {
 
 export const SCHOOL_ID = '1273';
 export const RMP_GRAPHQL_URL = 'https://www.ratemyprofessors.com/graphql';
+
+export const neededOrigins = [
+  'https://utdallas.collegescheduler.com/*',
+  'https://www.ratemyprofessors.com/*',
+  'https://trends.utdnebula.com/*',
+];

src/pages/CoursePage.tsx

@@ -7,7 +7,7 @@ import { Landing } from '~components/Landing';
 import { MiniProfessor } from '~components/MiniProfessor';
 import {
   buildProfessorProfile,
-  ProfessorProfileInterface,
+  type ProfessorProfileInterface,
 } from '~data/builder';
 
 // Example of how to fetch the scraped data from the background script, given that it exists

src/popup.tsx

@@ -4,6 +4,27 @@ import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
 
 import { Routing } from '~/pages';
+import { neededOrigins } from '~data/config';
+
+const realBrowser = process.env.PLASMO_BROWSER === 'chrome' ? chrome : browser;
+async function checkPermissions() {
+  const currentPermissions: { permissions: string[]; origins: string[] } =
+    await realBrowser.permissions.getAll();
+  if (
+    neededOrigins.filter(
+      (origin) => !currentPermissions.origins.includes(origin),
+    ).length !== 0
+  ) {
+    const popupURL = await realBrowser.runtime.getURL('tabs/permissions.html');
+    realBrowser.windows.create({
+      url: popupURL,
+      type: 'popup',
+      width: 550,
+      height: 250,
+    });
+  }
+}
+checkPermissions();
 
 function IndexPopup() {
   return (

src/tabs/permissions.tsx

@@ -0,0 +1,41 @@
+import '~/style.css';
+
+import React, { useState } from 'react';
+
+import { neededOrigins } from '~data/config';
+
+const realBrowser = process.env.PLASMO_BROWSER === 'chrome' ? chrome : browser;
+
+function PermissionsPls() {
+  const [granted, setGranted] = useState(false);
+
+  return (
+    <div>
+      <h1>Sk.edge needs permissions to run</h1>
+      <p>
+        We need access to Schedule Planner and the sources we get our data from.
+      </p>
+      <h2>Please click the button below to grant permissions.</h2>
+      <button
+        className="p-2 bg-blue-dark text-white rounded-lg"
+        onClick={async () => {
+          const response = await realBrowser.permissions.request({
+            origins: neededOrigins,
+          });
+          if (response) {
+            setGranted(true);
+          }
+        }}
+      >
+        Request permissions
+      </button>
+      {granted && (
+        <p>
+          Thank you!
+          <br /> You can close this window now.
+        </p>
+      )}
+    </div>
+  );
+}
+export default PermissionsPls;