Git Product home page Git Product logo

new-tab-myanimelist's Introduction

MyAnimeList in a new tab for chrome

New Tab: MyAnimeList is a Chrome extension that acts as a startpage and allows you to track and update your shows from MyAnimeList.net quickly and easily in a new tab window.

Landingpage | Demo

New Tab MyAnimeList - MyAnimeList screen

Update shows to you MAL and see airing dates (countdown)

New Tab MyAnimeList - Complete shows

Complete shows that are finished

New Tab MyAnimeList - Seasonal shows screen

See all airing shows this season

New Tab MyAnimeList - Login screen

Features

  • Display your anime list from myanimelist.net in a chrome new tab
  • Show currently airing shows from this season
  • Change watched episodes and complete shows when finished watching
    • Sets the finished date when you complete a show
    • Sets the start date when you start watching a show

Planned Features

  • Add settings for customization
    • backgrounds
    • colors
    • link direction
    • etc

Manually install the extension (unpacked)

  1. Download and unpack the zip files somewhere save.
  2. Go to the chrome extension settings page: chrome menu > more tools > extensions (or by typing in chrome://extensions/ in your address bar).
  3. Check the checkbox 'enable developer mode' and click "Load unpacked extension..."
  4. Select the folder you unzipped in step 1. (enable the extension if you haven't already)
  5. Open a new tab and login to your MAL account.

Motivation

I am way too lazy to go to myanimelist.net and update anime on my list. This is one step faster. Also it quickly shows me what shows i am watching and when the next episode airs

Build Source files

  1. Install dependencies with npm install
  2. Create a .env file in the project root fill it with AniList client credentials (see below)
  3. Build the app files with npm run build
# .env
REACT_APP_ANI_LIST_CLIENT_ID=your-ani-list-client-id
REACT_APP_ANI_LIST_CLIENT_SECRET=your-ani-list-client-secret
REACT_APP_TITLE=New Tab: MyAnimeList

Development

Install dependencies npm install and run npm run start. The app is served to http://localhost:3000. A cors-anywhere server is started on port :8000 to workaround MAL's cors headers for development.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.