[DMP 2024]: Show Slur Metadata in the webpage

[dennyabrain]

Ticket Contents

Description

Uli is a browser extension that lets you reclaim your internet browsing experience. It can be used to redact slurs and abusive content, archive problematic content, and collectively push back against online gender based violence.

Uli can be used to hide slurs on websites. It uses a crowdsourced list of slurs in Indian languages to do so. Uli can also be used by users to submit slurs as they come across it on the internet.

As part of this project, you will add a feature to Uli that lets users view additional context about a slur by hovering on it. This is intended to be used as a tool to aid learning about language and the context behind why a word is problematic.

Goals & Mid-Point Milestone

Goals

• Write an efficient parser that can parse the DOM and find location of text which matches the slurs in our slur list
• Inject uli icons in the DOM which can be hovered to reveal more information
• Work with our team to integrate the API endpoint to ping to get metadata related to the slur

Goals Achieved By Mid-point Milestone

• Setup Uli locally and demonstrate your ability to make changes to the browser extension code
• Successfully demonstrate your understanding of Content Scripts and showcase your ability to parse the DOM and inject custom content into user's webpage

Setup/Installation

There are detailed guides on how to setup Uli locally in our wiki

There are guides for many platforms (firefox, chrome, brave) and different OSes (windows, linux). Here is one such for setting up Uli on linux for Chrome. Check the wiki for guides specific to your platform.

Expected Outcome

When implemented, the feature will let users see the Uli icon next to any slur on any webpage they visit in their browser. Upon hovering the cursor on the icon, they should see additional context about the slur. What is its meaning, why it is problematic, what is its level of severity, who has contributed the slur and its meaning etc.

Acceptance Criteria

• Efficient DOM parsing and update algorithm that does not slow down user's browser
• Complete test coverage for all new code added
• Release the feature on chrome and firefox store

Implementation Details

Uli uses content script to run javascript against the content on a user's current tab. As part of this feature you will have to implement an optimized DOM parser that can go through the DOM data and find slurs matching our slur list. Since the extension is supposed to work on all websites, you will have to ensure your algorithm can handle various kinds of webpages - static content, infinite scrolling websites, canvas led apps like Google doc etc.

You will need to devise an efficient strategy to store the matches and their location in DOM so that you can implement certain interactions for each match. For every match you will inject the Uli icon into the webpage. When a user hovers on that icon, you will make an API request to our server to get additional metadata about the slur and show it to the user in a hovering box.

You won't be starting from scratch. We already have content script that parses the DOM and finds slurs. We also have code to inject React components into a user's webpage.

There are also reference libraries like Morphdom that we can use or adapt for our usecase.

Mockups/Wireframes

Product Name

Uli

Organisation Name

Tattle Civic Technologies

Domain

⁠Education

Tech Skills Needed

Express.js, Jest, JavaScript, React, RESTful APIs

Mentor(s)

@dennyabrain

Category

Frontend

[dipeshs809]

Hi @dennyabrain

I'm Dipesh Sharma, a final year udergraduate. I enthusiast to contributing to such project that impacts the society positively such as Uli. My background in Computer Science and Engineering, coupled with experience in JavaScript, ReactJS, SpringBoot, makes me an excellent fit for the Uli project.
Morevover I have knowledgebase in compiler design that will help me in optimising the DOM parsing to make Uli fast.

Experience

Below are my internship experience that will give you more confidence on my candidature for this project
My internship experiences, especially with LinkedIn and Anarock Retail, demonstrate the ability to work with complex architectures and tackle frontend and backend challenges efficiently. Additionally, research experience with ns-3 showcases capacity for optimizing and implementing effective solutions. With my skills in Frontend development, i'm well-equipped to contribute to Uli's goal of enhancing online browsing experiences and combating online gender-based violence.

I would like to take up this project under your guidance as a part of DMP24/C4GT'24.

[hardik-pratap-singh]

Hey @dennyabrain !
I was going through the Wiki for setting up the project but I found that it is asked to clone the repository directly. I mean it is always a good practice to first fork the repo and then clone it to your local environment.
How should I proceed ?
Should I directly clone it or fork it first and then clone it ?

[Ajeett01]

Hi @dennyabrain
I am Ajeet Tiwari, currently pursuing B.Tech.
With experience in building building and working on Extensions , I have gained expertise in my skills specializing in the MERN Stack , Firebase, SQL, Redux and Typescript.

My project - OpenWeather Extension
Shows my experience as I have worked on building extensions from scratch and also worked on extension APIs.

This gives me confidence for working on Uli project and ensuring successful completion of the project.

My previous , internships experience , SIH experience and open source experience at Keploy , reflects that I can work on complex projects.

Under your guidance I would like to work on the Uli project .

[dennyabrain]

