Skip to content

Commit

Permalink
removed How it works
Browse files Browse the repository at this point in the history
  • Loading branch information
@Dreamlinerm
Dreamlinerm committed Jan 13, 2025
1 parent 4b28fb0 commit b0ed41b
Show file tree
Hide file tree
Showing 3 changed files with 43 additions and 233 deletions.
57 changes: 3 additions & 54 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -158,19 +158,10 @@ Buy me a [coffee](https://github.com/sponsors/Dreamlinerm)!

<img alt="Development Time" src="https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fraw.githubusercontent.com%2FDreamlinerm%2FNetflix-Prime-Auto-Skip%2Frefs%2Fheads%2Fmain%2FauthorHours.json&query=time&label=Approx%20Development%20Time%20(Owner)">

## Contributing

If you have any suggestions or Bugs, please open an issue or join the [Discord](https://discord.gg/7us76ErE).
Everyone is welcome to contribute!

## Settings

You can customize which features are enabled in the Settings.

Import and Export all Settings.

See Statistics. All statistics and settings are not shared but are synchronized with your browser account.

### Skip Credits, Watch Credits

Skip Credits and Watch Credits are mutally exclusive, but you can turn both of the off. One allways skips the credits and one allways watches them, if both are turned off its the default behaviour showing the skip credit button.
Expand Down Expand Up @@ -218,33 +209,6 @@ If there is no score they are refreshed once per day. If the movie is newer than
| TMDB Rating | ✅ | ✅ | ✅ | ❌(MAL ratings better) | ✅ |
| Individual Features | <ul><li>Inactivity Warning</li><li>Auto pick last profile</li></ul> | <ul><li>Skip Self Ads</li><li>Paid Content filter</li><li>Move category "Continue"</li><li>Hide Xray</li></ul> | <ul><li>Skip self ads</li><li>Remain fullscreen</li></ul> | <ul><li>Auto pick last profile</li><li>Release Calendar Filters</li><li>Big Video size</li><li>Disable the numpad</li></ul> | ➖ |

## How it works

The addon is observing every mutation of the dom Tree of the Website.

The exact classes may be outdated since I do not update these regularly.

On Netflix it matches the buttons with the data-uia tag containing:

* Intro: player-skip-intro
* Recap: player-skip-recap, player-skip-preplay
* Credits: next-episode-seamless-button
* Inactivity Warning: interrupt-autoplay-continue
* Basic tier ads: matched by css class .default-ltr-cache-mmvz9h and the speed is set to 16x until the ad is over

On Prime video it matches buttons with the Css Classes:

* Intro: skipelement
* Credits: nextupcard-button
* Self promoting ads: .fu4rd6c.f1cw2swo
* Paid Content: .o86fri (yallow text indicates paid films)

The freevee ad text contains the ad length which is matched by

* Freevee ads: .atvwebplayersdk-ad-timer-text

and then skipped by forwarding by the ad length.

## Develop the Extension

### Setup
Expand All @@ -255,17 +219,16 @@ and then skipped by forwarding by the ad length.
- ```pnpm web-ext``` run the extension in firefox
- ```pnpm chrome``` run the extension in chrome

This extension was built with the template [vite-vue3-browser-extension-v3](https://github.com/mubaidr/vite-vue3-browser-extension-v3)

### Further Commands

- ```pnpm dev``` hot build with sourcemaps and w/o minification for both
- ```pnpm dev:chrome``` hot build with sourcemaps and w/o minification for chrome
- ```pnpm dev:firefox``` hot build with sourcemaps and w/o minification for firefox

- ```npm run start-android``` start on firefox android

This extension was built with the template [vite-vue3-browser-extension-v3](https://github.com/mubaidr/vite-vue3-browser-extension-v3)

The refreshed Readme of the template can be found [here](README_TEMPLATE.md)
Further documentation is [here](README_TEMPLATE.md)

## Open the Extension without web-ext

Expand All @@ -278,20 +241,6 @@ I primarily just develop in firefox and then copy the code into chrome and repla

Just like chrome you can temporarily load the extension by going to ``about:addons``, clicking on the gear icon and then ``Install Add-ons From File``. Then you can load the ``dist/firefox`` folder as a temporary extension.

### Formatting and Linting Commands

- ```pnpm format``` run prettier on all files
- ```pnpm lint``` run esLint
- ```pnpm lint:manifest``` web-ext lint manifest files

### Author Commands

- ```pnpm transDeepL``` translate .translation/deepl.EN.json and output them into the locales files directly
- ```pnpm hours``` calculate the hours spent on the project
- ```pnpm copyDocsFtoC``` copy the docs from the firefox folder to the chrome folder



## Changelog

You can see the [Changelog](./CHANGELOG.md) here or the extension settings.
Expand Down
219 changes: 40 additions & 179 deletions README_TEMPLATE.md
View file
Original file line number Diff line number Diff line change
@@ -1,101 +1,55 @@
# vite-vue3-browser-extension-v3

[![build](https://github.com/mubaidr/vite-vue3-browser-extension-v3/actions/workflows/build.yml/badge.svg)](https://github.com/mubaidr/vite-vue3-browser-extension-v3/actions/workflows/build.yml)

A [Vite](https://vitejs.dev/) powered WebExtension ([Chrome](https://developer.chrome.com/docs/extensions/reference/), [FireFox](https://addons.mozilla.org/en-US/developers/), etc.) starter template based on `manifest 3`, `vue3` and `vite` and alot more preconfigured.

## Please take a moment to fill out a 3 question [Feedback Form](https://forms.gle/2nzS2AQkVGmqHTLV6) and let us know if you would be interested in purchasing a feature rich template, along with any features (auth, payment integration and more) you would like to see.

**Note:** Your responses will help shape the future of this project and ensure we meet your needs better.

---

## Screenshots

<p align="center">
<img src="./screenshots/Screenshot_20241225_225109.png" width="auto" height="180" alt="Options" style="margin: 0 10px;" />
<img src="./screenshots/Screenshot_20241225_224440.png" width="auto" height="180" alt="Options" style="margin: 0 10px;" />
<img src="./screenshots/Screenshot_20241225_224236.png" width="auto" height="180" alt="Options (Dark Mode)" style="margin: 0 10px;" />
</p>

<p align="center">
<img src="./screenshots/Screenshot_20241225_224300.png" width="auto" height="180" alt="Update Screen" />
<img src="./screenshots/Screenshot_20241227_000344.png" width="auto" height="180" alt="Update Screen" />
</p>

## Features

- Boiler plate Pages for
- Background
- Action Popup
- Options
- Content Script
- Devtools panel
- Browser Side Panel
- Setup pages for Install and Update events
- Offscreen pages for audio, screen recording etc
- Sample pages for Contact, About, Pricing etc
- Dynamic/ Directory based routing. Just add a file in `src/pages` or relevant ui directory and it will be automatically registered as a route
- State & UI Components
- Header
- Footer
- Locale Switch (i18n)
- Theme Switch (dark/light)
- Loading Spinner
- Error Boundary
- Empty State
- Notifications using `notivue`
- Store for options preconfigured etc
- Composables for
- i18n
- Theme
- Notifications
- Loading
- Error handling
- `useBrowserStorage` for extension settings and user options management
- Preconfigured Pinia Store (optional perisitent and non-persistent)
- System wide
- Easily extendable
- Type safe

_Please create an issue if you feel some feature is missing or could be improved._

## Directory Structure

```bash
.
├── dist # Built extension files
├── .translations # auto-generated translation files
│ ├── deepl.EN.json # English input for translation script
├── dist # Built extension files
│ ├── chrome # Chrome-specific build
│ └── firefox # Firefox-specific build
├── public # Static assets
│ └── icons # Extension icons
├── docs # Localized store descriptions
├── downloaded HtmlButtons # Some downloaded html buttons
├── graph # chrome and firefox user statistics
├── icon # copy of used icons and logos
├── Logos # Images used in Readme
├── Screenshots # Screenshots of the extension
├── scripts # Build/dev scripts
├── src # Source code
│ ├── assets # Global assets (images, styles)
│ ├── background # Extension background script
│ ├── components # Shared Vue components
│ ├── composables # Vue composables/hooks
│ ├── content-script # Content scripts injected into pages
│ ├── devtools # Chrome devtools panel
│ ├── locales # i18n translation files
│ ├── offscreen # Offscreen pages (audio, recording)
│ ├── stores # Pinia stores
│ ├── types # TypeScript type definitions
│ ├── ui # UI pages
│ │ ├── action-popup # Browser toolbar popup
│ │ ├── common # Shared pages
│ │ ├── content-script-iframe # Content script app injected into pages by content script
│ │ ├── devtools-panel # Devtools panel UI
│ │ ├── options-page # Extension options
│ │ ├── setup # Install/update pages
│ │ └── side-panel # Browser side panel
│ └── utils # Shared utilities
├── manifest.config.ts # Base manifest configuration
├── vite.config.ts # Base Vite configuration
├── tailwind.config.cjs # Tailwind CSS configuration
└── package.json # Project dependencies and scripts
│ ├── assets # Global assets (images, styles)
│ ├── background # Extension background script
│ ├── components # Shared Vue components
│ ├── composables # Vue composables/hooks
│ ├── content-script # Content scripts injected into pages
│ ├── locales # i18n translation files
│ ├── stores # Pinia stores
│ ├── types # TypeScript type definitions
│ ├── ui # UI pages
│ │ ├── action-popup # Browser toolbar popup
│ │ ├── iframe-page # Content script app injected into pages by content script
│ │ ├── options-page # Extension options
│ └── utils # Shared utilities
├── manifest.config.ts # Base manifest configuration
├── vite.config.ts # Base Vite configuration
├── tailwind.config.cjs # Tailwind CSS configuration
└── package.json # Project dependencies and scripts
```

### Formatting and Linting Commands

- ```pnpm format``` run prettier on all files
- ```pnpm lint``` run esLint
- ```pnpm lint:manifest``` web-ext lint manifest files

### Author Commands

- ```pnpm transDeepL``` translate .translation/deepl.EN.json and output them into the locales files directly
- ```pnpm hours``` calculate the hours spent on the project
- ```pnpm copyDocsFtoC``` copy the docs from the firefox folder to the chrome folder


## Development tools

### Vite Plugins
Expand All @@ -111,7 +65,7 @@ _Please create an issue if you feel some feature is missing or could be improved

- [Pinia](https://pinia.vuejs.org/) - Intuitive, type safe, light and flexible Store for Vue
- [VueUse](https://github.com/antfu/vueuse) - collection of useful composition APIs
- [Notivue](
- [Notivue](https://github.com/smastrom/notivue) - toast notification system
- [Vue-i18n](https://kazupon.github.io/vue-i18n/) - Internationalization plugin for Vue.js

### Plugins
Expand All @@ -123,8 +77,6 @@ _Please create an issue if you feel some feature is missing or could be improved
- [tailwindcss](https://tailwindcss.com) - A utility-first CSS framework
- [daisyUI](https://daisyui.com/) - The most popular component library for Tailwind CSS

_Tailwind css `forms` and `typography` plugins are enabled for default styling of form controls._

### WebExtension Libraries

- [`webext-bridge`](https://github.com/zikaari/webext-bridge) - effortlessly communication between contexts
Expand All @@ -138,24 +90,6 @@ _Tailwind css `forms` and `typography` plugins are enabled for default styling o
- Use Composition API with [`<script setup>` SFC syntax](https://github.com/vuejs/rfcs/pull/227)
- Use Composition API with [`setup` SFC syntax](https://pinia.vuejs.org/cookbook/composables.html#Setup-Stores) in Pinia stores

## Use the Template

### GitHub Template

[Create a repo from this template on GitHub](https://github.com/mubaidr/vite-vue3-browser-extension-v3/generate).

### Clone to local

If you prefer to do it manually with the cleaner git history

> If you don't have pnpm installed, run: npm install -g pnpm
```bash
pnpx degit mubaidr/vite-vue3-browser-extension-v3 my-webext
cd my-webext
pnpm i
```

### Browser Related Configurations

- `manifest.config.ts` - Base extension manifest with common configuration
Expand All @@ -164,76 +98,3 @@ pnpm i
- `vite.config.ts` - Base vite configuration
- `vite.chrome.config.ts` - Chrome/ chromium based browsers specific vite configuration
- `vite.firefox.config.ts` - Firefox specific vite configuration

### Scripts

- `pnpm dev` - Start development server
- `pnpm build` - Build extension
- `pnpm lint` - Lint files

_You can also use pnpm dev:chrome, pnpm dev:firefox, pnpm build:chrome, pnpm build:firefox, pnpm lint:fix_

_Then load extension in browser with the `dist/` folder_

**Note**: Pack files under `dist/chrome` or `dist/firefox`, you can upload to appropriate extension store.

## Support

If you like this project, you can support me by donating [mubaidr](https://www.patreon.com/c/mubaidr) and starring ⭐ this repository.

## Hire me

I am a full stack developer. I am open to work. If you are looking for a developer or have a project you want to start, please visit my profile and website here: [mubaidr](https://mubaidr.js.org).

## Contributors

<!-- readme: collaborators,contributors -start -->
<table>
<tbody>
<tr>
<td align="center">
<a href="https://github.com/mubaidr">
<img src="https://avatars.githubusercontent.com/u/2222702?v=4" width="100;" alt="mubaidr"/>
<br />
<sub><b>Muhammad Ubaid Raza</b></sub>
</a>
</td>
<td align="center">
<a href="https://github.com/baramofme">
<img src="https://avatars.githubusercontent.com/u/44565599?v=4" width="100;" alt="baramofme"/>
<br />
<sub><b>Jihoon Yi</b></sub>
</a>
</td>
<td align="center">
<a href="https://github.com/poncianodiego">
<img src="https://avatars.githubusercontent.com/u/20716004?v=4" width="100;" alt="poncianodiego"/>
<br />
<sub><b>Diego Ponciano</b></sub>
</a>
</td>
<td align="center">
<a href="https://github.com/IgorFZ">
<img src="https://avatars.githubusercontent.com/u/85708187?v=4" width="100;" alt="IgorFZ"/>
<br />
<sub><b>igorfz</b></sub>
</a>
</td>
<td align="center">
<a href="https://github.com/hi2code">
<img src="https://avatars.githubusercontent.com/u/51270649?v=4" width="100;" alt="hi2code"/>
<br />
<sub><b>hi2code</b></sub>
</a>
</td>
<td align="center">
<a href="https://github.com/justorez">
<img src="https://avatars.githubusercontent.com/u/17308328?v=4" width="100;" alt="justorez"/>
<br />
<sub><b>Null</b></sub>
</a>
</td>
</tr>
<tbody>
</table>
<!-- readme: collaborators,contributors -end -->
Empty file removed public/.gitkeep
View file
Empty file.

0 comments on commit b0ed41b

Please sign in to comment.