DEV Community: Samir

I built PROOFER - Privacy first Chrome extension that proofreads your texts using Gemma 4

Samir — Sun, 24 May 2026 23:22:32 +0000

This is a submission for the Gemma 4 Challenge: Build with Gemma 4

What I Built

I built PROOFER, a privacy first browser extension that helps me proofread text right where I am already typing, whether that is an email draft, a Discord message, a social post, or any other editable text field on the web.

Instead of copying text into a separate chatbot tab, PROOFER lets me select the text in place and trigger proofreading from a floating action button, a context menu entry, or a keyboard shortcut. The extension then sends only the selected text to the model, streams back the response, and shows a suggestion popup with a visual diff so I can quickly compare the original and the revised version.

The extension is built around a bring-your-own-model setup. Users configure their own endpoint in the popup, choose a model, and can connect PROOFER to LM Studio, Ollama, or any OpenAI-compatible API. This makes the tool flexible, but more importantly, it keeps the privacy model in the user's hands. If they run Gemma 4 locally, their writing never has to leave their machine.

PROOFER currently supports four editing styles:

Proofread for typos, grammar, and punctuation fixes
Rephrase for better clarity and flow
Professional for a more polished and formal tone
Shorten for turning longer text into a tighter version

There are also a few practical quality-of-life features built in, such as streaming responses, connection testing inside the popup, and the ability to disable the extension on specific domains or by regex patterns.

A solution to a trivial problem we all face

This project came from a very small but very real annoyance in day to day working.

I often catch myself writing fast on platforms like Discord, X, email clients, and various web forms, then realizing a message sounds off, has a typo, or could be phrased better. The usual fix is awkward: copy the text, open a separate LLM, paste it there, ask for a correction, copy the result back, and then return to the original tab. It is a tiny interruption, but when it happens repeatedly, it breaks flow.

PROOFER is my attempt to remove that friction. The tool brings proofreading directly into the page I am already using. I can select a sentence, ask for a rewrite in one click, review the suggested result, and keep moving. It solves a trivial problem, but it solves it in the exact place where the friction happens.

That is also why privacy mattered so much in this build. A lot of the text we type into browsers is personal, work-related, or simply not something we want to send to a random remote service. By letting users run Gemma 4 through their own local setup, PROOFER keeps the experience lightweight and much more trustworthy.

And, while I was building and testing PROOFER, I found myself using it almost immediately while chatting with my friends on Discord. This made it clear that it was definitely going to help me in future.

Demo

Code

Explore the project's codebase here: GitHub Repository

How I Used Gemma 4

Gemma 4 is the core intelligence behind PROOFER. I designed the extension so the selected text is wrapped in a strict proofreading prompt, paired with the chosen editing style, and then sent to the configured model endpoint. The model returns only the transformed text, which makes it ideal for an inline editing workflow where the result needs to drop directly back into the user's writing flow.

For this project, I chose Gemma 4 E2B. (For powering AI proofreading)

E2B felt like the right fit because PROOFER is meant to be an edge friendly, privacy focused utility. The extension is most useful when it can run against a local model through tools like LM Studio or Ollama, and Gemma 4 E2B is well suited for exactly that kind of setup. It is lightweight enough to be practical on local or self-hosted environments, while still being strong enough for quick proofreading, tone adjustment, and concise rewriting.

That balance matters a lot here. PROOFER is not trying to generate long essays or act like a general purpose assistant. It needs a model that can respond quickly, preserve intent, follow style instructions reliably, and stay efficient enough for real-time use. Gemma 4 E2B gives me that balance, which is why it became the heart of the project.

In short, Gemma 4 E2B made it possible to build a tool that feels useful in everyday writing, while still staying aligned with the project's main goal: fast, local-first AI assistance for proofreading.

Try PROOFER in your browser

If you want to try PROOFER locally, you can clone the repository and load it as an unpacked browser extension.

