Add image support!

Author: dispherical

libs/mimes.js

@@ -0,0 +1,12 @@
+window.mimes = {
+    'image/jpeg': '.jpg',
+    'image/png': '.png',
+    'image/gif': '.gif',
+    'image/bmp': '.bmp',
+    'image/webp': '.webp',
+    'image/svg+xml': '.svg',
+    'audio/mpeg': '.mp3',
+    'audio/wav': '.wav',
+    'audio/ogg': '.ogg',
+    'audio/midi': '.mid'
+}

manifest.json

@@ -1,7 +1,7 @@
 {
   "name": "Quizlet to Anki",
   "description": "Turn your Quizlet flashcards into Anki decks",
-  "version": "0.0.0.1",
+  "version": "0.0.0.2",
   "manifest_version": 3,
   "action": {
     "default_popup": "src/popup.html",

quizlet-fetcher

@@ -17,12 +17,13 @@ <h1>Quizlet to Anki</h1>
 
     <div id="results">Loading. Please wait.</div><br>
     <button id="generate" disabled="true">Download</button>
+    <script src="/libs/mimes.js"></script>
     <script src="/libs/file-saver.js"></script>
     <script src="/libs/js-sha1.js"></script>
     <script src="/libs/jszip.js"></script>
     <script src="/libs/sql.js"></script>
     <script src="/libs/apkg-export.js"></script>
-    <script src="/quizlet-fetcher/dist/parser.js"></script>
+    <script src="/quizlet-fetcher/dist/index.min.js"></script>
     <script src="popup.js"></script>
   </body>
 </html>

src/popup.html

@@ -5,13 +5,13 @@ async function main() {
 
         if (response.error) return document.querySelector("#results").innerText = response.error
 
-        const quizlet = new window.QuizletFetcher(response.html)
+        const quizlet = new window.QuizletFetcher(response.html).getJSON()
 
-
-        document.querySelector("#results").innerText = `${quizlet.title}\nDescription: ${quizlet.description || "No description found."}\n${quizlet.cards.length} card(s) found`
+        document.querySelector("#results").innerText = `${quizlet.title}\n\nAuthor: ${quizlet.author}\n\nDescription: ${quizlet.description || "No description found."}\n\n${quizlet.cards.length} card(s) found with ${quizlet.cards.filter(a => a.image).length} image(s)`
         window.cardSet = quizlet
         document.getElementById("generate").disabled = false
     } catch (e) {
+        console.error(e)
         document.querySelector("#results").innerText = "Failed to get and parse HTML. This can be caused by the page not being a Quizlet Flashcard, or the page not being fully loaded when you open this extension. Try closing and opening it again."
     }
 }
@@ -20,12 +20,24 @@ document.getElementById("generate").addEventListener("click", makeCards);
 async function makeCards() {
 
     const apkg = new window.apkgExport(window.cardSet.title)
-    window.cardSet.cards.forEach(card => {
-        apkg.addCard(card.term, card.definition)
+    let promises = window.cardSet.cards.map(async card => {
+        const id = Math.random().toString(32).slice(2)
+
+        if (card.image) {
+            const img = await (await fetch(card.image.replace(/^https:\/\/.*?\/(https?:\/\/.*)$/, "$1"))).blob()
+            var filename = id
+            window.mimes[img] ? filename = filename + window.mimes[img] : null
+            apkg.addMedia(filename, img)
+            console.log(apkg.media)
+        }
+        apkg.addCard(card.term, card.image ? `${card.definition} <br><img src="${id}">` : card.definition)
     })
 
-    apkg.save()
-        .then(zip => {
-            saveAs(zip, "output.apkg")
+    Promise.all(promises)
+        .then(() => {
+            apkg.save()
+                .then(zip => {
+                    saveAs(zip, "output.apkg")
+                })
         })
 }