Relaxed Web

Make the internet a calmer place.

Comment

Inspiration

There's millions of people around the world who consume lots of information from the web. While browsing the web, people not only encounter lots of toxicity, but can also learn to use toxic language with continued exposure. Many people's mental well-being is impacted by what they read, but lots of platforms on the web implement very inconsistent or delayed moderation. Even when content gets moderated, it is usually just removed instead of rewritten, and the main message is lost.

This is why I would like to present Relaxed Web, a Google Chrome extension that reduces toxicity on the web while preserving the main idea of the content.

What it does

The extension scans web pages in real time to detect toxic, harmful, or offensive language in text content. When it detects such sentences, it automatically replaces them with rewritten, non-toxic version without sacrificing the original meaning in the message. It also identifies images containing text of such language and automatically blurs them.

If toxic sentence/phrase cannot be rewritten without being toxic again, it will be replaced with "REMOVED HARMFUL TEXT".

A light bar at the top of the web page indicates text is actively being replaced. A light bar at the top of each image indicates the image is being scanned.

For rewritten text, an option to change text style is available. Users can switch between Default, Formal, and Casual styles. An accessibility option is also available to change color of replaced text and light bars.

Blurred images by default will become visible if a user hovers over the image. An accessibility option is available to disable this behavior.

A hybrid integration of cloud based and on-device models is available to users. Users can click on Advanced → and enter a Google AI Studio API key. If on-device model is/becomes unavailable for any reason, text classified as toxic will be sent to the cloud to be rewritten. Images are not sent to the cloud to be processed, which is why image blurring will be disabled if on-device model is/becomes unavailable.

How I built it

The @xenova/transformers JavaScript library has been integrated, specifically the Xenova/toxic-bert model for detecting toxic content on the web. This model runs offline and on-device in the Chrome browser after the extension service worker initializes it. In order to save precious compute on larger pages with lots of sentences, the extension first tries to locate sentences with words that increase the chances of a sentence being toxic. The words are from CMU School of Computer Science bad-words.txt, but note that additional words have been added to the list. Then it checks the toxicity score of each sentence, and if a certain threshold is met, it gets classified as toxic.

Text classified as toxic are set to be rewritten. Google Chrome built-in Rewriter API is used to complete this task. And if rewritten text couldn't be rewritten without being toxic again, it was replaced with "HARMFUL TEXT REMOVED". This ensures users don't encounter toxicity in rewritten text. Otherwise, if Rewriter API is/becomes unavailable, and Google AI Studio API key is present, then the extension uses the cloud based model Gemini 2.5 Flash-Lite model.

The extension is built to scan the page so that even if new content is loaded, it will be scanned and replaced as necessary. This means that the extension isn't scraping all the text when the website loads and then running them through the models, but also scanning for new content that gets loaded later for example through JavaScript injections, Single-page application (SPA) navigation, or any other method.

In parallel to toxic text rewriting, images are also being classified if they contain toxic or offensive text. This is done using the Google Chrome built-in Prompt API. Prompt API with multimodal input is presented with images, and instructed to output detected text in the image. The output text is then scanned for toxicity with the Xenova/toxic-bert model. If the text is classified as toxic, the image is blurred by CSS injections.

The extension is made to be efficient with the use of caching. When the extension is uploaded to the browser, the service worker instantly starts loading the models and stores them in the cache. When the Rewriter API and Prompt API are used for the first time, they will start getting initialized and will live in the cache for a while. This is why users may notice that the first classification ever is slow, and the classifications after are much faster. To store the state of the extension (on/off) or other states, it is cached on the browser in chrome.storage.local. This is a persistent cache, which means that it survives even if Chrome is restarted.

Challenges I ran into

  1. Model loading can be slow, which could give the impression that the extension isn't functioning until the model is ready. Caching became necessary so that the models load and run quicker on subsequent runs. It also became necessary to show a light bar indicator at the top of the web page to show that the model is currently running.

  2. Sentence detection can be tricky because lots of web pages don't follow a certain, clean, grammatical structure. Many have headlines, fragments, or styled elements like <span> or <div> which break sentence flow. Many optimizations were required to make sure that sentence and phrase detection would work properly, yet they may not be perfect.

  3. Performance varies by device, in which more powerful devices will run the models faster, due to this adding an extra layer of detecting sentences with high probability of toxicity became a necessity to save on compute for lower performance devices.

  4. Loading models that aren't built into Chrome like the Xenova/toxic-bert can be tricky, but Chrome built-in AI models are easy to use. I initially wanted to do toxic text detection with Google's Perspective API, but that requires sending a huge volume of content to the cloud, which is why I opted to use the on-device model instead.

  5. The default color for replaced text (green) may not be contrasting enough for some websites. In cases where people are color-blind, they might have a hard time identifying replaced text. And in cases where all other text are a similar color, it might be hard to identify what was replaced. Which is why it became important to introduce an accessibility setting to change the color of the text that was replaced.

  6. Hybrid cloud and on-device model integration has it's benefits, as the cloud based model can be used as fallback if on-device model is/becomes unavailable. But cloud based models also have their limitations. The cloud model Gemini 2.5 Flash-Lite has it's rate limits such as "Peak requests per minute (RPM)", "Peak input tokens per minute (TPM)", and "Peak requests per day (RPD)". The amount of toxic sentences that the average web user will encounter is not that many per minute/day, which is fine. But the problem is that images will be sent to the cloud model no matter if it's toxic or not (since the model is used to extract text as the first step for toxic detection), and the average user will encounter many images while browsing per minute/day which will lead to exceeding API quotas. This is why the extension disables image blurring functionality entirely if Prompt API becomes unavailable.

Accomplishments that I'm proud of

This project is the first time I built a chrome extension that utilizes Chrome's Built-In AI models. I'm happy that I tried to address every challenge I ran into with solutions.

What I learned

I learned how powerful on-device AI models can be. It is great for privacy as everything is processed on-device by the models instead of sending it to the cloud. I also learned that building AI into the UX requires a lot of thoughtfulness, like letting users know that the extension is running and giving them some control over the extension's function. I also realized accessibility is not an add-on, but it's a core feature that extensions should have.

What's next for Relaxed Web

  1. Expanded language support
  2. Collaborations with online safety advocacy groups
  3. Partnerships for corporate-owned and school-owned devices
  4. More accessibility features

And much more.

Share this project:

Updates