Skool Focus Extension

A modern, cross-browser extension that helps you focus while you use the skool.com website. Built with WXT for maximum compatibility and developer experience.

What's New in v3.0

Complete Modernization

• Migrated to WXT framework for cross-browser support
• Now supports Chrome, Firefox, and Safari from a single codebase
• Rewritten in TypeScript for better code quality and maintainability
• Lightning-fast builds with Vite

Redesigned UI/UX

• Modern, card-based interface
• Improved visual hierarchy and spacing
• Smooth animations and transitions
• Better icons using Heroicons
• Enhanced dark mode with refined color palette
• More intuitive toggle switches
• Improved accessibility

Installation

Chrome Web Store

https://chrome.google.com/webstore/detail/skool-focus/nchfffdkbhafombnfcpladflclakmdmo

Firefox Add-ons

V3 Coming soon

Safari Extension

Coming soon

Features

Focus Mode

• One-click toggle to enable all focus features at once
• Shows motivational message to get back to work

Individual Settings

• Hide Notifications - Remove notification badges
• Hide Tabs - Remove distracting navigation tabs
• Hide Community Feed - Remove the community sidebar
• Hide Profile Buttons - Remove chat and profile buttons

Additional Features

• Dark/Light mode toggle
• Settings sync across devices
• Fast and lightweight
• Privacy-focused (no data collection)

Development

Prerequisites

• Node.js 18+ and npm

Setup

# Install dependencies
npm install

# Start development server for Chrome
npm run dev

# Start development for Firefox
npm run dev:firefox

# Start development for Safari
npm run dev:safari

Building

# Build for all browsers
npm run build:all

# Build for specific browser
npm run build:chrome
npm run build:firefox
npm run build:safari

# Create distribution zips
npm run zip:all

Project Structure

skool-focus-extension/
├── entrypoints/
│   ├── background.ts        # Background service worker
│   ├── content.ts            # Content script for skool.com
│   └── popup/
│       ├── index.html        # Popup UI
│       ├── main.ts           # Popup logic
│       └── style.css         # Modern styling
├── public/
│   └── images/               # Extension icons
├── wxt.config.ts             # WXT configuration
└── package.json

The extension is built using:

• WXT - Next-gen web extension framework
• TypeScript - Type-safe JavaScript
• Vite - Fast build tool
• Vanilla JS - No heavy frameworks for minimal bundle size

CI/CD

The project includes GitHub Actions workflows for automated testing and releases:

Build Workflow (.github/workflows/build.yml)

• Runs on every push and pull request
• Tests builds for Chrome, Firefox, and Safari in parallel
• Verifies all manifest files are generated correctly
• Uploads build artifacts for inspection
• Ensures code quality before merging

Release Workflow (.github/workflows/release.yml)

• Triggers when you push a version tag (e.g., v3.0.0)
• Builds for all browsers automatically
• Creates distribution zip files
• Publishes a GitHub release with all packages
• Includes installation instructions

To create a release:

git tag v3.0.0
git push origin v3.0.0

Contributing

Contributions are welcome! Feel free to:

• Report bugs
• Suggest new features
• Submit pull requests

☕ Support Development

If you find this extension helpful, consider supporting its development:

License

GPL-3.0 - See LICENSE file for details

Acknowledgments

• Built with WXT by aklinker1
• Icons from Heroicons
• Previous versions used webextension-polyfill