git clone https://github.com/SamirMishra27/proofer_proofreading_web_extension.git
cd proofer_proofreading_web_extension
npm install
npm run build

After that:

Open Chrome or Microsoft Edge.
Go to the extensions page.
Turn on Developer mode.
Click Load unpacked.
Select the project folder.

Once the extension is loaded:

Click the PROOFER extension icon.
Choose your provider: LM Studio, Ollama, or any OpenAI-compatible endpoint.
Enter the base URL for your local or self-hosted model server.
Add an API key if your endpoint requires one.
Enter the Gemma 4 model name you want to use.
Use Test Connection to confirm everything is working.

To use it on a page:

Open any website with an editable text field.
Type something and select the text you want to improve.
Trigger PROOFER using the floating button, the right-click context menu, or the keyboard shortcut.
Pick a style like Proofread, Rephrase, Professional, or Shorten.
Review the streamed suggestion and use it as your improved version.

For the best privacy focused setup, run Gemma 4 locally through LM Studio or Ollama so your text stays on your own machine while you write.

These 4 New JavaScript Methods are a game changer!

Samir — Sat, 02 Nov 2024 17:28:05 +0000

In July 2023, ECMAScript released several new specifications for JavaScript. Some of the features include new Array methods that do not modify the existing array. In this blog, we will talk about three of them (one from 2024) that you must know if you want to be up-to-date with the latest trends in Web and JavaScript!

Array.toSorted()

The original Array.sort() sorts elements of an array in-place. Sometimes you might not want this behavior. In programming, it's generally a good practice to avoid modifying existing values and instead return a new version.

Array.toSorted() solves this problem by returning a new array with the sorted elements as described in the callback function!

I am especially fond of this feature as I had already started using it in my code long before VSCode and web browsers had proper support for it!

let numbers = [4, 2, 1, 3];
let sortedNumbers = numbers.toSorted();
console.log(sortedNumbers); // Output: [1, 2, 3, 4]

Array.toReversed()

Array.toReversed() is a new addition that provides an immutable way to reverse an array. Unlike Array.reverse(), which modifies the original array, Array.toReversed() returns a reversed copy of the array, leaving the original unchanged.

let letters = ['a', 'b', 'c', 'd'];
let reversedLetters = letters.toReversed();
console.log(reversedLetters); // Output: ['d', 'c', 'b', 'a']
console.log(letters); // Output: ['a', 'b', 'c', 'd']

Array.ToSpliced()

Array.toSpliced() offers a non-destructive way to remove, replace, or add elements within an array. Traditional Array.splice() modifies the array directly, but Array.toSpliced() creates a new array with the changes applied, leaving the original array unchanged. This can be beneficial when you need to apply changes without affecting the source data.

let numbers = [1, 2, 3, 4, 5];
let splicedNumbers = numbers.toSpliced(1, 2, 6, 7);
console.log(splicedNumbers); // Output: [1, 6, 7, 4, 5]
console.log(numbers); // Output: [1, 2, 3, 4, 5]

Object.groupBy()

This method was officially released in ES2024, but was still available before with polyfills and had already advanced to a later stage of ECMAScript.

Object.groupBy() groups items of a given array based on a specific object property. This is extremely useful and can come in very handy when you want to group a certain list of objects and then iterate over them accordingly in a key-value structure. An interesting fact about this method is that it was not implemented as a prototype method of an array due to web compatibility issues. (Many older JavaScript libraries were already implementing some code within the Array.prototype.group() namespace, that’s why!)

BONUS: Implementing your own `Object.groupBy()` to group by multiple elements

Eventually, you may also need to group by multiple properties. The original Object.groupBy() groups at only one level.

Implement the code below in your project to group elements by multiple properties!

