Creating a Chrome Extension: A Journey in Writing Assistance
Written on
Chapter 1: Introduction to My Chrome Extension
In my quest to enhance my writing, I embarked on a journey to create a Chrome extension that would aid in rephrasing sentences and adjusting tones effortlessly. This endeavor was not only enjoyable but also a great learning experience, prompting me to document the insights I gained along the way.
Why This Extension Was Developed
There are times when I need to modify the tone of my writing to sound more professional, casual, or polite based on the context. Typically, I would search online for ways to rephrase sentences or copy my text into another tool to make these changes, which can be tedious.
Imagine the convenience of having a Chrome extension that allows you to highlight text and adjust it in real-time, right from your typing interface! This idea sparked the development of my extension, which would let users rephrase text directly from their context menu or with a keyboard shortcut.
Section 1.1: Desired Features of the Extension
The features I envisioned for my extension include:
- Ability to change text casing (e.g., Title Case, UPPERCASE, lowercase)
- Tone adjustment (e.g., making text sound more professional or casual)
- Compatibility with various platforms within Chrome like Notion, WhatsApp, and Gmail
- Support for keyboard shortcuts and a context menu for easy access
Subsection 1.1.1: My Learning Experience
Throughout my past projects, I primarily focused on backend development, and delving into client-side development felt intimidating. Thus, creating a Chrome extension presented the perfect opportunity to experiment with browser-based coding.
Section 1.2: Understanding Chrome Extension Structure
The process of building a Chrome extension turned out to be more straightforward than I initially anticipated. The essential components include:
- Content script (content.js): Interacts with the browser's DOM
- Background script (background.js): Allows background operations
- manifest.json: Converts your HTML, CSS, and JS files into a Chrome extension
- popup.js and popup.html (optional): Controls the popup that appears when clicking the extension icon
Chapter 2: Managing Costs and Economic Viability
In this video, learn how to create a Chrome extension from scratch, focusing on the essential components and setup.
Developing features that adjust tone often requires calling the OpenAI API, which incurs costs. I’ve been cautious about potential expenses, especially given my previous experiences with spam attacks on a URL shortener I hosted.
Exploring Client-Side LLMs
I spent considerable time contemplating how to make this project economically sustainable. One potential solution was to explore running large language models (LLMs) directly in the browser. This approach promises reduced costs and enhanced privacy since no data would leave the user's machine.
I experimented with two notable projects that enable native LLMs in browsers through WebGPU:
Testing these technologies revealed that while they are impressive, the performance on older hardware was less than ideal, leading me to decide against integrating them into my extension for the time being.
In this video, see how I created my Chrome extension, detailing the journey and challenges faced along the way.
Chapter 3: Monetization Strategies
In late 2023, I aimed to develop a revenue-generating strategy for my extension. I explored ExtPay, an innovative tool for monetizing browser extensions, which simplifies the process considerably.
Publishing the Extension
Publishing a Chrome extension is a straightforward process, guided by the developer dashboard. A one-time registration fee of $5 is required, after which you can submit your extension for review.
Extra: Title Casing Insights
Did you know there are numerous styles of title casing? I initially intended to support various formats but found it challenging to locate a reliable library for implementation. For now, I’ve settled on a simple title casing approach akin to Python’s string.title() method.
Closing Thoughts
This journey has culminated in the creation of Rephrase Tools, a Chrome extension designed to streamline the rephrasing process. I invite you to try it out with a free 7-day trial, no credit card required.
Looking Ahead: Future Aspirations
Future goals include automating the extension's publication process and possibly expanding its compatibility to other browsers, along with exploring the potential for browser-based LLMs as they continue to evolve.
Thank you for being a part of this journey! If you’re interested in the world of LLMs, I’m genuinely excited about their future and the possibilities they hold.