Hey @dennyabrain !
I was going through the Wiki for setting up the project but I found that it is asked to clone the repository directly. I mean it is always a good practice to first fork the repo and then clone it to your local environment.
How should I proceed ?
Should I directly clone it or fork it first and then clone it ?

@hardik-pratap-singh good catch. The instructions were written to assist someone in setting up uli locally and trying things out. But if you are going to make a PR, best to fork the repo and clone that.

[Gmin2]

Hey @dennyabrain is there any small tasks or issues that the contributor can solve so that you can evaluate contributors for the DMP project

[dennyabrain]

@utnim2 Sure, take a look at this issue - #409.

[hardik-pratap-singh]

Hey @dennyabrain !
I have just finished setting up Uli on my machine. 😄

Working fine.

PS: Can you please elaborate point number two mentioned in Goal, what icons are we expecting to inject in DOM along with their features ?

[dennyabrain]

That's awesome :)
@hardik-pratap-singh please take any dummy svg icon from here and use it for now? https://feathericons.com/
We'll put the real Uli icon eventually.

As a starter, see if you can find location of multiple slurs on a page and inject an icon next to it or above it. Then see if you can implement a hover action so that when a user hovers on it, it shows a popup like the one in the image with any text content. We don't have to worry about what content goes in that popup yet. That should be relatively easy to implement. Lets start with the slur detection and DOM injection. You can take up the hover functionality next

[dennyabrain]

I have added a reference library in case its useful - https://github.com/patrick-steele-idem/morphdom

[hardik-pratap-singh]

That's awesome :) @hardik-pratap-singh please take any dummy svg icon from here and use it for now? https://feathericons.com/ We'll put the real Uli icon eventually.

As a starter, see if you can find location of multiple slurs on a page and inject an icon next to it or above it. Then see if you can implement a hover action so that when a user hovers on it, it shows a popup like the one in the image with any text content. We don't have to worry about what content goes in that popup yet. That should be relatively easy to implement. Lets start with the slur detection and DOM injection. You can take up the hover functionality next

Thanks @dennyabrain !
This is indeed a very clear roadmap..

I think I should start writing the proposal for the same.

[AbhimanyuSamagra]

Do not ask process related questions about how to apply and who to contact in the above ticket. The only questions allowed are about technical aspects of the project itself. If you want help with the process, you can refer instructions listed on Unstop and any further queries can be taken up on our Discord channel titled DMP queries. Here's a Video Tutorial on how to submit a proposal for a project.

[hardik-pratap-singh]

Hey @dennyabrain
I am getting these issues while committing changes

[dennyabrain]

We have some scripts in place to packages with vulnerabilities isn't checked in. Try npm audit fix as it says in the error logs. That should update those three packages.

[hardik-pratap-singh]

Getting same response even after doing npm audit fix

Edit : Issue Resolved

[aayushk9]

@dennyabrain, I'm facing issues while setting up Uli locally. I've completed everything up to running the npm run dev:chrome command. However, when I run it I encounter this error.

This is how my directory structure looks with the -p:

[aayushk9]

And yeah these are the scripts in my package.json:

However when I updated script for dev:chrome to "npm run start:options && npm run start:contentScript && npm run moveBuildArtefactsToDistDir", it runs but I can only see 2 files under dist that is option.js and option.js.map and also my -p remains empty.

[hardik-pratap-singh]

@utnim2 Sure, take a look at this issue - #409.

Hello @dennyabrain !
I have raised a PR #549 for the above issue. 😊
Can you please review it ?

PS : Please tell some other good first issues for Uli

[hardik-pratap-singh]

@dennyabrain
As per my understanding, whenever a user visits a website

1. DOM must be loading somewhere in our code
2. DOM parser would parse the DOM and checks for slurs
3. DOM injection happens with all matched slurs redacted

While exploring the codebase, I found twitter directory where DOM related things are present. But this not only works for twiiter but for other websites too. Please let me know where can I find code related to Point Number 1 , 2 and 3 ?

[dennyabrain]

@hardik-pratap-singh your understanding is correct.

The right place to start would be content-script.js. The first version of Uli only worked with twitter and all code related to parsing twitter's DOM structure and injecting UI elements is colocated in the twitter directory. As you read content-script.js you will notice two code pathways for every webpage. One is what is done on twitter and the other is for all other webpages. You can review both to learn about the existing approach.

[aatmanvaidya]

@dennyabrain, I'm facing issues while setting up Uli locally. I've completed everything up to running the npm run dev:chrome command. However, when I run it I encounter this error.

This is how my directory structure looks with the -p:

Hi @aayushk9 to fix this error, try deleting the existing -p and dist folders and run the command again - npm run dev:chrome. Hope that helps

[Nitish0777]

