[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.