crunchyroll-companion

Crunchyroll Companion

An all-in-one enhancement extension for Crunchyroll (Chrome / Edge, Manifest V3). Version 0.2.9.

It lives in a persistent Chrome side panel that adapts to what you’re doing: a live show companion while you watch, and a home dashboard everywhere else.

_{On Crunchyroll — the live show panel: now-playing hero, MyAnimeList sync, your episode/status/score, plus the show's synopsis, seasons, characters and reviews.}	_{Anywhere else — the home dashboard: your skip stats and activity, a Resume card, Continue-watching, your MyAnimeList "watching" list, and what's trending this season.}
_{Settings — skip method, per-segment auto-skip toggles, playback options (auto-next, auto-PiP), cloud sync, and your MyAnimeList connection — all inline in the panel.}	_{Continue watching — your recently opened episodes, with one-click resume and per-entry remove.}

Auto-skip intro, recap, outro/credits, and the next-episode preview — each independently toggleable.
Auto-play the next episode when one finishes.
Keep watching: dismisses Crunchyroll’s “Are you still watching?” / profile prompts so a binge isn’t interrupted.
Picture-in-Picture: a PiP button built into the player’s control bar, plus an optional auto-PiP that pops the video out into a floating window when you switch away from the tab.
MyAnimeList sync (opt-in): keeps your MAL progress on the episode you’re actually watching, with rich show details (synopsis, genres, seasons, characters, reviews) and inline controls to adjust episode / status / score.
Continue watching: a Recent list of shows you’ve opened, with one-click resume and per-entry delete.
A small “Skipped intro — Undo” toast so a skip never feels like a glitch, plus lifetime skip stats (time saved + an activity sparkline) on the home page.
Cloud sync (opt-in): sign in with Google to back up your settings, watch history, skip stats, and MAL matches to your own Supabase, and keep them in sync across devices. Your MyAnimeList login stays device-local.
A persistent side panel and a full options page, with settings synced across your signed-in browsers via chrome.storage.sync.

This is a personal, client-side enhancement that only automates actions you can already perform yourself (clicking Skip / Next). It does not bypass paywalls, DRM, or advertising.

How skipping works

Crunchyroll publishes per-episode skip timings as static JSON — the same data that powers its own Skip Intro button:

https://static.crunchyroll.com/skip-events/production/{episodeId}.json

The extension supports two methods (Options → Skip method):

Smart seek (default): the background worker fetches that JSON and the content script seeks the <video> straight past each enabled segment. If an episode has no published data, it falls back to clicking Crunchyroll’s native skip button.
Click native button: only ever clicks Crunchyroll’s own skip button.

Because Crunchyroll is a single-page app, the content script watches History API navigation (and polls as a safety net) and re-initialises for each new episode without a page reload.

MyAnimeList sync

Users open Options → MyAnimeList → Connect MyAnimeList, log into their own MAL account, and toggle Sync watched episodes on. Nothing else to set up.

Tracks the episode you’re on. A short way into each episode (~30s of playback, enough to confirm you’re actually watching it) your MAL progress is set to that episode — so moving from episode 5 to 6 updates MAL to 6 rather than lagging a whole episode behind. Auto-sync only ever moves progress forward.
Manual control in the panel. While on a watch page, the side panel shows a MAL card: a –/+ (and type-to-set) episode stepper, status dropdown (Watching / Completed / …), a 1–10 star rating, and a link to the entry on MAL.
Accurate matching. The CR series is resolved to a MAL anime by scoring candidate titles (exact title and MAL alternative titles beat partial ones, the right season wins over other seasons, and full TV series beat shorts/spin-offs) — so e.g. “Black Clover” maps to the series, not the chibi short. A wrong match can be corrected under Series → MyAnimeList mappings; manual fixes are pinned and never auto-overridden.

Developer setup (one-time, to bake in the API client)

At myanimelist.net/apiconfig → Create ID, set App Type = Other (a public client — no secret).
Set App Redirect URL to exactly: https://jcfmdllkakmjkihgphmmimhiehcbbfei.chromiumapp.org/ (This ID is pinned by the key in the manifest, so it’s stable.)
Paste the generated Client ID into src/shared/mal-config.ts (MAL_CLIENT_ID) and rebuild.

Auth is OAuth2 authorization-code + PKCE; tokens are stored locally and refreshed automatically. The client ID is safe to ship (it’s not a secret in PKCE flows); the signing key (mal-signing-key.pem) is gitignored.

Cloud sync

Users open Cloud sync (in the side panel settings or the options page) → Sign in with Google, and their settings, watch history, skip stats, and MAL mappings are backed up and merged across devices. The MyAnimeList token is not synced — it stays on the device.

Sync is non-destructive — two devices never clobber each other:

settings — last-write-wins (the locally-edited side wins ties; the cloud applies on a fresh sign-in)
history — union by series (newest episode per show)
stats — max of each counter + per-day union
mappings — union by key, with manual pins winning

It runs on a 15-minute alarm, on startup, on a debounced local change, and on the Sync now button. Each store is one JSON blob per user in a sync_blobs table, scoped to the signed-in user by row-level security.

Developer setup (one-time, to bake in the Supabase client)

