Skip to content

AXeL-dev/anime-tracker

Folders and files

NameName
Last commit message
Last commit date
Oct 16, 2022
Jul 23, 2021
Dec 12, 2020
Nov 22, 2022
Feb 3, 2023
Jul 23, 2021
Jun 28, 2020
Feb 21, 2022
Oct 29, 2022
Jul 11, 2020
Oct 30, 2022
Aug 21, 2021
Jun 28, 2020
Feb 11, 2023
Feb 3, 2023
Jun 28, 2020
Jul 16, 2022
Jun 28, 2020
Jun 28, 2020
Feb 11, 2023

Repository files navigation

icon Anime Tracker

A web extension to keep tracking your favorite animes & get notified about new released episodes.

screenshot

Motivation

I watch animes almost daily or at least once or twice a week, & i wanted something like youtube-viewer to notify me of new released episodes, so instead of checking anime websites one by one & trying to remember which was the last episode i've watched, i thought that scraping those websites would be a great idea and would save me a significant time & effort (maybe i'm just super lazy 😁).

Expand to continue reading
Unfortunately, i didn't find a browser/client side web scraper available out there, so i just created a simple one composed of Angular's Http client service & a crafted HTML parser. I also, used some proxies to bypass CORS limitations on browsers.

Okay, so why Angular? why not React or Vue? I mainly choosed Angular for its robust structure & advanced features, like: Pipes, directives, lazy loading, dependency injection & many others. Still its learning & master curve long, but i honestly love the way Angular forces you to use best practices on top of keeping your code flexible & maintainable.

Installation

⚠️ Due to DMCA law, this web extension will be available as a zip file on github releases, use it on your own risk.

How to install?

πŸ“£ You can also try it as a web application.

Features

feature web app web extension
scraper βœ“ βœ“
proxy βœ“ (required to bypass CORS) βœ“ (optional)
notifications βœ“
popup mode βœ“
open links in inactive tabs βœ“

ToDo

  • Scrape anime data from several websites.
  • Replace promises with observables for better performance?
  • Memorize last viewed/clicked episodes.
  • Auto-check & notify for new posted anime episodes.
  • Implement missing/empty crawlers functions.
  • Translations.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

Package

Make sure you have the following package installed npm install -g web-ext. Then run:

npm run build && npm run package

Credits

Icon made by scaredofadulthood.

Some ideas were inspired by manga-provider & x-ray.

License

This project is licensed under the MPL2 license.