CantoTranslate Browser Extension

Learn Cantonese straight from your web browser!

Translates and speaks Cantonese from traditional Chinese words!

Supports Chrome and Firefox!

How to use:

• Simply double click or highlight and hover on a word or phrase and definitions and Jyutping will appear!
• You can also click on the sound icon to hear the pronunciation in Cantonese!
• Any words without definitions will link you to a Google Translate link!

Version 1.1

• Allow user to highlight and hover over text to translate text

Release

Chrome Extension: https://chrome.google.com/webstore/detail/cantotranslate/idagpklnbkefmgdajpopkngfnnjiiadj

Firefox Extension: https://addons.mozilla.org/en-US/firefox/addon/cantotranslate/

Chrome: Install and develop

To install, please do the following:

1. Run npm install to install dependencies
2. Run npm run watch-chrome to build the application into dist folder with development feature flags, this will hot reload changes
3. Load dist folder into Chrome extensions to install extension

Note: Turn on and off feature flags in webpack.dev.js

Chrome: Install and distribute

To install, please do the following:

1. Run npm install to install dependencies
2. Run npm run build-chrome to build the application into dist folder
3. Zip up dist folder, this is what will be uploaded to Chrome developer dashboard

Firefox: Install and develop

To install, please do the following:

1. Run npm install to install dependencies
2. Run npm run watch-firefox to build the application into dist folder with development feature flags, this will hot reload changes
3. Go to Firefox URL about:debugging#/setup and click on manifest.json in dist folder to install extension

Note: Turn on and off feature flags in webpack.dev.js

Firefox: Install and distribute

To install, please do the following:

1. Run npm install to install dependencies
2. Run npm run build-firefox to build the application into dist folder
3. Go into the dist folder, select all the contents (files) in the dist folder and zip it
4. Submit the zip to Firefox addons developer dashboard

Screenshots

Credits

Dependencies

• WebSpeech 4.2
  • This library isn't version controlled, and downloaded directly from Sourceforge

Dictionaries

Definitions and readings were sourced from the following sites:

• cc-cedict: https://www.mdbg.net/chinese/dictionary?page=cc-cedict
  • cedict dictionary download
• cc-canto: https://cantonese.org/download.html
  • ccanto dictionary download
  • cccedict-canto readings download

Icons

Hong kong icons created by Good Ware - Flaticon

Development

• For the Chrome Extension Typescript React boilerplate: https://github.com/chibat/chrome-extension-typescript-starter