Prototype script to run DOM traversal functions on website

[Aatman Vaidya]

• Write a separate custom script that uses the DOM Traversal functions and works on websites.
  • inject svg icons next to slurs
  • On hovering the icon, show metadata about the slur

[Hardik Pratap Singh]

Hello @aatmanvaidya
Please assign this issue to me..

[Aatman Vaidya]

here are few websites you could use -

• https://en.wikipedia.org/wiki/Crazy_(disambiguation)

(I was majorly able to find websites with very explicit slurs - still trying to find some with slur of low severity, will keep updating this from time to time)

[Hardik Pratap Singh]

Hello @dennyabrain @aatmanvaidya
I have finished writing a script which does the following

• adding SVGs
• show metadata on hovering
• generates uliStore parallely

I have shared a demo video
Screencast from 25-07-24 09:34:03 AM IST.webm

[Aatman Vaidya]

• fixing some issues to get injection working on complex DOM websites (eg. Wikipedia)
• Start integrating code in Uli Plugin.

[Hardik Pratap Singh]

I am sharing some code snippets where our script is failing

<p>
    <b>crazy</b>
    refers to craziness, or crazy Lorem, ipsum dolor. crazy
    <a href="#">
        Lorem, ipsum dolor. crazy
    </a>
    , a spectrum of behaviors crazy characterized by certain abnormal mental or behavioral patterns.
</p>

<ul>
    <li><a href="/wiki/The_Crazies_(1973_film)" title="The Crazies (1973 film)"><i>The Crazies</i> (1973 film)</a>,
        a film about a biological weapon's effects on a small town</li>
    <li><a href="/wiki/Crazy_(1999_film)" title="Crazy (1999 film)"><i>Crazy</i> (1999 film)</a>, a documentary by
        Heddy Honigmann</li>
    <li><a href="/wiki/Crazy_(2000_film)" title="Crazy (2000 film)"><i>Crazy</i> (2000 film)</a>, a film by
        Hans-Christian Schmid</li>
    <li><i><a href="/wiki/C.R.A.Z.Y." title="C.R.A.Z.Y.">C.R.A.Z.Y.</a></i>, a 2005 film by Jean-Marc Vallée</li>
    <li><a href="/wiki/Crazy_(2007_film)" title="Crazy (2007 film)"><i>Crazy</i> (2007 film)</a>, a film by Rick
        Bieber</li>
    <li><a href="/wiki/The_Crazies_(2010_film)" title="The Crazies (2010 film)"><i>The Crazies</i> (2010 film)</a>,
        a remake of the 1973 film</li>
</ul>

Identified Problem : For checking the slurWord inside an element we are doing parent.innerHTML.includes(slurWord) and injecting <span> tags across those slurWords. Now innerHTML converts everything into string be it tags inside the current element or the attribute names or class names, so attributes or class names containing the slur word also gets targetted and they also get modified.

[Hardik Pratap Singh]

Hello @aatmanvaidya @dennyabrain !!

From last 3 to 4 days, I was brainstorming on the above issues, today I have come up with an idea and implemented it.
We can discuss it in detail in upcoming meeting.

Sharing you a demo video of our script running on wikipedia pages
Screencast from 15-08-24 12:19:27 PM IST.webm

Code files can be accessed through this commit