Performance improvements & better comments

Author: hslarson

src/background.js

@@ -1,50 +1,58 @@
-const PRINT_URL = "my.sa.ucsb.edu/gold/UnofficialTranscript.aspx"
+const PRINT_HOSTNAME = "my.sa.ucsb.edu"
+const PRINT_PATH = "/gold/UnofficialTranscript.aspx"
 
 
 // Called on tab updates
-async function tab_update_callback(tabId, changeInfo, tab) {
-	
-	// A tab finished loading
-	if (changeInfo.status == "complete") {
-		
-		// The tab is a transcript print window
-		if (String(tab.url).slice( String(tab.url).indexOf("://")+3 ).startsWith(PRINT_URL)) {
-			console.log("Transcript Window Detected. Injecting Scripts..")
-
-			inject_script(tabId)
-		}
-	}
+function tab_update_callback(tabId, changeInfo, tab) {
+    try {
+        // Check if the tab finished loading
+        if (changeInfo.status === "complete" && tab.url) {
+            // Check if URL matches GOLD's unofficial transcript page
+            const url = new URL(tab.url);
+            if (url.hostname === PRINT_HOSTNAME && url.pathname === PRINT_PATH) {
+                // Insert custom script & stylesheet
+                console.info("Transcript Window Detected. Injecting Scripts...");
+                inject_script(tabId)
+            }
+        }
+    } catch (error) {
+        console.error("Error in tab_update_callback:", error);
+    }
 }
-
-
-// Inject a script into some html file
-async function inject_script(tabId) {
-	chrome.scripting.executeScript(
-		{
-			files: ["inject.js"],
-			target: {tabId: tabId}
-		}, 
-		insert_css.bind(null, tabId) // Pass tabId as additional argument
-	)
+ 
+
+// Inject JavaScript into the transcript webpage
+function inject_script(tabId) {
+    chrome.scripting.executeScript({
+        files: ["inject.js"],
+        target: {tabId: tabId}
+    }, 
+    (result) => {
+        if (chrome.runtime.lastError) {
+            console.error("JS Injection Failed (Runtime Error):", chrome.runtime.lastError);
+        } else if (!result || result.length === 0 || result[0].result !== "ok") {
+            console.error("JS Injection Failed (Bad Result):", result);
+        } else {
+            console.info("JS Injection Succeeded. Applying CSS...");
+            insert_css(tabId);
+        }
+    });
 }
 
 
-// Apply stylesheet if JS injection was successful
-async function insert_css(tabId, result) {
-	
-	// Check injection result
-	if ((typeof result) == "object" && result.length && result[0].result == 'ok') {
-		console.log("JS Injection Succeeded. Applying CSS..")
-
-		// Apply CSS
-		chrome.scripting.insertCSS({
-			files: ["styles.css"],
-			target:  {tabId: tabId}
-		})
-	}
-	else {
-		console.log("JS Injection Failed. Aborting..")
-	}
+// Load custom CSS stylesheet
+function insert_css(tabId) {
+    chrome.scripting.insertCSS({
+        files: ["styles.css"],
+        target: { tabId: tabId }
+    }, 
+    () => {
+        if (chrome.runtime.lastError) {
+            console.error("CSS Injection Failed ():", chrome.runtime.lastError);
+        } else {
+            console.info("CSS Injection Completed. Ready to Print!");
+        }
+    });
 }
 
 

src/inject.js

@@ -1,30 +1,46 @@
-// Perform any preprocessing on the html file before applying stylesheet
-
-
-// Make sure the major table spans both columns
-var major_row = document.querySelector("#content > table:nth-of-type(1) tr:has(> td > #pageContent_MajorList)")
-while (major_row.children.length) {
-
-    var child = major_row.children[0]
-    var major_list = child.querySelector("#pageContent_MajorList")
-
-    if (major_list) {
-        child.setAttribute("colspan", 2)
-        child.classList.add("major-table")
-
-        major_row.innerHTML = child.outerHTML
-        break;
-    }
-
-    major_row.removeChild(child)
+// Pre-process the html file before applying stylesheet
+
+function main() {
+    // Find the table that contains degree information
+    // In GOLD, this table doesn't span the width of the screen, even though it should
+    const major_list = document.querySelector("#pageContent_MajorList");
+    if (!major_list) { return "Didn't find element with ID #pageContent_MajorList"; }
+
+    // Find the parent cell of the table
+    const parent_cell = major_list.closest("td");
+    if (!parent_cell) { return "Couldn't find parent cell of major list"; }
+
+    // Modify attribute to allow cell to span row
+    parent_cell.setAttribute("colspan", "2");
+    
+    // Find the parent row of this cell
+    const parent_row = parent_cell.closest("tr");
+    if (!parent_row) { return "Couldn't find parent row of major list"; }
+
+    // Wipe row contents and re-insert the cell we care about
+    parent_row.innerHTML = "";
+    parent_row.appendChild(parent_cell);
+    
+
+    // Replace print buttons
+    // Printing usually opens a pop-out, but we just want to print the page as-is
+    const nav_div = document.querySelector("#pageContent_titleNavDiv > div:not(.title)")
+    if (!nav_div) { return "Couldn't find div containing print buttons"; }
+    nav_div.innerHTML = "<input type=button onclick=window.print() class=gold-button id=print-button value='Print Transcript' />";
+ 
+
+    // Add an ID to timestamp cell for efficient CSS selection
+    const date_text = document.querySelector("#pageContent_currentDateLabel");
+    if (!date_text) { return "Couldn't find timestamp text"; }
+    const date_cell = date_text.closest("td");
+    if (!date_cell) { return "Couldn't find parent cell of timestamp text"; }
+    date_cell.id = "timestampCell"
+
+    return "ok";
 }
 
-
-// Replace print buttons to not create popout window
-var nav_div = document.querySelector("#pageContent_titleNavDiv > div:has(> .gold-button)")
-if (nav_div) {
-    nav_div.innerHTML = "<input type=button onclick=window.print() class=gold-button id=print-button value='Print Transcript' />"
+try {
+    main(); // Invoke main function
+} catch(error) {
+    console.error("Error in inject.js", error);
 }
-
-
-"ok" // This will be returned to callback in background.js

src/manifest.json

@@ -1,6 +1,6 @@
 {
 	"manifest_version": 3,
-	"version": "0.1.0",
+	"version": "0.2.0",
 	"name": "GOLD Transcript Printer",
 	"description": "Produces a better-looking output when printing unofficial transcripts from GOLD",
 	"icons": {

src/styles.css

@@ -1,48 +1,45 @@
-/* Define Style Options for Printing */
+/* Style options specifically for printing */
 @media print {
 
-    #MainForm *:not(#content):not(#content *) {
+    /* Hide everything that isn't inside the content div */
+    #MainForm > :not(#content) {
         display: none!important;
     }
 
-    .gold-button {
+    /* Remove title and welcome message */ 
+    #MainForm > #content > :not(.row) {
         display: none!important;
     }
-    
+
+    /* Hide the nav bar */
     #pageContent_titleNavDiv {
         display: none!important;
     }
 
-    #userLabel {
-        display: none!important;
-    }
-    
+    /* Remove extra whitespace */
     #content {
+        margin:0!important;
         padding:0!important;
     }
-    
-    #content > table:nth-of-type(1) td:has(> #pageContent_currentDateLabel ) {
-        width: 50%!important;
-    }
-
-    #pageContent_currentDateLabel {
-        float: right!important;
-    }
+}
 
-    .page-title {
-        padding-left: 0!important;
-    }
+/* Always applied */
+/* Prevent "University of California, Santa Barbara" text from wrapping*/
+#timestampCell {
+    width: 50%;
+}
 
-    tr:has(> .label) {
-        display: none!important;
-    }
+/* Right-justify timestamp */ 
+#pageContent_currentDateLabel {
+    float: right;
 }
 
-/* Always Applied */
+/* Add some space before degree information */
 #pageContent_MajorList {
     margin-top: 20px;
 }
 
+/* Make print button look pretty */
 #print-button {
     padding: 10px 20px;
 }