prj1: Ultra Violet Text Apr 2024

Hackathon

I led the front-end development of a Chrome extension designed to detect and highlight persuasive language on webpages, enhancing user awareness and interaction with digital content. My work centered on building a custom HTML parser using a depth-first pre-order traversal algorithm to efficiently identify top-level tags that typically contain text. By utilizing a NodeIterator, I was able to perform targeted mutations on text nodes, ensuring that the extension could accurately identify and process relevant content.

One of the most challenging aspects of the project was tracking and responding to DOM mutations in real time. Initially, the extension only highlighted content from the initial page load, which proved insufficient for dynamic sites that load content asynchronously or feature interactive elements like paginated information and expandable comments. To overcome this, I implemented a MutationObserver to monitor changes and update highlights as new elements were introduced. This approach, however, presented its own challenges. Modifications triggered by the MutationObserver occasionally led to an endless recursive loop, as each mutation spawned further observations. I resolved this issue by constraining the mutations to only the nodes that required highlighting and by checking for pre-existing highlighted elements using their class names, effectively breaking the recursive cycle.

In addition to solving DOM mutation challenges, I addressed complex race conditions by employing a promise queue paired with an event listener/subscriber system to manage asynchronous updates. This strategy prevented recursive back-end API calls during rapid DOM changes, ensuring that the extension remained responsive.

In conclusion, this project enhanced my skills in dynamic DOM manipulation.