Skip to main content
This page documents the structure and organization of the Posture!Posture!Posture! extension codebase.

​
Repository Overview

The extension is built with React 17, TypeScript, and Webpack 5, using TensorFlow.js with MoveNet for real-time pose detection. 
posture-posture-posture-chrome-extension/
├── src/                    # Source code
├── utils/                  # Build utilities
├── build/                  # Compiled extension (generated)
├── webpack.config.js       # Webpack configuration
├── package.json           # Dependencies and scripts
└── tsconfig.json          # TypeScript configuration

​
Source Directory (src/)

The src/ directory contains all the source code for the extension:

​
Directory Structure

src/
├── assets/
│   └── img/               # Extension icons and images
├── manifest.json          # Chrome extension manifest (v3)
└── pages/                 # Extension pages and components
    ├── Background/        # Service worker
    ├── Content/           # Content script
    ├── Options/           # Options page
    └── Popup/             # Browser action popup

​
Extension Pages

The extension consists of four main components, each with its own entry point:

​
Background Service Worker

The extension uses Manifest V3, which requires a service worker instead of a persistent background page.
Location: src/pages/Background/ Entry Point: src/pages/Background/index.js Purpose: Handles background tasks and manages extension state. Acts as the service worker for the extension. Webpack Output: background.bundle.js

​
Content Script

Location: src/pages/Content/ Entry Point: src/pages/Content/index.tsx Key Files:
  • Content.tsx - Main content script component
  • content.styles.css - Injected styles
Purpose: Injected into all web pages (http://*/* and https://*/*). Applies the blur effect when poor posture is detected. Webpack Output: contentScript.bundle.js
Hot module replacement is disabled for the content script to prevent reload issues on active web pages.

​
Options Page

Location: src/pages/Options/ Entry Point: src/pages/Options/index.jsx Key Files:
  • Options.tsx - Main options page component
  • modules/draw_utils.ts - Canvas drawing utilities for pose visualization
Purpose: Provides the main UI for configuring the extension, accessing the webcam, and establishing the baseline “good posture” position. Webpack Output: options.bundle.js + options.html Access: Via browser extension menu or right-click → Options

​
Browser Action Popup

Location: src/pages/Popup/ Entry Point: src/pages/Popup/index.jsx Key Files:
  • Popup.jsx - Main popup component
Purpose: Quick access menu that appears when clicking the extension icon in the browser toolbar. Allows resetting the “good posture” baseline. Webpack Output: popup.bundle.js + popup.html

​
Assets Directory

Location: src/assets/img/ Contents:
  • icon-128.png - Full-size extension icon (128×128)
  • icon-34.png - Browser toolbar icon (34×34)
  • Screenshots and promotional images
Build Process: Icons are automatically copied to the build/ directory during compilation.

​
Utilities Directory (utils/)

Contains build and development scripts:
  • build.js - Production build script (runs Webpack with production config)
  • webserver.js - Development server script (runs Webpack Dev Server with HMR)
  • env.js - Environment variable configuration

​
Configuration Files

​
webpack.config.js

Configures the Webpack build process with:
  • Multiple entry points: Four separate bundles for different parts of the extension
  • Hot reload support: Enabled for Options and Popup pages
  • TypeScript compilation: Via ts-loader
  • Babel transpilation: Via babel-loader with React preset
  • Asset copying: Manifest, icons, and CSS files
  • HTML generation: Separate HTML files for Options and Popup pages

​
manifest.json

The manifest uses Chrome Extension Manifest V3 format, compatible with both Chrome and Firefox.
Defines:
  • Extension metadata (name, description, version)
  • Service worker configuration
  • Content script injection rules
  • Permissions and web-accessible resources
  • Browser action popup and options page
Dynamic values: Version and description are automatically injected from package.json during build.

​
tsconfig.json

TypeScript compiler configuration for type checking and compilation.

​
package.json

Key sections:
  • engines: Requires Node.js ≥20.0.0
  • scripts: Build, development, and formatting commands
  • dependencies: Runtime libraries (React, TensorFlow.js, react-webcam)
  • devDependencies: Build tools (Webpack, Babel, TypeScript, loaders)

​
Technology Stack

The extension is built with:
TechnologyVersionPurpose
React17.0.2UI framework for Options and Popup pages
TypeScript4.4.4+Type-safe JavaScript development
Webpack5.76.0+Module bundler and build tool
TensorFlow.js3.11.0+Machine learning runtime
MoveNet0.0.6Pose detection model
React Webcam6.0.0+Camera access component

​
Build Output (build/)

Generated by Webpack, contains the compiled extension ready for loading: 
build/
├── manifest.json          # Processed manifest with version
├── background.bundle.js   # Service worker
├── contentScript.bundle.js # Content script
├── content.styles.css     # Content script styles
├── options.bundle.js      # Options page script
├── options.html          # Options page HTML
├── popup.bundle.js       # Popup script
├── popup.html           # Popup HTML
├── icon-128.png         # Extension icons
└── icon-34.png
The build/ directory is automatically cleaned on each build. Never edit files directly in this directory.

​
Development Workflow

  1. Edit source files in src/
  2. Webpack watches for changes (when running npm start)
  3. Hot reload updates Options and Popup pages automatically
  4. Content script changes require manual extension reload
  5. Background changes require manual extension reload

​
Next Steps

Build docs developers (and LLMs) love

Get started for freeTalk to us