Extraction

How SassyNic extract class details from CliC

In SassyNic, the extension will only extract the class details where their DOM DO NOT have these attributes or content:

1. .psc_disabled - normally in CliC, classes that are not able to enroll will be added with this attribute.
2. status === 'Close' - it makes sense to only extract classes where their status === 'Open' as those are the only classes that students are able to enroll into.

How SassyNic detects and nagivates through elements?

Due to service_worker/background scripts and content_scripts each having different behaviors:

• service_worker/background scripts in SassyNic are used to monitor web browser's tabs changes, such as tab's "updated", "refreshed", "closed" info and more. It also uses dynamic script injection with executeScript to interact with DOM's elements as some of the DOM's elements are generated dynamically or restricted by CSP (Content Security Policy).

• content_scripts are pre-injected into the DOM, in SassyNic they are mainly used to interact with DOM's elements by utilising MutationObserver to observe and detect the associated element(s).

• The key concepts of detection(s) and navigation(s) in SassyNic resolves around these 3 things:

  1. Message Passing
  2. MutationObserver
  3. executeScript

Message Passing

In SassyNic,service_worker/background scripts, popup scripts and content_scripts communicates and passing data to each other using Message Passing API, the message(s) usually contains data such as "selected term", "subject/course total", "current extracting index" and more. By using Message Passing for each steps, it's much more easier to debug, implement and also scale the extension.

MutationObserver

In SassyNic, there's a helper function within extraction.js called waitForElement, it utilises a built-in function in JavaScript to watch for changes being made to the DOM (Document Object Model) tree. By implementing this helper function, it reduce redundancy of recreating MutationObserver object manually everytime and offers parameters to setup MutationObserver more easily. (checkout the function's header in extraction.js for more detail information regarding how to use it)

executeScript

In SassyNic chrome.scripting.executeScript / browser.scripting.executeScript (Chrome / Mozilla Firefox) are mainly used to dynamically injecting script(s) into the DOM as some of the element(s) are dynamically generated and some of the elements are restrcited by CSP (Content Security Policy), hence we couldn't interact those elements with content_scripts as they are pre-injected before the DOM is fully loaded.

Promise.race()

In SassyNic extraction.js, there's a part that utilise Promise.race() to take actions accordingly based on the first promise being resolved, as extraction process within SassyNic are not sequential execution.