Building a Chrome extension with Tabnine

I think it’s safe to say that if you use Google Chrome as your browser, you’ve likely used a Chrome extension, whether to help find a coupon to save 10% on a purchase, save a password, or for a variety of other reasons. What you might not know is that it’s pretty straightforward to create one yourself if you have some understanding of HTML and JavaScript. I decided to see how far I could get creating my first extension armed only with an idea, Tabnine, and two hours on a livestream. During this Tabnine Labs, I built a Chrome extension that would generate a strong password from scratch. Here’s the recording.

Let’s recap the ways Tabnine played a role in taking the extension from an idea to code.

Planning the extension

Because this was my first time creating a Chrome extension, I had no idea where to begin. Previously, I would’ve started with some Google searches, looked at example code, and possibly gone through some tutorial, but I didn’t have that kind of time. 

Instead, I did my research in a different way. I simply asked Tabnine Chat how to build a Chrome extension as if it were a seasoned Chrome extension developer. It told me step-by-step how to build it using plain HTML and JavaScript. This was enough information to get me thinking about how I wanted my solution to work. 

I wanted to use React and TypeScript to build the extension. Since the Tabnine Chat conversation is used as context, I continued by asking if I could use React and TypeScript. This presented me with a refined solution. I then noticed that it wanted to use Webpack to handle code transpiling and packaging. Being a fan of Vite, I asked once again if we could swap out Webpack for Vite. The new response provided me with the steps needed to create a simple Hello World extension using React, TypeScript, and Vite. These steps walked me through creating a new project based on a Vite template along with instructions to create or update existing files needed to build the extension. It even explained how to run the project locally. My final ask was to add support for TailwindCSS to the project for styling. 

After a quick conversation with Tabnine Chat, I had a simple but working Chrome extension to use as a starting point for my password generator. All this was accomplished in a fraction of the time it would take to research the old way.

Adding features incrementally

With a working base extension, it was time to add the necessary features for the password generator, one by one. The first task was to update the App component with a simple random password generator. With the App.tsx file open, I asked the chat to “update the App component to include a strong random password generator feature.” The response was an updated version of the App component that included a generate button that would populate a text input with a random password when clicked. The function to generate a strong password was also included. It styled everything using TailwindCSS without needing to be asked thanks to workspace context.

This was a decent start, but there was room for improvement. For starters, a copy button would be a nice addition. This was easy to add by highlighting the component and asking the chat to “add a copy button next to the password input field,” and then accepting the code suggestion.

In a similar fashion, I asked the chat to prefill a random password when the extension is opened and had it resize the header text. The next feature I wanted to add was a password strength indicator. I did this by asking the chat to “Add a password strength indicator that checks the password strength.” The response provided all the changes that need to be made to the App component including the function to calculate the password strength. I followed up with requests to make the input editable and for the indicator to update while edits are made.

The last feature I wanted to add was the ability to customize the length and character set used to generate the password. I started by asking the chat to “add a feature that allows the user to set a custom password length” and implementing that. Then I asked it to “add a feature that allows the user to customize the password character set, including numbers, special characters, and uppercase letters.” Once the code was updated, I made some minor changes to styling and event behavior.

This left me with a pretty good MVP version in a short amount of time.

Refactoring the code

Many times while building out the extension I found myself wanting to refactor the code. It’s very easy to keep adding new code to the App.tsx file, but it’s not a best practice. With a React project such as this, we usually want to break large components down into smaller ones stored in their own files and keep function logic separate. This not only helps reduce complexity but also aids with unit testing.

I was able to accomplish the refactoring by selecting the App component and asking the chat to pull different functionality into their own components. For example, the password generator became its own component that used a password strength indicator component. I also took the opportunity to dig deeper into the algorithms being used to generate and determine the password strength by having the chat explain them. This allowed me to see if anything could be simplified or improved by asking follow-up questions. 

Testing

Like so many developers, I saved testing for last. Using the chat, I set up my project to Vitest and the React Testing Library to handle unit testing. From there, I used Tabnine’s Testing Agent to generate unit tests for the different components and functions.

You do have to do some refining at the beginning to get the tests running. But once you do, the Testing Agent does a good job of suggesting tests needed to get you to full coverage. It’s definitely faster than doing it by hand.

After two hours of programming, I walked away with a Chrome extension that was probably 80-90% complete. Sure, it needs some design help and a few more unit tests, but it worked. I was able to take my existing web development knowledge and a little help from Tabnine to create something I’ve never attempted before. (And it was fun!)

Been holding back on building something due to a lack of know-how? Give it a try with Tabnine. Not already a Tabnine Pro user? Go sign up for a free 90-day trial.