A smart and lightweight Chrome extension that automatically skips YouTube ads, mutes ads when needed, and slightly reduces ad visibility using blur. It never deletes ads and only interacts with the official “Skip Ads” button.

AutoSkip for YouTube is a modern Chrome Extension built with React and TypeScript
that enhances your YouTube watching experience by providing full control over ads while keeping content intact.

It automatically clicks the "Skip" button as soon as it appears in YouTube videos — it does not remove ads
and fully complies with YouTube's policies.

AutoSkip-for-YouTube/
├── src/
│   ├── components/          # Reusable UI components
│   │   ├── shared/          # Shared / common components
│   │   └── ui/              # Design system & primitive UI components
│   ├── constants/           # App-wide constants & enums
│   ├── contexts/            # React contexts (theme, settings, language)
│   ├── extension/           # Chrome extension logic
│   │   ├── background.ts    # Background service worker
│   │   └── content.ts       # Content script (YouTube DOM interaction)
│   ├── hooks/               # Custom React hooks
│   ├── i18n/                # i18next configuration & initialization
│   ├── lib/                 # Shared libraries & helpers
│   ├── types/               # Global TypeScript types
│   ├── utils/               # Utility functions
│   ├── App.tsx              # Popup root component
│   └── main.tsx             # React entry point
│
├── public/
│   ├── _locales/            # Chrome extension metadata translations
│   ├── assets/
│   │   ├── icons/           # Extension icons
│   │   └── screenshots/     # README screenshots
│   ├── locales/             # UI translations (design text & labels)
│   └── manifest.json        # Chrome extension manifest
│
├── vite.config.ts           # Vite base config (popup UI)
├── vite.content.config.ts   # Vite config for content script
├── vite.background.config.ts# Vite config for background worker
└── package.json

🌓 Theme Variations

AutoSkip popup UI across themes and languages

Dark · English	Light · English
Dark · Arabic	Light · Arabic

git clone https://github.com/your-username/AutoSkip-for-YouTube.git
cd AutoSkip-for-YouTube
npm install
npm run dev

npm run build

After build:

1. Open Chrome
2. Go to chrome://extensions
3. Enable Developer mode
4. Click Load unpacked
5. Select the dist folder

The following features are planned for future releases to improve flexibility, accessibility, and user control:

• Add more UI languages beyond Arabic and English
• Improve language detection and fallback handling
• Community-driven translations

• Add a volume slider to control ad sound level
• Allow partial muting instead of full mute
• Save preferred ad volume per user

• Add a transparency (opacity) slider for ad videos
• Allow users to visually reduce ad visibility instead of hiding them
• Smooth transitions when adjusting transparency

• More stable ad detection logic
• Better handling of YouTube DOM updates
• Improved performance and lower CPU usage

• Let users set a personalized delay before the skip action triggers

Maher Elmair

• 📫 maher.elmair.dev@gmail.com
• 🔗 LinkedIn
• ✖️ X (Twitter)
• ❤️ Made with passion by Maher Elmair

🚀 Try the AutoSkip UI live (Popup Preview):
👉 AutoSkip.vercel.app

This live demo showcases the popup UI design, including:

• Dark / Light themes
• Arabic & English language support
• Settings layout and interactions

⚠️ Note:
Due to browser security restrictions, the live demo does not include actual ad-skipping functionality.
The core extension logic works only inside the browser extension environment.

🙌 Thank you for visiting!
If you liked the project, please ⭐ the repository!

Contributions, feedback, and PRs are always welcome 🙏
If you have any solutions for the current issues or ideas to help implement the future enhancements listed above,
don’t hesitate to submit them — I will gladly review and accept them!