In your Supabase project’s SQL editor, create the table + RLS policies:

create table if not exists public.sync_blobs (
  user_id    uuid        not null references auth.users(id) on delete cascade,
  kind       text        not null check (kind in ('settings','history','stats','mappings')),
  data       jsonb       not null default '{}'::jsonb,
  updated_at timestamptz not null default now(),
  primary key (user_id, kind)
);
alter table public.sync_blobs enable row level security;
create policy "own rows: select" on public.sync_blobs for select using (auth.uid() = user_id);
create policy "own rows: insert" on public.sync_blobs for insert with check (auth.uid() = user_id);
create policy "own rows: update" on public.sync_blobs for update using (auth.uid() = user_id) with check (auth.uid() = user_id);
create policy "own rows: delete" on public.sync_blobs for delete using (auth.uid() = user_id);

Authentication → Providers → Google: enable it and add a Google OAuth client ID + secret (Google Cloud Console redirect URI: https://<project-ref>.supabase.co/auth/v1/callback).
Authentication → URL Configuration → Redirect URLs: add both extension IDs, since package.mjs strips the manifest key for the store build so dev and store installs get different chromiumapp.org origins:
```
https://jcfmdllkakmjkihgphmmimhiehcbbfei.chromiumapp.org/
https://jbmbolipkbppndjookmhmpceipfekhmi.chromiumapp.org/
```
Paste the Project URL and anon key into src/shared/supabase-config.ts, and add the project origin to host_permissions in scripts/build.mjs, then rebuild.

Sign-in uses Google OAuth via chrome.identity.launchWebAuthFlow (implicit flow); the session is stored locally and refreshed automatically. The anon key is safe to ship — it’s public by design and guarded by the RLS above.

Project layout

src/
├─ content/                # runs on the watch page (all frames)
│  ├─ index.ts             #   entry: wires the per-episode session together
│  ├─ navigation.ts        #   SPA episode-change detection (History API + poll)
│  ├─ player.ts            #   locate <video>, seek helper
│  ├─ meta.ts              #   scrape series/season/episode (JSON-LD, og:title)
│  ├─ skip-api.ts          #   ask the worker for skip-events data
│  ├─ skip-engine.ts       #   seek-mode auto-skip
│  ├─ dom-skip.ts          #   fallback: click the native skip button
│  ├─ autonext.ts          #   auto-play next episode
│  ├─ keep-watching.ts     #   dismiss "still watching?" / profile prompts
│  ├─ auto-pip.ts          #   auto Picture-in-Picture on tab switch
│  ├─ pip-button.ts        #   PiP button injected into the player control bar
│  ├─ pip-enable.ts        #   clear Crunchyroll's disablePictureInPicture flag
│  ├─ progress.ts          #   report the current episode to the tracker
│  └─ toast.ts             #   "Skipped X — Undo" overlay
├─ background/
│  └─ service-worker.ts    # skip-events fetch (avoids CORS) + MAL sync + cloud sync
├─ options/                # full settings page (fallback)
├─ sidepanel/              # the side panel: show view, home dashboard, settings,
│                          #   MAL card, rails (seasons/characters/reviews/trending)
├─ shared/                 # settings, messages, MAL client, tracker store, history,
│                          #   stats, Supabase client + cloud-sync engine, parsers
└─ assets/icons/
scripts/
├─ build.mjs               # esbuild bundler + MV3 manifest generation → dist/
└─ package.mjs             # stage dist/ into a Chrome Web Store upload zip

Build & load

npm install
npm run build    # type-checks (tsc --noEmit), then esbuild-bundles to dist/

Each entry is bundled as a single self-contained IIFE (no code-splitting, no dynamic import()) and the content script is declared directly in the manifest. This matters: Crunchyroll’s player runs in a cross-origin iframe (static.crunchyroll.com/.../player.html) with a strict CSP, and a dynamic-import-based content-script loader (e.g. @crxjs) gets blocked there — so the skip code would never run where the video actually is. Manifest-declared content scripts are injected by Chrome and bypass the page CSP.

Then in Chrome / Edge:

Open chrome://extensions.
Enable Developer mode (top-right).
Click Load unpacked and select the dist/ folder.
Open any Crunchyroll /watch/... episode.

After each rebuild, click the reload ↻ icon on the extension’s card in chrome://extensions so Chrome picks up the new dist/, then reload the Crunchyroll tab (content scripts aren’t re-injected into already-open tabs).

Click the toolbar icon to open the side panel (needs Chrome 114+); its Settings view covers everything, with the standalone options page as a fallback.

Verifying it works

Open an episode with an intro → it should auto-skip, with a toast.
Undo in the toast restores your position and won’t re-skip that segment.
Let an episode reach the credits → outro skip and (if enabled) auto-next.
Navigate to another episode without reloading → still works (SPA case).
Toggle settings in the panel → they apply live, no reload needed.
With MAL connected, a short way into an episode the panel’s MAL card (and your MAL list) should reflect the current episode.
The watch-page DevTools console shows the content script’s activity; the service worker (chrome://extensions → Inspect views: service worker) shows skip-events fetches, any 404s (normal for episodes with no published data), and watched: … lines tracing each MyAnimeList sync.

License

MIT

This site is open source. Improve this page.