Inspiration

The internet is full of incredible content, but it's also filled with hate speech and toxicity, especially in comment sections across social media. I was tired of seeing slurs, personal attacks, and demeaning language flood platforms like Twitter, Instagram, and YouTube. The constant exposure to such negativity can have a serious impact on mental health, especially for marginalized communities.

That frustration sparked the idea for Bubbl — a simple browser extension that helps filter hate speech before it reaches users. The project is aligned with SDG 5: Gender Equality, aiming to create safer digital spaces for everyone.

What it does

Bubbl is a browser extension that actively filters and hides hate speech in real time while browsing the internet. It scans the content of web pages—especially on social media platforms—and removes or masks harmful language using keyword detection powered by regular expressions.

Bubbl is lightweight, efficient, and requires no setup from the user. Once installed, it works silently in the background, offering a cleaner and safer browsing experience.

How I built it

• The extension is built using HTML, CSS, and JavaScript
• It uses regular expressions (regex) to identify patterns of hate speech and toxic language
• A content script runs in the background, scanning the page's DOM and replacing or hiding harmful text as it appears
• The extension is shared as a downloadable ZIP that users can install manually by enabling Developer Mode in Chrome and loading the unpacked folder

This was built with simplicity and speed in mind, ensuring that it could run efficiently on most machines without any external dependencies.

Challenges I ran into

• Context limitations: Regex can't understand context, sarcasm, or subtle hate, leading to occasional false positives or negatives
• Cross-platform inconsistencies: Each platform has a different HTML structure, so writing generalized selectors was tricky
• UI preservation: Hiding text without breaking the layout or user interface of complex sites required careful DOM manipulation
• Time constraints: I initially planned to integrate an AI-based detection system, but due to time limitations, I had to focus on delivering a solid regex-powered MVP first

Accomplishments that I am proud of

• Successfully built a working Chrome extension that filters hate speech without external tools or APIs
• Created an intuitive experience that requires no technical knowledge from the user to install or use
• Designed the extension in a way that respects users' space—quietly improving the web experience without being intrusive
• Delivered a meaningful project in a short timeframe, staying aligned with the mission of promoting safer online environments

What I learned

• Learned how browser extensions work, including the structure of manifest.json, content scripts, and permissions
• Gained practical experience with regex and how it can be used for real-time text analysis
• Improved DOM manipulation techniques to interact with dynamic websites
• Understood the ethical considerations and challenges of building content-moderation tools

What's next for Bubbl

• AI-based filtering: Replace regex with a lightweight machine learning model for more accurate and context-aware detection
• Customizability: Allow users to define their own blocklists or safe words to personalize their experience
• Extension store release: Publish Bubbl on the Chrome Web Store to make it more accessible to a wider audience
• Platform-specific tuning: Improve performance and accuracy for specific platforms like Instagram Reels, YouTube comments, and TikTok captions

Bubbl is just getting started. The vision is to empower users with control over what they see online and to create a more inclusive and respectful internet for all.

Built With

• css
• html
• javascript
• regex