--- /dev/null
+{
+ "manifest_version": 2,
+ "name": "Nicos Weg Vocab Exporter",
+ "description": "",
+ "version": "1.0",
+ "browser_specific_settings": {
+ "gecko": {
+ "strict_min_version": "54.0a1"
+ }
+ },
+ "sidebar_action": {
+ "default_icon": "icons/star.png",
+ "default_title" : "Export vocabulary",
+ "default_panel": "panel.html"
+ },
+ "permissions": ["<all_urls>", "scripting", "clipboardWrite", "downloads"]
+}
--- /dev/null
+<!DOCTYPE html>
+
+<html>
+ <head>
+ <meta charset="utf-8">
+ <link rel="stylesheet" href="panel.css"/>
+ <link href="https://cdn.jsdelivr.net/npm/
[email protected]/dist/cdn/beer.min.css" rel="stylesheet">
+ <script type="module" src="https://cdn.jsdelivr.net/npm/
[email protected]/dist/cdn/beer.min.js"></script>
+ <script type="module" src="https://cdn.jsdelivr.net/npm/
[email protected]/dist/cdn/material-dynamic-colors.min.js"></script>
+ </head>
+
+ <body>
+ <main class="responsive">
+ <p>
+ Configure the deck and card type before exporting.
+ </p>
+ <form id="vocab-form">
+ <div class="field label border" id="deck">
+ <input type="text" placeholder="Deck" id="deck-input"/>
+ <label>Deck</label>
+ <output id="deck-hint">The deck name</output>
+ </div>
+ <div class="field label border" id="cardtype">
+ <input type="text" placeholder="Card type" id="card-type-input"/>
+ <label>Card type</label>
+ <output id="card-type-hint">The card type</output>
+ </div>
+ <button class="responsive">
+ Export
+ </button>
+ </form>
+ <div id="output" class="responsive">
+ <pre id="output-field"></pre>
+ <button class="square extra" id="output-copy">
+ <i>content_copy</i>
+ </button>
+ </div>
+ </main>
+ <script src="panel.js"></script>
+ </body>
+
+</html>
--- /dev/null
+const deckContainer = document.getElementById("deck")
+const deckInput = document.getElementById("deck-input")
+const deckHint = document.getElementById("deck-hint");
+
+const cardTypeContainer = document.getElementById("cardtype")
+const cardTypeInput = document.getElementById("card-type-input")
+const cardTypeHint = document.getElementById("card-type-hint");
+
+const form = document.getElementById("vocab-form")
+
+const outputField = document.getElementById("output-field");
+const outputCopy = document.getElementById("output-copy");
+
+function validate(
+ el,
+ cond,
+) {
+ if (cond) {
+ el.classList.add("invalid");
+ } else {
+ el.classList.remove("invalid");
+ }
+}
+
+function onSubmit(e) {
+ e.preventDefault()
+
+ const deck = deckInput.value;
+ const cardType = cardTypeInput.value;
+
+ validate(deckContainer, !deck);
+ validate(deckHint, !deck);
+ validate(cardTypeContainer, !cardType);
+ validate(cardTypeHint, !cardType);
+
+ if (!deck || !cardType) {
+ return;
+ }
+
+ doExport(deck, cardType);
+}
+
+async function doExport(
+ deck,
+ cardType
+) {
+
+ const [tab] = await browser.tabs.query({
+ active: true,
+ currentWindow: true,
+ });
+
+ const results = await browser.scripting.executeScript({
+ target: {
+ tabId: tab.id
+ },
+ files: ['exporter.js']
+ })
+
+ let s = `#separator:Comma
+#html:true
+#notetype:${cardType}
+#deck:${deck}
+`;
+
+ for (const { w, t } of results[0].result) {
+ s += `"${w}","${t}"\n`
+ }
+
+ outputField.innerText = s;
+ download(s);
+}
+
+function download(s) {
+ const blob = new Blob([s], {
+ type: 'text/plain'
+ })
+
+ const url = URL.createObjectURL(blob);
+
+ browser.downloads.download({
+ url,
+ saveAs: true,
+ filename: "Nicos Weg Vocabulary.txt"
+ })
+}
+
+form.addEventListener("submit", onSubmit);
+
+outputCopy.addEventListener("click", () => {
+ if (outputField.innerText) {
+ navigator.clipboard.writeText(outputField.innerText);
+ alert("Vocabulary was copied to clipboard")
+ } else {
+ alert("There is nothing to copy!")
+ }
+});