@dennyabrain I am very eager to contribute in this project And learn new thing from this open-source project.

[hardik-pratap-singh]

@dennyabrain

As you have said, I started with content-script.js and got the flow.
I have been able to add a '*" above all the slurs.

For the next step, I was trying to add an icon and for that, I am updating the bft function present in browser-extension/plugin/src/transform-general. I am able to inject any text but as soon as I try to inject some HTML, I am getting errors.

Cause :

LIne Number 40 : works fine
Line Number 41 : generates errors attached below

Errors :

[dennyabrain]

@hardik-pratap-singh I would leave you to figure this out as this IS one of the challenging aspect of this project :)

I have a tip for you to simplify this. Do try to create a simpler environment to test your code. So instead of making this change in the browser extension and getting swamped by its errors. Try to do the following :

1. Open any website where you are trying to inject html
2. Right click > Inspect to open the dev console
3. Run the code you have written to inject html against an element on that webpage

This way you can debug your injection code in isolation.

Once you have a way to inject whatever you are trying to inject on a webpage using plain javascript and share your results here, we can find a way to bring that into the extension's content script.

[hardik-pratap-singh]

Hey @dennyabrain

I have mailed you my proposal for this issue for review.
Please check your mail.

[vivekmishra9631]

Hi @dennyabrain , I'm Vivek Mishra, a third-year NIT Karnataka student with a strong passion for building impactful web applications. I'm excited to express my interest in the Uli project!

My background includes:

Full-Stack Development Experience: I honed my skills as a full-stack developer intern at aiRender for 6 months, working with JavaScript, ReactJS, Redux, and WebRTC. This experience solidified my understanding of both front-end and back-end development.

MERN Stack Expertise: In addition to my internship, I'm also a proficient MERN stack developer, comfortable working with MongoDB, Express, React, and Node.js. This versatility allows me to tackle projects with both front-end and back-end components.

My problem-solving skills are further bolstered by my achievement of a gold medal at Worldquants Brain, demonstrating my ability to think critically and find efficient solutions.

I believe my technical skills, combined with my enthusiasm for building meaningful projects, make me a strong candidate to contribute to the Uli project. I'm eager to learn more about the specific requirements and how my expertise can be utilized.

[reenakp2601]

Hii @hardik-pratap-singh & @dennyabrain , I am trying to set up uli on my system but while using npm install in my api-server and plugin directory , I am getting error regarding node version, I have node version 20.13.1 and
npm version 10.5.2, but it is requiring node version 20.9.0, while installing this version it is showing that it is not a publicly available eversion, what should I do, please guide me on this issue.

[Snehil-Shah]

@reenakp2601 That's odd, maybe try using a version manager like nvm?

[hardik-pratap-singh]

Hello @reenakp2601, try this ! It might help

[github-actions]

This issue is stale because it has been open for 30 days with no activity.

[aatmanvaidya]

Weekly Goals

Week 1

• Set up my local development environment and workflow

Week 2

• Setting up Uli
• Inject a SVG file into static html pages
• Exploring DOM manipulation techniques

Week 3

• Read up on Morphdom
• Display some text when we hover over injected SVG file

Week 4

• Check efficiency of different DOM diffing/patching techniques
• In the existing static HTML file, add a checkbox/toggle button, when clicked on it, the "info" symbol should be removed from the word "crazy"

Week 5

• Add a single checkbox - when its not checked, icons should NOT be shown, when its checked, for all words in the slur list, the icons should be injected.
• instead of hiding the visibility of the span tag, analyse what are the benefits of removing the span tag from the DOM entirely.
• keep exploring/reading on better techniques of how to add and remove elements from DOM.

Week 6

• Read DOM related data structures and Review Morphdom indexTree function
• write an indexTree and locateSlur function
• Run the indexTree and locateSlur function on some websites.

Week 7

• Write a separate custom script that uses the DOM Traversal functions and works on websites.

Week 8

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

Week 9

• fix attributes coming as text issue in innerHTML of some DOM structures
• continue integrating code in Uli Plugin
• Write Unit tests for show slur metadata functions.

Week 10

• finish writing unit test for show slur metadata functions.
• continue integrating code in Uli Plugin.

Week 11

• continue working on integrating code in Uli Plugin
• add a new checkbox for Enable Slur Metadata.
• Fix styling issues in injection of DOM
• write tests for the slur metadata features.
• explore colouring slur word with a background hue instead of an icon symbol,

Week 12

• connect main slur list to function logic
• create a json file with all the metadata for slur
• figure out png vs svg file format for uli icon
• continue writing tests
• fix manifest.json file in the PR
• Replace Info Icon with Uli Icon
• explore colouring slur word with a background hue instead of an icon symbol

Week 13

