Building a browser extension

2024.12.18:

Started a new project! This time it's AI enabled browser extension. Although I have already launched two projects using the OpenAI API (SEO Meta Description AI and Novine.eu), plus one project that was abandoned, this is my first experience creating an extension.

Browser usage statistics suggest that I should start with a Chrome. However, as a Firefox user who is unwilling to switch my primary browser, I'll also develop the extension for Firefox in parallel.

To make the project more intriguing, I have decided to use JavaScript for the backend, which is also a new challenge for me. Previously I have developed backends only in PHP (during the time when PHP hosting was the most affordable), Java (since the launch of Google App Engine) and Python (since Google App Engine began supporting it).

Stay tuned, I hope this project will gross more than just peanuts. 😂 😭

2024.12.20:

✅ First backend version deployed
✅ Prototype extension developed for both Chrome and Firefox
✅ Did 81 push-ups

Time to conduct extensive tests, i.e., eat my own dog food.

2024.12.21:

✅ Came up with the extension icon.
✅ Decided to use MongoDB (another new technology for me).
✅ Implemented rudimentary user management.

Apparently, I have stepped into the ME.N of the MERN tech stack.

2024.12.22:

You are right, those corners were too sharp. Here is the smoothed version. 

Spent a day optimizing 45 lines of JavaScript code that were supposed to work in all circumstances, only to find out moments ago that all those lines can be replaced with:

document.execCommand("insertText", false, newText)

The catch: that call is deprecated.

2024.12.23:

✅ Deploying the database on MongoDB Atlas and connecting it to GoogleAppEngine.
✅ Adding cron jobs for user management.

2024.12.24:

✅ Implementing keyboard shortcuts for those who prefer not to click to open the context menu.

The shortcuts are Alt+Shift+P and Alt+Shift+I; you can start memorizing them. 🙂 It seems that’s it regarding the core functionality; what remains is the landing page and integration with a payment processor.

2024.12.26:

As I wrap up the landing page, it's time to dive deeper into UX/UI. Excited to share my chosen color palette! Check out this fantastic palette generator.

Updated palette = updated product icon.

And here is the price table! Major second typescale with WCAG AAA contrasts. My favorite contrast checker: https://webaim.org/resources/contrastchecker/

2024.12.29:

While testing on Windows and using Chrome instead of Chromium, I discovered that the shortcut Alt+Shift+I is reserved and it opens a feedback from. It's a pity since the letters P and I correspond to the first letters of my extension's actions.

Additionally, I found that the extension is not working properly in the Reddit markdown editor (it works fine in the default editor) and in Blogger.

2024.12.30:

I have decided to keep the existing keyboard shortcuts for Firefox and, in Chrome, replace Alt+Shift+I with Alt+Shift+O. It's right between I and P, and my action name contains that letter as well. For a moment, I considered using Alt+Shift+1 and Alt+Shift+2 instead, but they are more challenging to type. Ctrl+Alt combinations are not allowed, as stated in the Key combination requirements for Chrome. In any case, it was my mistake not to check the existing Chrome keyboard shortcuts and Mozilla keyboard shortcuts before deciding on mine.

The prompt still doesn't take the character limit for a particular social network into consideration, and sometimes it interprets questions as instructions. Asking ChatGPT to improve the prompt for its own API did not help.

2024.12.31:

I successfully implemented text replacement for both Blogger and Reddit. The main challenge with Blogger was that the editable text was contained within an iframe, while Reddit presented complexities due to multiple shadowRoot element chainings. Extensive testing is essential to ensure that no negative side effects have been introduced.

2025.01.02:

As shown in the video below, the browser extension displays error messages inside a modal dialog layered over the web page. CSS is loaded remotely, and perhaps I'll also use remotely loaded HTML and JavaScript to completely customize the dialog without requiring the user to update the already installed extension.

UX/UI Tip 1: When designing modals, always add all possible options to close them: click outside, click on the '×' button in the top right corner, click on a 'Close' button, and use the 'Esc' key as well.

UX/UI Tip 2: Restore the previous focus once your modal is closed.

2025.01.05

As I am finishing the product, I have just found out that a competitor launched an extension with quite similar functionality two days ago. They have a total of five users. My competitor's low user numbers are depressing me.

2025.01.09

✅ Added semantic elements to HTML.
✅ Added essential documents: Terms of Service, Privacy Notice, and Refund Policy.
✅ Connected the custom domain to Google App Engine.
✅ Submitted the domain to the e-commerce provider for approval.