function multiLevelGroupBy(array, criteria) {
  // Base case: if no criteria are left, return the array itself
  if (criteria.length === 0) return array;

  // Get the first criterion
  const [firstCriterion, ...remainingCriteria] = criteria;

  // Group by the first criterion
  const grouped = array.reduce((acc, item) => {
    const key = firstCriterion(item);
    if (!acc[key]) acc[key] = [];
    acc[key].push(item);
    return acc;
  }, {});

  // For each group, recursively apply the remaining criteria
  for (let key in grouped) {
    grouped[key] = multiLevelGroupBy(grouped[key], remainingCriteria);
  }

  return grouped;
}

Example:

const data = [
  { country: 'USA', state: 'California', city: 'Los Angeles', name: 'John' },
  { country: 'USA', state: 'California', city: 'San Francisco', name: 'Alice' },
  { country: 'USA', state: 'New York', city: 'New York City', name: 'Bob' },
  { country: 'Canada', state: 'Ontario', city: 'Toronto', name: 'Carol' },
  { country: 'Canada', state: 'Quebec', city: 'Montreal', name: 'Dave' },
]

let groupedData = multiLevelGroupBy(data, [
  item => item.country,
  item => item.state,
  item => item.city
]);

console.log(groupedData);

/* Expected Output: */
{
  USA: {
    California: {
      'Los Angeles': [{ country: 'USA', state: 'California', city: 'Los Angeles', name: 'John' }],
      'San Francisco': [{ country: 'USA', state: 'California', city: 'San Francisco', name: 'Alice' }]
    },
    New York: {
      'New York City': [{ country: 'USA', state: 'New York', city: 'New York City', name: 'Bob' }]
    }
  },
  Canada: {
    Ontario: {
      Toronto: [{ country: 'Canada', state: 'Ontario', city: 'Toronto', name: 'Carol' }]
    },
    Quebec: {
      Montreal: [{ country: 'Canada', state: 'Quebec', city: 'Montreal', name: 'Dave' }]
    }
  }
}

The End!

If you have made it to the end of this article, Thank you so much for reading! 💝

How to Access raw.githubusercontent.com on JIO Networks

Samir — Tue, 12 Dec 2023 15:39:51 +0000

If you are a programmer and use GitHub for your projects, or to access other repository code, you may sometimes need to get the raw content of a file

But, if you use JIO as your internet service provider, you may not be able to access the site, and therefore, you won't be able to copy or see the file contents in raw format.

Why is this happening?

Internet service provider Jio has blocked the domain on their Cellular and Fiber connections. The reasons are not clear as to why Jio has done it. Although they should not be blocking it in the first place.

Any developer using Jio Internet may find this irritating, but worry not! We can fix this.

I will show you how you can unblock raw.githubusercontent on your Android device and Windows desktop.

How to unblock raw.githubusercontent on your Jio Internet?

On Android

Go to your device's settings, and then connections.
Find an option named "Private DNS" under your connections tab.
Your private DNS is most likely set to 'Automatic'. Change it to the Designated private DNS which allows you to set the DNS yourself.
Now, enter the custom DNS provider name. Choose one of these hostnames below:
- dns.google.com
- dns.adguard.com
Save the settings and try accessing this raw file link. It should work now! 🎉

On Windows

Make sure to connect your Jio internet to your desktop first.
Go to Control Panel 👉 Network and Internet 👉 View network status and tasks
Click on your network name (where it's written Access type: Internet & Connections: Your internet name).
Click on Properties.
Under the "This connection uses the following items:" section, double-click on Internet Protocol Version 4 (TCP/IPv4) (or after selecting it, click on properties).
Select "Use the following DNS server addresses" and then enter the following values in their corresponding fields:
- Preferred DNS server: 8.8.8.8
- Alternate DNS server: 8.8.4.4
Save the settings and try accessing this raw file link.

Conclusion

In both of these OS guides, we can see that we would have to configure a manual DNS resolver to bypass the restrictions. If you are on a different OS such as Linux or MacOS, refer to this article which provides specific guides on configuring DNS for each OS platform.

If this did not work out for you, or you think this article can be improved, then let me know in the comments section! If you have made it to the end, Thank you for your time. 💖