Extraction

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.

Extra: 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.