LinkedIn Learning Theater Mode

A Chromium browser extension that enhances LinkedIn Learning video viewing experience with theater mode and custom aspect ratios.

Features

• Theater Mode: Automatically expand video to maximum viewport height while maintaining proportions
• Custom Aspect Ratios: Preset buttons for common ratios (16:9, 16:10, 21:9, 32:9)
• Custom Dimensions: Manually set width and height for precise control
• Max Height Slider: Fine-tune the maximum video height with a convenient slider
• Persistent State: Remember preferences between videos and sessions
• LinkedIn-styled UI: Matches LinkedIn's light/dark theme

Installation

📦 Quick Download (Latest Build)

Download Latest Version ← Click here!

1. Click the link above to go to GitHub Actions
2. Click on the latest successful workflow run (green checkmark ✓)
3. Scroll down to "Artifacts" section at the bottom
4. Download linkedin-learning-enhancer-v1.0.0 (or latest version)
5. Extract the ZIP file to a folder
6. Install in your browser:

For Chrome:

1. Open chrome://extensions/
2. Enable "Developer mode" (toggle in top-right)
3. Click "Load unpacked"
4. Select the extracted folder
5. ✅ Done! The extension icon should appear in your toolbar

For Edge:

1. Open edge://extensions/
2. Enable "Developer mode" (toggle in left sidebar)
3. Click "Load unpacked"
4. Select the extracted folder
5. ✅ Done! The extension icon should appear in your toolbar

Note: GitHub Actions artifacts are retained for 90 days. Each version (e.g., v1.0.0) overwrites the previous build of the same version, keeping only the latest.

🏷️ Stable Releases

For tagged stable releases, visit the Releases page and download the ZIP file. Installation steps are the same as above.

🏪 Browser Stores

• Chrome Web Store: Coming soon...
• Edge Add-ons: Coming soon...

Development

Prerequisites

• Node.js 18.x or 20.x
• npm

Setup

# Clone the repository
git clone https://github.com/rmjoia/LinkedInLearning-extension.git
cd LinkedInLearning-extension

# Install dependencies
npm install

# Build the extension
npm run build

# Run tests
npm test

# Run linter
npm run lint

Project Structure

src/
├── background/       # Service worker for extension lifecycle
├── content/          # Content script injected into LinkedIn Learning pages
├── popup/            # Extension popup UI
├── services/         # Business logic services
│   ├── AspectRatioService.ts
│   ├── MediaSessionService.ts
│   ├── StorageService.ts
│   └── TabService.ts
└── models/           # TypeScript interfaces and types

Available Scripts

• npm run build - Build the extension for production
• npm run watch - Build in watch mode for development
• npm test - Run the test suite once
• npm run test:watch - Run tests in watch mode
• npm run lint - Run ESLint
• npm run lint:fix - Run ESLint and auto-fix issues
• npm run package - Create a distributable ZIP file

Architecture

This extension follows SOLID principles, DRY, and Least Privilege with:

• Service-oriented architecture: Separation of concerns with dedicated services
• TypeScript: Full type safety and modern JavaScript features
• Comprehensive testing: Karma + Jasmine with 15+ tests
• Repository pattern: Clean mock implementations for testing

CI/CD Pipeline

This project uses GitHub Actions for continuous integration and deployment:

• CI Pipeline (ci.yml):

  • Runs on every push and pull request
  • Tests against Node.js 18.x and 20.x
  • Lints code with ESLint
  • Runs test suite with Karma + Jasmine
  • Builds extension and verifies artifacts
  • Uploads build artifacts for 30 days

• CD Pipeline (cd.yml):

  • Triggers on GitHub releases
  • Runs security audit, linting, and tests
  • Builds and packages extension
  • Uploads ZIP to GitHub release
  • Publishes to Chrome Web Store
  • Publishes to Edge Add-ons

Setting Up GitHub Secrets for CD

To enable automatic publishing, add these secrets to your GitHub repository:

Chrome Web Store

1. Go to Google Cloud Console
2. Create a new project or select existing
3. Enable Chrome Web Store API
4. Create OAuth 2.0 credentials
5. Add these secrets to GitHub:
   • CHROME_EXTENSION_ID: Your extension ID from Chrome Web Store
   • CHROME_CLIENT_ID: OAuth client ID
   • CHROME_CLIENT_SECRET: OAuth client secret
   • CHROME_REFRESH_TOKEN: OAuth refresh token

Edge Add-ons

1. Go to Partner Center
2. Navigate to your extension
3. Generate API credentials
4. Add these secrets to GitHub:
   • EDGE_PRODUCT_ID: Your product ID from Partner Center
   • EDGE_CLIENT_ID: API client ID
   • EDGE_CLIENT_SECRET: API client secret
   • EDGE_ACCESS_TOKEN_URL: Token endpoint URL

Creating a Release

The project includes automated version bumping scripts that update both package.json and manifest.json simultaneously:

# 1. Bump version (choose one)
npm run version:patch  # 1.0.0 → 1.0.1 (bug fixes)
npm run version:minor  # 1.0.0 → 1.1.0 (new features)
npm run version:major  # 1.0.0 → 2.0.0 (breaking changes)

# 2. Commit and tag
git add package.json manifest.json
git commit -m "chore: bump version to x.y.z"
git tag vx.y.z
git push && git push --tags

Automated Release Process:

Once you push a tag (e.g., v1.0.0), GitHub Actions will automatically:

1. ✅ Build & Test - Run full CI pipeline (lint, test, build)
2. 📦 Create Release - Generate GitHub release with release notes
3. ⬇️ Upload Artifacts - Attach ZIP file and SHA256 checksum
4. 🚀 Publish to Stores - Submit to Chrome Web Store and Edge Add-ons (if configured)

Download Releases:

Users can download the extension directly from the GitHub Releases page without needing the Chrome/Edge stores.

Each release includes:

• linkedin-learning-enhancer-<version>.zip - Ready to install
• linkedin-learning-enhancer-<version>.zip.sha256 - Checksum for verification

Contributing

1. Fork the repository
2. Create a feature branch: git checkout -b feature/amazing-feature
3. Make your changes
4. Run tests: npm test
5. Run linter: npm run lint:fix
6. Commit: git commit -am "feat: add amazing feature"
7. Push: git push origin feature/amazing-feature
8. Open a Pull Request

License

MIT License - see LICENSE file for details

Support

• Report bugs: GitHub Issues
• Questions: Open a discussion on GitHub