Moji

A Chrome (MV3) extension for looking up Japanese while reading manga: type kanji/kana/romaji/English or draw a kanji with the mouse, and get jisho-style result cards with readings, pitch accent, meanings, per-kanji breakdowns, and Tatoeba example sentences — plus a saved-words list you can review and export.

Think of it as a personal mash-up of jisho.org and kanji.sljfaq.org that lives one keyboard shortcut away on any page.

Features

Lookup

• Search box — accepts kanji, kana, romaji, or English. The raw text goes to jisho, which handles all four (japan, nihon, にほん, 日本).
• Drawing canvas — draw a kanji; candidates appear live via KanjiCanvas. Clicking a candidate commits it IME-style: a trailing kana or romaji run in the search box is replaced by the kanji, so you can build compounds character by character.
• Romaji → kanji candidates without drawing — typing shin shows the kanji read しん (ranked by Kanjidic frequency) in the same candidate row.
• Result cards from jisho: word, reading, pitch accent bars (Rikaichamp-style, from the Kanjium dataset), common / JLPT tags, abbreviated parts of speech, and senses.
• Single-kanji info card (offline, from Kanjidic2) prepended for one-character queries: on/kun readings, meanings, JLPT level, grade, stroke count.
• Click a card to expand it into:
  • a per-kanji breakdown — each kanji in the word with its on/kun readings and meanings;
  • example sentences from Tatoeba with English translations, furigana ruby (sanitized to ruby/rp/rt only), and the search term highlighted.
• Click-to-copy on any word, reading, or kanji (toggleable).

Saved words

• Star (☆/★) on every result card — jisho entries and kanji cards alike. The toolbar button shows a live count.
• A full saved-words page (saved.html) with a romaji-aware filter (nihon matches 日本), part-of-speech chips (common / noun / verb / adjective / adverb / expression / kanji), sorting (newest, oldest, by word, by JLPT), per-card delete, expandable example sentences, CSV export, and clear-all.
• Everything lives in chrome.storage.local and syncs live across the popup, overlay, and any open tab.

Settings & theming

A dedicated settings page (settings.html) with:

• Theme — dark / light / sepia, with live previews. Applied synchronously at page load from a localStorage mirror, so there's no flash of the wrong theme; the drawing stroke color follows the theme too.
• Display — font size (small/medium/large); hide the drawing canvas for a compact typing-only popup.
• Lookup — max results per search (5/10/20), pitch accent bars on/off, furigana on example sentences, click-reading-to-copy.
• Saved words — default sort order.
• A link out to chrome://extensions/shortcuts for rebinding the shortcut.

Two ways to open

1. Click the toolbar icon (popup).
2. ⌘+Shift+K (Mac) / Ctrl+Shift+K (Windows/Linux) — opens a draggable, resizable overlay on top of the current page, so you can park it next to your manga. Position and height are remembered; pressing the shortcut again (or Escape at page level) closes it.

Keyboard

Key	Action
⌘/Ctrl+Shift+K	toggle the page overlay
/	focus the search box and clear it
Enter	run the query immediately (skip the debounce)
Esc	clear search + canvas + results (or close the overlay from the page)

Build

npm install
npm run build:data   # one-time: downloads Kanjidic2 + Kanjium pitch accents → data/*.json
npm run build        # bundles dist/

Then in Chrome:

1. Open chrome://extensions
2. Enable Developer mode
3. Click Load unpacked → choose this project's dist/ folder

Other scripts: npm run watch (esbuild watch mode), npm run typecheck (tsc --noEmit), npm run build:dict / npm run build:pitch individually.

Architecture

File	Role
src/popup.html + popup.ts + popup.css	the main UI — search, canvas, candidates, result cards
src/saved.html + saved.ts + saved.css	saved-words page: filter, chips, sort, CSV export
src/settings.html + settings.ts + settings.css	settings page; every control writes one field
src/content.ts + content.css	injected on demand; draggable/resizable iframe wrapper around popup.html, with the theme painted inline on the frame
src/background.ts	service worker; toggles the overlay on toggle-overlay, and proxies jisho/Tatoeba fetches (MV3 pages hit CORS, the SW with host_permissions doesn't)
src/theme.css + theme-bootstrap.js	shared theme tokens; the bootstrap applies theme + font size before first paint
src/lib/settings.ts	settings store (chrome.storage.local + localStorage mirror), change subscriptions
src/lib/storage.ts	saved-word list; identity is `` `${word}
src/lib/dict.ts	lazy-loads data/kanjidic.json; also builds a reading → kanji index for romaji candidates
src/lib/jisho.ts	jisho.org API client (multi-result word lookup), in-memory cache
src/lib/tatoeba.ts	tatoeba.org example-sentence client, in-memory cache
src/lib/sentences.ts	ruby-HTML sanitizer (allowlist: ruby/rp/rt, no attributes) + term highlighting
src/lib/pitch.ts	lazy-loads data/pitch.json (Kanjium pitch accent positions)
src/lib/pitch-render.ts	renders pitch contour as inline SVG above each reading
src/vendor/kanji-canvas.min.js + ref-patterns.js	KanjiCanvas (MIT) — the recognition engine
scripts/build.mjs	esbuild bundling: ESM for popup/saved/settings/background, IIFE for content; copies static assets
scripts/build-dict.mjs	downloads Kanjidic2 XML → compact JSON keyed by kanji literal
scripts/build-pitch.mjs	downloads Kanjium accents → JSON keyed by `` `${word}

The popup HTML is the single source of truth for the main UI: when you press the keyboard shortcut, the content script just creates an iframe pointing at it, so the toolbar popup and the page overlay are byte-identical.

Attribution / licenses

• KanjiCanvas by Dominik Klein (asdfjkl) — MIT (src/vendor/LICENSE-KanjiCanvas.txt). Implements the stroke-correspondence algorithm of Wakahara et al.
• Kanjidic2 by EDRDG — released under the EDRDG license. Required attribution included.
• Kanjium pitch accents by mifunetoshiro et al. — public domain (CC0).
• wanakana by WaniKani — MIT.
• Stroke pattern data (via KanjiCanvas) is derived from KanjiVG by Ulrich Apel, CC BY-SA 3.0.
• Compound-word data from jisho.org and example sentences from Tatoeba (CC BY 2.0 FR) are queried at runtime; no such data is bundled.