fix: make it work again

Fixes:
- insert button only when vocabulary page is rendered
- fix filters and selector related to Lingualeo CSS changes
- fix button appearance due to Lingualeo CSS changes

package.json

@@ -8,14 +8,14 @@
     "esm": "^3.2.25",
     "parcel-bundler": "^1.12.3",
     "parcel-plugin-web-extension": "^1.5.2",
-    "standard": "^14.1.0",
+    "standard": "17.0.0",
     "standard-version": "^7.0.0",
     "tap-min": "^2.0.0",
     "zora": "3.1.7"
   },
   "scripts": {
     "test": "node src/js/all.test.js | tap-min",
-    "lint": "standard",
+    "lint": "standard --fix",
     "start": "yarn build && parcel watch src/manifest.json",
     "build:locales": "cp -r src/_locales/ src/js/locales",
     "build": "yarn build:locales && parcel build src/manifest.json --no-minify && sed -i '' '1s;^;var ;' ./dist/js/index.js",

src/background.js

@@ -24,7 +24,7 @@ chrome.runtime.onMessage.addListener(
       const resultBlob = new Blob(arg.payload.data, { type: 'text/csv;charset=utf-8' })
       const url = URL.createObjectURL(resultBlob)
       chrome.downloads.download({
-        url: url,
+        url,
         filename: arg.payload.name
       })
     }

src/content.js

@@ -20,6 +20,8 @@ const contentPort = chrome.runtime.connect({
   name: 'ankileo.background-content'
 })
 
+console.log('Yo', contentPort)
+
 contentPort.onMessage.addListener((event) => {
   if (event.type === 'ankileo.init') {
     window.postMessage(event)

src/js/button.html.js

@@ -1,7 +1,7 @@
 const html =
 `<details id="ankileo-btn" class="ll-page-vocabulary__filter__action-item mobile-hidden">
-  <summary class="ll-button ll-button__m-color-white ll-button__m-size-default ll-button__m-bluish-grey">
-    <span class="ll-button__content">
+  <summary class="ll-leokit__button ll-leokit__button__m-color-bluish-grey">
+    <span class="ll-leokit__button__content">
       {Export}
     </span>
   </summary>

src/js/dictPageConfig.js

@@ -1,4 +1,4 @@
-const dictPageRE = new RegExp('https?://lingualeo.com/(.+?)/dictionary/vocabulary/(.+)$')
+const dictPageRE = /https?:\/\/lingualeo.com\/(.+?)\/dictionary\/vocabulary\/(.+)$/
 
 export default (url) => {
   const match = url.match(dictPageRE)

src/js/dictPageConfig.test.js

@@ -4,7 +4,7 @@ const dictPageConfig = require('./dictPageConfig').default
 
 describe('dictPageConfig', t => {
   t.test('dictPage', t => {
-    var tests = [
+    const tests = [
       {
         url: 'https://lingualeo.com/ru/dictionary/vocabulary/my',
         expected: { localeName: 'ru', wordGroup: 1 }

src/js/getLeoFilters.js

@@ -31,6 +31,8 @@ const getSelectedStatus = () => {
     '.ll-page-vocabulary__filter__toggle .ll-toggle-group'
   )
 
+  if (!toggleGroup) return statuses[0];
+
   const selectedStatusIndex = [].slice.call(toggleGroup.childNodes)
     .findIndex(a => a.classList.contains('ll-toggle-group-option__m-selected'))
 

src/js/index.js

@@ -12,11 +12,11 @@ let locale
 const api = new LeoApi()
 
 const showToolTip = (message, style) => {
-  document.querySelector('#ankileo-btn .ll-button__content').textContent = message
+  document.querySelector('#ankileo-btn .ll-leokit__button__content').textContent = message
 }
 
 const resetToolTip = () => {
-  document.querySelector('#ankileo-btn .ll-button__content').textContent = locale.t('web_btn_export')
+  document.querySelector('#ankileo-btn .ll-leokit__button__content').textContent = locale.t('web_btn_export')
 }
 
 const download = (filter, groupId, expectedNumberOfWords) => {
@@ -59,7 +59,7 @@ const download = (filter, groupId, expectedNumberOfWords) => {
 
 const selectedWordsIds = () => {
   return [].slice.call(document.querySelectorAll(
-    '.sets-words__col .ll-leokit__checkbox__input'
+    '.ll-sets-words__col .ll-leokit__checkbox__input'
   )).filter(a => a.checked).map(a => parseInt(a.id))
 }
 
@@ -96,18 +96,14 @@ const createExportButton = (locale, totalWordsCount, groupId) => {
     .prepend(button.getDomElement(handlers))
 }
 
-const getUserLocale = () => {
+const getUserLocale = async () => {
   try {
-    // Lingualeo sets window['context'] with an inline script
-    // however at the runtime window.context is overwritten by something else
-    // hacking around it by parsing inline script body
-    return [].slice.call(document.querySelectorAll('head script'))
-      .find(n =>
-        n.textContent.trim().startsWith('window[\'context\']')
-      ).textContent.match('"userLang":"(.+?)"')[1]
+    return api.getProfile().then(profile => {
+      return profile.lang_interface
+    })
   } catch (e) {
     console.error(e)
-    return 'en'
+    return Promise.resolve('en')
   }
 }
 
@@ -117,19 +113,34 @@ const initExportButton = ({ wordGroup }) => {
 
   // don't add export button, if there is one already
   if (document.getElementById('ankileo-btn')) return
-
   if (document.querySelectorAll('div.ll-page-vocabulary__header').length > 0) {
-    locale = new Locale(getUserLocale())
-    api.getWordCount(wordGroup).then(wordCount =>
-      createExportButton(locale, wordCount, wordGroup)
-    )
+    getUserLocale().then(localeStr => {
+      locale = new Locale(localeStr)
+      api.getWordCount(wordGroup).then(wordCount =>
+        createExportButton(locale, wordCount, wordGroup)
+      )
+    })
   }
 }
 
-const pageConfig = dictPageConfig(window.location.href)
-if (pageConfig) {
-  initExportButton(pageConfig)
-}
+let inited = false
+
+const onNewPageElement = (mutationsList) =>
+  mutationsList.forEach((m) => {
+    if (!inited && m.target.classList[0] === 'll-page-vocabulary') {
+      inited = true
+      setTimeout(() => {
+        const pageConfig = dictPageConfig(window.location.href)
+        if (pageConfig) {
+          initExportButton(pageConfig)
+        }
+      }, 500);
+    }
+  })
+const observer = new window.MutationObserver(onNewPageElement)
+const pageBody = document.getElementsByTagName('body')[0]
+const config = { attributes: false, childList: true, subtree: true }
+observer.observe(pageBody, config)
 
 window.addEventListener('message', function (event) {
   // We only accept messages from ourselves

src/js/lingualeo/api.js

@@ -29,6 +29,10 @@ export default class LeoApi {
       .then(rsp => JSON.parse(rsp).data)
   }
 
+  getProfile () {
+    return this._request('GetUserProfile')
+  }
+
   getWordSets () {
     return this._request('GetWordSets', GetWordSetsRequest)
   }

src/manifest.json

@@ -8,6 +8,7 @@
 	"default_locale": "en",
 	"permissions": [
 		"http://lingualeo.com/",
+		"https://lingualeo.com/",
 		"downloads",
 		"background",
 		"webNavigation"