extension Chrome Extension

Instant On-Page SEO Audits in the Browser

A lightweight Chrome Extension built with React and Manifest V3 to help content editors fix on-page issues in real-time without leaving their CMS.

Role

Front-End Lead

Timeline

2023

Client

Internal Tool

Stack

React, TypeScript, Manifest V3

speed Performance

<50ms

Audit Time

Inefficient Publishing Workflows

Content editors were relying on external tools like Screaming Frog or SEMRush to audit pages after publication. This context switching created a 24-48 hour feedback loop. Editors needed a way to verify meta tags, heading structures, and image alt attributes before hitting publish, directly within their browser environment.

schedule

24-48 Hour Delay

Content editors waited days for feedback from external audit tools before fixing issues.

swap_horiz

Context Switching

Editors had to leave their CMS to run external SEO audits, breaking workflow.

visibility_off

Post-Publication Issues

SEO problems were discovered after pages went live, requiring rework.

Solution

In-Browser Real-Time Auditing

We developed "SEO Quick Fix," a Chrome Extension that injects a shadow DOM sidebar into the active tab. It analyzes the rendered DOM in real-time, providing instant feedback on critical SEO metrics. The tool operates completely client-side for privacy and speed, with zero API latency dependencies for basic checks.

Platform Architecture

High-level overview of the extension's communication flow.

architecture

web

Content Script

Injects React App into Shadow DOM

DOM Analysis

psychology

Analysis Engine

40+ SEO Rulesets

API Calls

extension

Background SW

External SEO APIs

Key Highlights

check_circle Shadow DOM Isolation: Used to prevent CSS leakage from the host page into the extension UI.
check_circle MutationObserver: Automatically re-runs audits when the content editor modifies the DOM.

Modular Check Logic

The core of the application is the AuditRunner class. It accepts a list of rule modules, each implementing a standard interface. This allows us to add new SEO checks (e.g., checking for specific schema markup) without modifying the core engine.

We utilized the strategy pattern to decouple the validation logic from the UI rendering, enabling us to unit test each rule independently.

// rules/TitleCheck.ts


                                class TitleCheck implements IAuditRule {

                                  validate(dom: Document): AuditResult {

                                    const title = dom.querySelector('title');

                                    

                                    if (!title) {

                                      return {

                                        status: 'error',

                                        message: 'Missing title tag'

                                      };

                                    }

                                    

                                    // Check length constraints

                                    const len = title.innerText.length;

                                    return len < 60

                                      ? { status: 'pass' }

                                      : { status: 'warning', value: len };

                                  }

                                }

code

Performance Strategy

The extension is designed for zero performance impact when idle. Scripts only activate when the extension popup is opened, ensuring no interference with page load speed.

check_circle Passive Listening (98% idle time)
check_circle Audit Time under 50ms
check_circle 200KB Bundle Size

// Performance optimizations


                                const optimizations = {

                                  codeSplitting: true,

                                  treeShaking: true,

                                  lazyLoading: true,

                                  passiveListeners: true

                                }