Skip to content
This repository has been archived by the owner on Nov 19, 2020. It is now read-only.

ricklancee/new-tab-myanimelist

Repository files navigation

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.