Moegi

2024-01-08.21-17-48.mp4

An extension for Chromium browsers to customize lyrics in Spotify Web Player.

Report a Bug · Request a Feature

Features lyrics translation for over 100 languages powered by Google Translate and
romanization for Chinese, Korean, Japanese, Cyrillic, and many more non-latin scripts!
Tested on Google Chrome (135.0.7049.52) and Brave Browser (137.1.79.119) on Linux

What's New in Version 2?

Most of the changes affects developer experience instead of users, you may not notice anything different from version 1 except some layout or text changes. My main focus is to migrate the framework from CRXJS to WXT for more streamlined development.

There are some things to do:

• Rework to WXT 💚
• Auto-release on new tags (ci/cd) 💚
• Reset defaults button
• DeepL translation 💔 (#20)
• Reimplement fullscreen handling 💚
• Implement active lyric listener
• Picture-in-picture lyrics
• Update README, video, and screenshots

Getting Started

Chromium browsers doesn't support installing extensions directly outside of Chrome Web Store, so follow these steps carefully:

1. Download the latest release (moegi-x.x.x.zip) archive from https://github.com/sglkc/moegi/releases/latest
2. Extract and remember the location of the extracted folder (moegi-x.x.x)
3. Open Chrome extensions page at chrome://extensions
4. Toggle developer mode at the topmost bar
5. Click on the new Load unpacked button
6. Find and select the folder you extracted earlier (moegi-x.x.x)
7. Moegi should be added to the list and switched on, pin the extension for easy access
   • Click on the puzzle piece icon on the top-right
   • Find Moegi and click on the pin icon
8. Open Spotify Web Player (https://open.spotify.com)
9. Play any song and open the lyrics page by clicking the microphone icon on bottom-right
10. If you click on Moegi, it should now display a popup, nice!

Steps screenshot

Features

Show full extension features screenshot

Lyrics Styling

The most basic feature to customize your Spotify lyrics screen:

Feature	Default	Options
Text Align	Left	Left, Center, Right
Font Size	1em	0.5-2.5em
Spacing	0px	0-64px
Colors	None	Background, Passed, Active, Inactive, Translation, Romanization

There is an integration issue with the colors, so if you want to reset the colors, use the Reset to defaults button

Translation

Library used: google-translate-api-x

Translate lyrics line-by-line using Google Translate, successful translations are cached temporarily in storage to avoid Google Translate limit. Note that translations are not accurate and should not be used literally! Read about privacy policy.

Feature	Default	Options
Font Size	1em	0.5-1.5em
Language Target	auto	Over 100 languages

Romanization

Mainly supported languages:

1. Japanese
2. Korean
3. Chinese
4. Cyrillic

Other than that, use Anything else.

Romanize lyrics that has the selected language's characters, if none then it will skip to the next line.

Feature	Default	Options
Language	Any	Japanese, Korean, Chinese, Cyrillic, Any
Font Size	1em	0.5-1.5em

Japanese

Libraries used: @sglkc/kuroshiro, @sglkc/kuroshiro-analyzer-kuromoji

Note that Japanese romanization may not be accurate, particularly on kanji!

Feature	Default	Options
To	Romaji	Romaji, Hiragana, Katakana
Mode	Spaced	Normal, Spaced, Okurigana, Furigana
Romaji System	Hepburn	Nippon, Passport, Hepburn
Okurigana Delimiter	( )	Custom delimiters

Differences between each mode in hiragana

Original Text: 感じ取れたら手を繋ごう、重なるのは人生のライン and レミリア最高！

1. Normal:
   かんじとれたらてをつなごう、かさなるのはじんせいのライン and レミリアさいこう！

2. Spaced:
   かんじとれ たら て を つなご う 、 かさなる の は じんせい の ライン and レミ リア さいこう ！

3. Okurigana:
   感(かん)じ取(と)れたら手(て)を繋(つな)ごう、重(かさ)なるのは人生(じんせい)のライン and レミリア最高(さいこう)！

4. Furigana:
   感(かん)じ取(と)れたら手(て)を繋(つな)ごう、重(かさ)なるのは人生(じんせい)のライン and レミリア最高(さいこう)！

Read about romaji romanization systems (for nerds).

Korean

Library used: @romanize/korean

Feature	Default	Options
Hangul System	Revised	Revised, McCune, Yale

Differences between each romanization system

Original Text: 우두커니 그 자리에 서서 기다리려나 봐

1. Revised (Revised Romanization of Korean):
   udukeoni geu jarie seoseo gidariryeona bwa

2. McCune (McCune–Reischauer romanization):
   utuk'ŏni kŭ carie sŏsŏ kitariryŏna pwa

3. Yale (Yale romanization of Korean):
   utukheni ku caliey sese kitalilyena pwa

Cyrillic

Library used: cyrillic-to-translit-js

Feature	Default	Options
Language	Russian	Russian, Ukrainian

Chinese

Library used: pinyin-pro

Feature	Default	Options
Ruby text	OFF	ON, OFF

Any

Library used: any-ascii

Provides a lot of conversions at the cost of accuracy, read more from the package repository.

Development

Prerequisites

• Node ^22

• pnpm ^10

  npm install -g pnpm

Steps

If you wish to make modifications or just want to build the extension yourself:

1. Clone the repository

git clone https://github.com/sglkc/moegi.git
cd moegi

2. Install dependencies using pnpm

pnpm install

3. Start extension development and launch test browser

pnpm dev

3. Build extension

pnpm build

Contributing

Any kind of contributions are greatly appreciated! You can start by forking this repository then create a pull request.

1. Fork the repository
2. Clone the forked repository to your machine
3. Create your branch (git checkout -b feat/new-feature)
4. Commit your changes (git commit -m 'feat: add this and that')
5. Push to the branch (git push origin feat/new-feature)
6. Open a pull request

Disclaimer

Moegi is not affiliated with Spotify in any way. Moegi is for educational purposes only and should not be used to violate Spotify's terms of service.

Privacy Policy

1. Moegi does not track your listening habits, your IP address, or any other personal information. Everything is done locally in the web browser, except for the translation feature.

2. The translation feature uses Google Translate, which is a third-party service. Google may collect some data about your use of the translation feature, such as the text you translate and the language you translate it to. For more information about Google's privacy policy, please see https://policies.google.com/privacy.

3. Moegi uses a small amount of storage space on your computer to store the options that you have customized and lyrics you have translated. It is not used to store any other personal information.

License

Distributed under the MIT License. See LICENSE for more information.