something somethign

except ---

Journal note on how I've come to integrate React framework into a Chrome extension --- # Background I've been developing this extension with a group of my friends. And honestly when I started, I didn't really know how to develop anything in javascript. I'd just begun learning how to build a website using HTML, CSS, and vanilla JS. I think I just started learning about React. So with no prior experience in building an extension, I started doing some research into similar extensions. Reverse-engineering was how I learned to program, so it was a method most comfortable to me. The extension has two distinct features: 1. **Pop up** to act as an account dashboard 2. **Injection** of scripts into an existing website The injection part of the extension made the development something of a unique experience. Most extensions only have to deal with having its logic work in the background, but this specific extension had to be developed to essentially rebuild a website page. But that part of the struggle will be on a different post. This post is focused on the development of the pop up, and how I went from using vanilla JS with HTML/CSS to using React + Vite + TS combination. # The Old Stubborn Way In the early phase of the development, the other programmers suggested using React, Astro, Vite, or Tailwindcss. I had no idea what those were and how they functioned. And from my old days of learning mathematics, I had a habit of wanting to reinvent the wheels - to prove that I can derrive something on my own. It was a good way to study, but I soon found out that this was a horrible way of building something for production. When I first wrote out the HTML/CSS and javascripts for the popup, it looked pretty good. I didn't care for the light/dark theme, so that made it easier (but I didn't plan for my future self to come back and add that feature in. It was a disaster ready to happen). The prototype only had buttons, labels, and some switches. The hardest thing to add was the switches, but there were some CSS template to create it. So in the end, it was okay. And as my senior programmer at my job said, "if it works, then it works." But the problem was... how to keep it working when I need to add more features? # React + Tailwindcss + Typescript + Vite This combination is something I found comfort coding for frontend. React replacing HTML, Tailwindcss replacing CSS, Typescript replacing Javascript, and Vite to bundle them all up. I wouldn't go into details on how to set these up and start coding. The main focus of this post is how to configurate Vite to work with Webpack, which I use to bundle the injection scripts and the content script (and service worker).