Babbel2Anki

Chrome Extension which imports and syncs Babbel vocabulary to Anki. Supports auto-syncing(WIP), customising deck and card template for syncing.

What is it

Babbel - a German subscription-based language learning app and e-learning platform with more than 14 languages being offered at the moment.
Anki - Anki is a free and open-source flashcard program that utilizes spaced repetition. Spaced repetition has been shown to increase rate of memorization.
Anki Desktop - computer version of Anki.
AnkiConnect - addon for Anki Desktop.

How to use

TL;DR:

1. Install this extension from Chrome Web Store or from latest release. Here is a tutorial on how to load local version of the extension.
2. Open Anki Desktop with AnkiConnect addon.
3. Update AnkiConnect CORS policy(reasoning explained below): Anki Desktop -> Tools -> Addons -> AnkiConnect -> Config-> "webCorsOriginList": ["*"]
4. Open Review section of Babbel with any language of your choice.
5. Click Sync current page with Anki button.
6. Check your Anki Desktop for new deck BabbelDeck with all your words from Babbel.

This extension loads only the words which are currently on page. That means:
1. Select "100 items per page" in the bottom left corner if you want to load more words in bigger groups, but longer time
2. If you have more than 100 words, please click manually on next page and then once more on Sync With Anki
This is because this extension doesn't make any api calls to Babbel, instead it reuses already loaded vocabulary on the page.

More detailed guide

Install AnkiConnect. Now you have to allow AnkiConnect to receive calls from this extension via setting webCorsOriginList(Anki Desktop -> Tools -> Addons -> AnkiConnect -> Config):

• "webCorsOriginList": ["*"] to allow calls from any resourse
• "webCorsOriginList": ["chrome-extension://hdihhgoahdggcdndkepomdlbjhngghig"] to allow calls only from this extension. Replace hdihhgoahdggcdndkepomdlbjhngghig with ID from chrome://extensions

Now with Anki Desktop with AnkiConnect addon being set up:

1. Install extension from Chrome Web Store. Or go to: chrome://extensions, enable Developer mode and load app as an unpacked extension.
2. Optional: Set custom deck name, there is a popup with settings if you click on extension icon.

1. Login to Babbel and open Review section of Babbel. It opens a review section of a selected language.
   Sync with Anki is a new button coming from Babbel2Anki which allows to manually sync to configured deck. Click on it to initiate the sync process. If the button is not active, it means that Anki is not running or AnkiConnect is not set up.
2. Babbel2Anki will:
   • Create a deck with name BabbelDeck(if such deck already exists, nothing happens)
   • Create a card template (model) with name BabbelModel and all necessary fields (if such model already exists, nothing happens)
   • Load words from current open page in My vocab words to deck BabbelDeck. Adds only new words (which are not in the deck).
   • Shows notification about an amount of new words which were saved in Anki (e.g. if notification says that new words/total words is 10/50 - means that other 40 words are already in Anki deck).
     
3. Check Anki Desktop for BabbelDeck:
4. Check Dev Tools Console for any errors/debug messages. To Open Dev Tools Console - open the Chrome Menu in the upper-right-hand corner of the browser window and select More Tools > Developer Tools. You can also use the shortcut Option + ⌘ + J (on macOS), or Shift + CTRL + J (on Windows/Linux).

Things to do

• Maximum size of items is 100, and user has to click on pagination multiple times. Check if possible to:
  • request 1k+ words at the same time or
  • use pagination to fetch all words
• Button to manually sync(add to review html page)
• Checkbox to temporary disable auto-sync
• Rethink AutoSync mechanism
• Merging vocabularies(right now extension takes vocabulary from Babbel and sends it to Anki, even it was added before)
• Better workflow for multiple decks
• Extend to other learning web-sites(like Duolingo) Done in a separate extenstion
• Custom Sync server
• Error handling if AnkiConnect is not installed

Links

• Anki
• AnkiConnect
• Github Primer
• Google Chrome Extension Development
• generator-chrome-extension
• Intercepting body requests in chrome extension
• Icons used from