Building a Chrome Extension with Cursor AI: The Alt Attribute Inspector

  • Date : Monday, September 29, 2025
  • | Categories : Umbraco Tools
  • | Read Time

Accessibility is something I try to keep in mind whenever I build websites. One of the basics is the alt attribute on images. Screen readers depend on it, but checking if it’s actually filled in is not always easy.

After conducting a few accessibility audits, I noticed how time-consuming it can be to inspect images and their alt text manually. So I built a small Chrome extension: the Alt Attribute Inspector. It highlights images with alt attributes, shows the text on the page, and gives you a quick overview.

The fun part: most of the code was generated with Cursor AI. That made it possible to go from idea to working extension in just a few hours.

Why this extension?


I wanted a tool that would:

  • Show all images with an alt attribute on any page
  • Display the actual alt text on top of the image
  • Count the images that have it filled in
  • Work without changing the site itself

With one click, the extension adds a green border, overlays the alt text, and shows a simple count.

Using Cursor AI

Cursor AI handled most of the boilerplate. It generated working TypeScript for:

  • The Chrome extension manifest
  • Background script for interactions
  • Content script for scanning the DOM
  • Project configuration and build scripts

Features

  • Detects img, picture, and elements with role="img"
  • Works with lazy-loaded images
  • Shows alt text overlays with proper positioning
  • Adjusts on scroll and resize
  • Keeps state across tabs

A Basic Prototype

This is a working plugin. It’s useful as-is, but this is not perfect code. This was my first plugin for Chrome, and Typescript isn't my expertise. The reason I built this was because I wanted to have a simple plugin that shows alt attributes on images on the website I built. 

So if you see improvements, just send me a PR

Conclusion

I built this extension to make my life as a developer a bit easier. With AI tools like Cursor, it’s possible to create small but useful tools very quickly, and they can save you time in your day-to-day work too.

You can find the source code on GitHub, or install the extension directly from the Chrome Web Store.