Skip to content
Back to Portfolio

Chrome Extension — History Sidepanel

Year

2025

Client

Personal Project

Role

Full Stack Developer

Chrome Extension — History Sidepanel

Overview

This Chrome Extension allows users to track their browsing activity by displaying a side panel with the last visit timestamp and basic page analytics. Users can see the number of links, words, and images on the current page, as well as a list of past visits to the same URL. The extension was built to combine an intuitive frontend interface with a robust backend API, demonstrating full-stack development skills in a browser extension context.

Challenges

Designing a browser extension that collects and displays page analytics in real time while maintaining smooth performance and reliable data storage. Ensuring the backend API handles multiple page visits and metrics efficiently.

Solutions

Built a React-based UI for the Chrome side panel to display current page metrics and past visitsDeveloped a FastAPI backend with REST endpoints to store page visits and fetch visit historyUsed PostgreSQL to store page visit data including timestamps, URL, word count, link count, and image countContainerized the backend using Docker for easy local deployment and consistent development environmentsImplemented real-time updates for metrics and history display in the extension panelOptimized data collection to minimize performance impact on the user’s browsing experienceDesigned the system so that users can easily access analytics for any page they visit without publishing to the Chrome Web Store

Results

The Chrome Extension successfully tracks user visits and displays comprehensive page analytics in a clean side panel interface. Users can view their browsing history for any page and gain insights on content structure and activity. The project demonstrates strong full-stack capabilities and practical experience with browser extension development.

Gallery

Chrome Extension — History Sidepanel screenshot 1
Chrome Extension — History Sidepanel screenshot 2

"This project highlights Erin’s ability to integrate frontend and backend technologies in a real-world browser extension. The extension is efficient, reliable, and user-friendly, showcasing expertise in React, FastAPI, and Chrome Extension development."

Self-Review

Full Stack Developer

Technologies

React.jsTypeScriptFastAPIPostgreSQLDockerChrome Extension APIREST APIs

Categories

software toolsfrontendbackend

Project Links