Contents
- What is is
- Motivation
- Learning how to Build Chrome Extensions
- Software Architecture
- Challenges
- Plans for the Future
What it is
CarBuddy is a Chrome Extension I made that helps you quickly discover Kelley Blue Book (KBB) values directly within Craigslist car and truck listings to find good deals at a glance. It appears as a sidebar next to vehicle listings on Craigslist, mainly telling users the fair value of their car against the listed price along with the absolute and percentage difference. It also allows users to vary the condition of the car based on the pictures or seller descriptions.
Motivation
I came to the US in Jan 2024 for an exchange program at UCBerkeley and an internship in the Bay Area. Prior to coming to the states, I knew that having a car was an absolute necessity to get around unlike in Singapore.
Upon talking to seniors I found out that buying a used car wasn't that expensive and you can pretty much sell it off again at the end of our program for the same price. They told me to look on Facebook Marketplace and Craigslist, but to always look up the vehicles "fair value" on a site called Kelley Blue Books (KBB). I liked cars, and was happy to look through listings for a good deal. I even started searching a month while I was in Singapore before arriving in the states. However, the initial excitement soon turned into an annoyance. If you're unfamiliar with how looking up a car's value on KBB works, you have to go through an arduous user journey. Its an average of 6 different screens before you arrive at the final value. I had to do this for every car I wanted to look up and it was exhausting, tedious and took the fun out of car shopping.
I spent hours a day for weeks sifting through car listings, then looking them up on KBB, then back to listings and so on. I thought, how great would it be if there was tool that just read all the information available on my screen and fed it to some KBB API and just gave me the values I needed every time I entered a listing. And the most logical thing for that to me was a Chrome Extension, and I went looking for one.
Turns out there were a whole bunch of them! Great. So, why did I have to build my own? Well, because none of them worked. When I tested them out, almost all of them just did not work. The side panel appeared but no data was populated.
Thus, with no available product in the marketplace that could consistently achieve this, I decided to build one! I hope that it will help give my juniors coming to the states an easier time when it comes to shopping for cars. Not just them, but to anyone currently looking for a used car in the states - I hope to create a tool that will help more people make an informed decision in a shorter amount of time.
Learning how to build Chrome Extensions
Where do I even begin? That’s the first question that popped into my head when I decided to dive into the world of Chrome Extensions. I mean, we use them all the time—tiny little tools that enhance our browsing experience—but how does one actually go about creating one?
I started by exploring the basics, and I quickly realized that Google has a wealth of resources to help beginners like me. The official Chrome Extensions documentation became my go-to guide. The tutorials were fast and snappy, laying out the essential steps, from setting up your manifest file to understanding the background scripts. The simplicity and clarity of the examples made the learning curve feel less steep. I followed closely, line by line of the tutorials until I got a grasp of how a chrome extension worked at a high level before digging into lessons I thought were particularly useful such as those about service workers (sort of like your backend) and eventually offscreen documents (tldr: where your manipulate html that doesn't need to be displayed - yet).
I personally recommend following the basic tutorials on the chrome extension documentation page:
- Your First Extension
- Run scripts on every page
- Inject scripts into the active tab
- Handle events with service workers
- Debug your extension
Subsequently, plan out the most barebones, MVP version of what you want to build and do it. You'll soon run into issues and that's when you consult google, stackoverflow or the official docs itself. I had to come back to learn about offscreen documents halfway because I needed it, which helped me learn it faster and with more purpose compared to if I had finished every tutorial for the sake of it.
Software Architecture
The general framework or guidelines when it comes to building a Chrome extension mirrors that of web development rather well. Content.js is what interacts with the current webpage you are on (Frontend), Service-worker.js is the background script that handles tasks behind the scenes (Backend), such as managing events, making network requests, and maintaining state even when the webpage is inactive.
Offscreen documents, on the other hand, is not a concept I quite like. They are used to run tasks that require a visual element but aren't directly visible to the user, such as rendering a canvas for image manipulation or handling complex calculations. While they serve a purpose, I can’t help but wish that these lightweight tasks could be handled within the service-worker instead, keeping the extension more streamlined and efficient. In my case it was to tidy up the HTML returned by KBB before displaying only what is necessary to the user in the sidebar.
How CarBuddy Works (Roughly)
When a user enters a car listing, content.js will manipulate the DOM to inject the side panel in. It then reads/scrapes the required information about the car such as its make, model, year, odometer value etc. and sends it to the service-worker. The service-worker has a listener, that once triggered by content.js will parameterize the information and send a request to KBB to get the fair value as a HTML. It then sends the received HTML to the offscreen document for tidying up and then back to content.js to display it to the user.
Challenges
Kelley Blue Book did not want to give me an API Key.
This was almost the end of CarBuddy before it even began. After submitting a request for an API Key to Kelley Blue Book, I received a response stating, "Cox Automotive only allows access to our API for the purpose of creating an industry application." I remember staring at that email, feeling the weight of defeat creeping in. It seemed like a dead end, and I seriously considered abandoning the project. But after a few days of mulling it over, I realized that this was an opportunity to get creative. Instead of relying on an official API, I came up with a "hacky" workaround—essentially mimicking a user’s HTTP requests to KBB’s website until I could extract the fair value for a car. With the right structure, I found that for many car models, I could get the value with just one request! For others, I had to implement a step where users could select the car's body style first.
This experience taught me an important lesson: persistence and creativity can help you overcome the barriers set by industry giants. I’m glad I didn’t give up because this challenge pushed me to think outside the box and ultimately made CarBuddy a reality.
Kelley Blue Book's Inconsistent Handling of Car Names. Just why?
Dealing with KBB’s inconsistent car naming conventions was an exercise in patience. For most cars, things are straightforward: Toyota (Make) Corolla (Model) 2017 (Year) with a few available body styles for the user to choose from. But then you have cars like the BMW 328i, which KBB refers to under the umbrella term “3-series,” with “328i Sedan” as the body style. Mercedes has similar quirks with their different classes. And the worst offenders? Vehicles like the Chevrolet Silverado-1500-Double-Cab, where KBB doesn't bother separating the model and body style at all. No one lists cars like that, making it a nightmare to handle consistently in the extension.
These inconsistencies forced me to implement special handling and edge cases, which admittedly, I haven’t fully covered yet. For now, I’ve set up a catch-all that directs users to KBB itself when the extension can’t handle a particular vehicle. I know it’s not perfect, but it's a necessary stopgap as I continue to refine CarBuddy.
Plans for the Future
AI Chat with Car: I am once again motivated by my own personal woes. As a car newbie, I wish I had known the possible and likely issues that would have came with buying a high mileage BMW 328i. However, I was left to find that out myself as my car literally stopped moving on the highway. Thankfully I am safe after the incident, but was left to handle the painful aftermath of having your car essentially totaled. I'm exploring the idea of integrating an AI-powered chat feature that can answer users' questions about car values and provide additional insights. I am currently exploring the use of RAGs to do this.
Analyze the Entire Marketplace Instead of Just One Car at a Time: The current version of CarBuddy focuses on individual car listings, but I'd like to work on a feature that will allow users to analyze the entire marketplace to spot trends and find the best deals more efficiently.