• move tests to Uli plugin
• finish enable slur metadata feature (final bug fixes)
• add categories metadata to json
• document the DOM parser functions and tests

[hardik-pratap-singh]

Weekly Learnings & Updates

Week 1

• Read about various DOM manipulation techniques
• Learnt about looping in js
• Developing a naive approach for injecting an icon after each slur words
• NodeType
• DOM
• PR - Week 1 : Adding Inject SVG Testing Code #593

Week 2

• Read a bit on Morphdom

• Display some text when we hover over injected SVG file

• For task 2, I have written some javascript code in a separate file ver3.js where I am trying to display some text on hovering to icon next to slur word.

• Issue : The code works fine when we have just one slurWord in slurList, but as soon as we have a list of slurWords, then popup is displayed only for the last slurWord of the slurList.

• Screenshot :

• 

• PR - [#544] Inject SVG : Week 2  #595

Week 3

• Empty TextNodes in the DOM? Link

• Understanding Load Events on the Web Link

• How browsers work ? Link

• Node,normalize() Link

• browser basics

• How does HTML rendering happen ?

• async and defer in scripts

• Screenshots

• When nothing is checked (injecting SVG after all slurWords)
  

• When "Crazy" is checked (SVG is removed from all slurs named "crazy")
  

• When "Crazy" and "Stupid" both are checked (SVG is removed against both of them)
  

• Additional Screenshot for Corner Case (one checked and one uncheked)
  

• PR - [#544] Feature : Toggling SVG against slur (Week 3) #596

Week 4

• Subtask 1 (single checkbox for SVG injection)
• read about hiding the span tag vs removing the span tag from DOM entirely
• implemented a function named checkFalseTextNode() which will check for empty textNodes beforehand so that we don't waste time in checking slurWords within them.
• I have mentioned the issue, function, screenshots under issue Review DOM diffing/patching techniques #583
• Document Fragment Link
• Some better techniques/practices to manipulate DOM

Hiding the span tag vs removing the span tag

Approach 1 : Inject image on page load and toggle display

Pros -

• Performance: Faster toggling since the images are already in the DOM, only their visibility is toggled.
• Efficient: Only requires DOM manipulation once, on page load.

Cons -

• Potentially heavier initial load: The initial page load might be slower because all SVGs are loaded even if the feature is not used.
• Larger DOM: The DOM will always contain the SVG elements, potentially impacting performance if there are many.

Approach 2: Add/remove elements from DOM on toggle

Pros -

• Cleaner DOM: The DOM only contains the necessary elements when the feature is enabled.
• Potentially performant: When the feature is disabled, the browser does not need to manage the hidden SVG elements.

Cons -

• More complex code: You need to handle the logic for injecting and removing the SVGs every time the checkbox is toggled.
• Potential performance hit: Injecting and removing elements frequently might lead to performance issues, especially if there are many slur words.

Week 5

• Read DOM related data structures and reviewed morphdom's indexTree() function

• Written an indexTree() and locateSlur() function

• Screenshots of output attached from a static HTML page

• 

• 

• 

• 

• Infinite Scrolling

• Intersection Observer API

• More on Infinite Scroll

Week 6

• Read DOM related data structures and reviewed Morphdom indexTree() function
• Wrote getAllTextNodes() and locateSlur() functions
• Ran the getAllTextNodes() and locateSlur() function on some websites.

Week 7

• Wrote a separate custom script that uses the DOM Traversal functions and works on websites.
• Raised this PR [#544] Prototype code  #600

Week 8

• Started testing script on Wikipedia websites including slur words
• Got some unexpected results
• Detailed issue is documented here

Week 9

• Worked extensively on DOM injection.
• Written scripts that work on live websites
• Tested on this and this
• Much information on this comment
• Exploring jest
• trying to Integrate code in Uli Plugin

Week 10

• Working on content scripts
• Designing workflow for working of scripts related to show slur metadata
• Integrating the functions written for show slur metadata into the Uli plugin
• Learning about jest and practicing writing functions for the same.
• Get update here

Week 11

• Continued integrating functions into Uli plugin.
• Handling edge cases and errors.
• Learning a bit about frontend design of Uli.
• Learning jest and writing unit tests for functions.
• PR [#544] Enable Slur Metadata Checklist Functionality #615

Week 12

• Expanded the slur list
• Currently png is being used for uli-icon but we figured out that svg will be a better choice
• Written tests for all the 5 functions that we are using for Slur Metadata Feature
• manifest.json fixed in PR [#544] Enable Slur Metadata Checklist Functionality #615
• Replaced info icon with uli png

Week 13

• Moved tests to Uli plugin.
• Finished Enable Slur Metadata feature (bug fixes).
• Documented DOM parser functions and tests.

[github-actions]

This issue is stale because it has been open for 30 days with no activity.