Skip to content
BranchesTags

Repository files navigation

Flow Logo

Flow

A high-performance, mobile-optimized course automation extension
Engineered for Google Skills courses. Auto-skips passive videos & documents with customizable controls for quizzes and labs.

Manifest V3 Chrome Firefox Add-on Mobile Ready JavaScript License GitHub

📖 Overview

Flow is a browser extension built on the modern Manifest V3 standard, crafted specifically to streamline passive workflows on Google Skills learning paths. It completely automates the time-consuming aspects of course completion — such as auto-advancing through embedded video lectures and static reading material — while allowing you full control over whether to skip or manually complete interactive quizzes and hands-on labs.

Designed from the ground up to be mobile-first, Flow is engineered with generous touch targets (exceeding standard 48px hit areas), tap-anywhere toggle cards, vibrant glow states, and an ultra-responsive dark interface that feels native on Android Chromium browsers (Kiwi, Brave, Edge) and Firefox Mobile, as well as desktop Chrome and Firefox.

✨ Key Features

⚡ Intelligent Video Fast-Forwarding

  • Embedded YouTube Player Detection: Intercepts embedded YouTube iframe players within courses.
  • Autoplay & Mute Protocol: Automatically mutes the video to bypass browser autoplay security restrictions and initiates playback seamlessly.
  • Near-Duration Seek: Instantly fast-forwards the video to duration - 0.5s, allowing the video player to naturally fire its ended completion event.
  • Safety Guards: Includes finite duration verification (isFinite()) and a retry-limit circuit breaker to prevent infinite loops on slow network connections.

🧭 Structured Course Navigation (ql-contents-menu)

  • Metadata-Driven Navigation: Unlike brittle button-hunting extensions, Flow parses the structured modules JSON attribute directly from the course page DOM (<ql-contents-menu>), determining the exact next activity URL with 100% precision.
  • SPA Router Synchronization: Hooks into the browser History API (pushState, replaceState, and popstate) to detect single-page application route transitions instantly without requiring full page refreshes.
  • Shadow DOM Piercing: Contains fallback deep click dispatchers to trigger interactive <ql-button> and <md-elevated-button> Web Components across open shadow boundaries.

🎛️ Customizable Skip Preferences

  • Skip Quizzes (Toggleable): When enabled, quizzes are automatically bypassed so you can proceed with the path. When disabled, Flow halts with a visual indicator (📝 Quiz — complete manually) to allow manual completion.
  • Skip Labs (Toggleable): When enabled, hands-on lab pages auto-advance immediately. When disabled, Flow pauses and alerts you (⏸ Lab — complete manually).
  • Documents & Reading: Automatically advances through reading materials and text activities.

📱 Mobile-First Touch UI

  • Generous Tap Targets: Cards and option rows offer full-width click/touch surfaces for comfortable one-thumb mobile navigation.
  • Live Status Feedback: Real-time pulsing status beacon and descriptive activity logs (Analyzing current activity..., Video detected, Advancing...).
  • Persistent State: Settings and automation states are synchronized in chrome.storage.local across all tabs and browser restarts.

🏗️ Architecture & Message Flow

┌─────────────────────────────────────────────────────────────┐
│                    YouTube Iframe Context                   │
│  [youtube-content.js] ── Mutes, seeks to end, captures ended│
└──────────────────────────────┬──────────────────────────────┘
                               │ (chrome.runtime.sendMessage)
                               ▼
┌─────────────────────────────────────────────────────────────┐
│                   Background Service Worker                 │
│  [background.js] ────── Relays VIDEO_ENDED to Tab & Storage │
└──────────────────────────────┬──────────────────────────────┘
                               │ (chrome.tabs.sendMessage)
                               ▼
┌─────────────────────────────────────────────────────────────┐
│                     Main Course Platform                    │
│  [course-content.js] ── Reads ql-contents-menu JSON / DOM   │
│                         Handles SPA routing & auto-nav      │
└──────────────────────────────▲──────────────────────────────┘
                               │ (TOGGLE / SETTINGS_CHANGED)
┌──────────────────────────────┴──────────────────────────────┐
│                       Popup Interface                       │
│  [popup.html / popup.js] ── Mobile touch UI & preferences   │
└─────────────────────────────────────────────────────────────┘

🛠️ Tech Stack

Layer Technology Description
Extension Standard Manifest V3 Standardized for Chrome, Edge, Brave, and Firefox (Gecko)
Logic & Scripting Vanilla JavaScript (ES2022) High-speed, dependency-free content scripts & service worker
Styling & Theme CSS3 & Custom Variables Glassmorphism, tailored dark palette, CSS Grid & Flexbox
Typography Google Fonts (Inter) Clean, legible modern sans-serif
Storage API chrome.storage.local Asynchronous local preference & state persistence

📦 Installation & Setup

🌐 Google Chrome, Brave, Edge & Kiwi Browser (Android)

  1. Clone or download this repository: 
    git clone https://github.com/Vignesh-72/Flow.git
  2. Open your browser and navigate to the extensions page:
    • Chrome: chrome://extensions/
    • Edge: edge://extensions/
    • Brave: brave://extensions/
    • Kiwi Browser (Mobile): Open menu → Extensions
  3. Enable Developer mode (toggle in top-right corner).
  4. Click Load unpacked and select the root directory of this project.
  5. Pin Flow to your browser toolbar.

🦊 Mozilla Firefox (Desktop & Android)

  • 1-Click Official Store Install: 👉 Install Flow from Mozilla Add-ons (AMO)

  • Manual / Developer Mode:

    1. Open Firefox and navigate to about:debugging#/runtime/this-firefox.
    2. Click Load Temporary Add-on....
    3. Select the manifest.json file inside the cloned directory (or upload the packaged Flow-v1.3.zip).

📂 Project Structure

Flow/
├── manifest.json         # Unified Manifest V3 specification (Chrome & Firefox)
├── background.js         # Service worker: message router & state manager
├── course-content.js     # Page orchestration, SPA observer & DOM parser
├── youtube-content.js    # Iframe content script for video automation
├── popup.html            # Mobile-optimized dark popup interface
├── popup.js              # Popup interaction handlers & real-time sync
├── logo_trans.png        # Transparent Flow brand icon asset
├── LICENSE               # Open source MIT License
└── README.md             # Complete project documentation

🔒 Permissions & Security

Flow requests only the minimal set of scoped permissions required for its functionality:

Permission Purpose
storage Saves user toggles (automationEnabled, skipQuiz, skipLab) across sessions.
activeTab Sends start/stop commands to the currently active course tab.
*://skills.google/* Scoped strictly to Google Skills platform domains — no broad web access.
*://*.youtube.com/* Allows iframe script execution inside embedded video players.

📜 License

This project is licensed under the MIT License — see the LICENSE file for full details.

MIT License — Copyright (c) 2026 Vignesh-72
https://github.com/Vignesh-72/Flow

About

Auto-skip videos, documents, and navigate through Google Skills courses effortlessly.

Topics

automationgoogle-skillsgoogle-skills-video-skipperproductivityvideo-skipperyoutube

Resources

Readme
License
Activity

Stars

1 star

Watchers

0 watching

Forks

0 forks
Report repository

Releases

Packages

Contributors

Languages