Merge pull request #77 from mdnsk/add-to-dict

Fix adding to dictionary

.babelrc

@@ -1,6 +1,6 @@
 {
   "presets": [
-    ["env", {
+    ["@babel/preset-env", {
       "modules": false,
       "targets": {
         "browsers": ["Firefox > 54", "last 2 Chrome versions"]

extension/manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 2,
   "name": "Leo Translate",
-  "version": "1.17.7",
+  "version": "1.18.0",
 
   "description": "Translate words on the internet pages using LinguaLeo API and add words to the LinguaLeo Dictionary.",
 
@@ -76,6 +76,7 @@
     "activeTab",
     "notifications",
     "storage",
+    "cookies",
     "*://api.lingualeo.com/*"
   ],
 

package.json

@@ -1,34 +1,33 @@
 {
   "name": "leo-translate",
   "description": "The Vue components of the extension",
-  "version": "1.17.7",
+  "version": "1.18.0",
   "author": "Mikhail <m.donsk@ya.ru>",
   "private": true,
   "scripts": {
-    "dev": "cross-env NODE_ENV=development webpack --watch --progress --hide-modules",
-    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
+    "dev": "cross-env NODE_ENV=development webpack --watch --progress",
+    "build": "cross-env NODE_ENV=production webpack --progress",
     "web-ext:run": "web-ext run --source-dir ./extension/",
     "web-ext:build": "web-ext build --source-dir ./extension/ --artifactsDir ./extension/web-ext-artifacts/",
     "web-ext:lint": "web-ext lint --source-dir ./extension/"
   },
   "dependencies": {
-    "debounce": "^1.2.0",
-    "epic-spinners": "^1.0.4",
-    "vue": "^2.5.22"
+    "debounce": "1.2.0",
+    "epic-spinners": "1.0.4",
+    "vue": "2.5.22"
   },
   "devDependencies": {
-    "babel-core": "^6.26.3",
-    "babel-loader": "^6.0.0",
-    "babel-preset-env": "^1.7.0",
-    "cross-env": "^3.0.0",
-    "css-loader": "^0.25.0",
-    "file-loader": "^0.9.0",
-    "node-sass": "^4.11.0",
-    "sass-loader": "^6.0.7",
-    "vue-loader": "^12.1.0",
-    "vue-template-compiler": "^2.5.22",
-    "web-ext": "^4.3.0",
-    "webpack": "^2.6.1",
-    "webpack-dev-server": "^2.11.5"
+    "@babel/core": "7.21.0",
+    "@babel/preset-env": "7.20.2",
+    "babel-loader": "9.1.2",
+    "cross-env": "3.0.0",
+    "css-loader": "6.7.3",
+    "sass": "1.58.3",
+    "sass-loader": "10.4.1",
+    "vue-loader": "15.10.1",
+    "vue-template-compiler": "2.5.22",
+    "web-ext": "7.5.0",
+    "webpack": "5.75.0",
+    "webpack-cli": "5.0.1"
   }
 }

src/Popup.js

@@ -46,9 +46,7 @@ export default class Popup {
       id: 'content-data',
       text,
       context,
-      frameIndex,
-      url: document.URL,
-      title: document.title
+      frameIndex
     };
 
     this.createPopup().contentWindow.postMessage(message, chrome.extension.getURL(''));

src/entry/background.js

@@ -9,9 +9,11 @@ import {
   PROXY_ALL_CONTENT_REFRESH_OPTIONS,
   BROWSER_ACTION_CURRENT_HOST,
   BACKGROUND_GET_CURRENT_HOST,
-  BACKGROUND_SHOW_NOTIFICATION
+  BACKGROUND_SHOW_NOTIFICATION,
+  BACKGROUND_ADD_WORD_TO_DICTIONARY
 } from '../messages';
-import { removeHtmlTags, extractHostname } from '../helpers';
+
+import { removeHtmlTags, extractHostname, returnJsonIfOk } from '../helpers';
 
 // Create context item
 if (chrome.contextMenus !== undefined) {
@@ -30,7 +32,7 @@ if (chrome.contextMenus !== undefined) {
 }
 
 // Listen for message to show in system notification
-chrome.runtime.onMessage.addListener(function (message, sender) {
+chrome.runtime.onMessage.addListener(function (message, sender, sendResponse) {
   // Messages that should be sent to the current tab.
   const proxyMessages = [
     PROXY_CONTENT_MOUSE,
@@ -60,6 +62,42 @@ chrome.runtime.onMessage.addListener(function (message, sender) {
         });
       }
     });
+  } else if (message.id === BACKGROUND_ADD_WORD_TO_DICTIONARY) {
+    browser.cookies.get({
+      url: `https://api.lingualeo.com/`,
+      name: 'userid'
+    }).then(async cookie => {
+      const { word, translation, context } = message;
+
+      const body = JSON.stringify({
+        apiVersion: '1.0.1',
+        userId: cookie?.value,
+        port: '1001',
+        data: [{
+          action: 'add',
+          valueList: {
+            wordValue: word,
+            wordSetId: 3,
+            translation: {
+              tr: translation,
+              ctx: context,
+              pic: "https://contentcdn.lingualeo.com/uploads/1611_1361481210.jpg"
+            }
+          },
+        }],
+      });
+
+      const headers = { 'Content-Type': 'application/json' };
+
+      const response = await fetch(
+        `https://api.lingualeo.com/SetWords`,
+        { body, method: 'POST', credentials: 'include', headers }
+      );
+
+      sendResponse(response.ok && await response.json() || { error_msg: 'Couldn\'t add word to dictionary' });
+    });
+
+    return true;
   } else if (proxyMessages.indexOf(message.id) > -1) {
     if (sender.tab) {
       chrome.tabs.sendMessage(sender.tab.id, message);

src/helpers.js

@@ -38,3 +38,15 @@ export function extractHostname (url) {
 
   return hostname;
 }
+
+/**
+ *
+ * @param response
+ */
+export function returnJsonIfOk(response) {
+  if (response.ok) {
+    return response.json();
+  }
+
+  throw new Error('Invalid response.');
+}

src/leoApi.js

@@ -1,3 +1,6 @@
+import { BACKGROUND_ADD_WORD_TO_DICTIONARY } from './messages';
+import { returnJsonIfOk } from './helpers';
+
 const config = {
   api: 'https://api.lingualeo.com',
   url: 'https://lingualeo.com',
@@ -17,25 +20,11 @@ export default {
    *
    * @param word
    * @param translation
-   * @param pageUrl
-   * @param pageTitle
    * @param context
    * @returns {Promise}
    */
-  addWordToDictionary (word, translation, pageUrl, pageTitle, context = '') {
-    const body = encodeParams({
-      word,
-      context,
-      tword: translation,
-      context_url: pageUrl,
-      context_title: pageTitle
-    });
-
-    return fetch(
-        `${config.api}${config.addWordToDictionary}?port=1001`,
-        { body, method: 'POST', credentials: 'same-origin' }
-      )
-      .then(returnJsonIfOk);
+  addWordToDictionary (word, translation, context = '') {
+    return browser.runtime.sendMessage({ id: BACKGROUND_ADD_WORD_TO_DICTIONARY, word, translation, context });
   },
 
   /**
@@ -98,15 +87,3 @@ function encodeParams (paramsObj) {
 
   return params;
 }
-
-/**
- *
- * @param response
- */
-function returnJsonIfOk(response) {
-  if (response.ok) {
-    return response.json();
-  }
-
-  throw new Error('Invalid response.');
-}

src/messages.js

@@ -15,6 +15,7 @@ export const CONTENT_OPEN_POPUP = 'content-open-popup';
 // Messages to background from anywhere
 export const BACKGROUND_GET_CURRENT_HOST = 'background-get-current-host';
 export const BACKGROUND_SHOW_NOTIFICATION = 'background-show-notification';
+export const BACKGROUND_ADD_WORD_TO_DICTIONARY = 'background-add-word-to-dictionary';
 
 // Message from background to browser action
 export const BROWSER_ACTION_CURRENT_HOST = 'browser-action-current-host';

src/storage/options.js

@@ -22,9 +22,6 @@ export const defaultValues = Object.freeze({
 
   // Play sound automatically for translated word
   audioAutoPlay:    false,
-
-  // Network settings
-  privateMode:      true
 });
 
 function getOptionValue (options, key) {

src/vue/TheBrowserAction.vue

@@ -9,8 +9,6 @@
     <translate
         v-show="showTranslate"
         :text="text"
-        page-url=""
-        page-title="From LeoTranslator browser extension"
         class="the-browser-action__translate"
         @close="close"
         @translate="translate"

src/vue/TheOptionsPage.vue

@@ -121,16 +121,6 @@
         >
         <label for="audioAutoPlay">Play audio automatically.</label>
       </div>
-
-      <h3>Network</h3>
-      <div class="browser-style">
-        <input
-            id="privateMode"
-            v-model="options.privateMode"
-            type="checkbox"
-        >
-        <label for="privateMode">Enable Private Mode (do not send title and URL to LinguaLeo.com).</label>
-      </div>
     </form>
   </div>
 </template>
@@ -156,8 +146,7 @@
           hoverShift:           null,
           theme:                null,
           audioAutoPlay:        null,
-          contextAutoTranslate: null,
-          privateMode:          null
+          contextAutoTranslate: null
         },
       };
     },

src/vue/ThePopupIFrame.vue

@@ -3,8 +3,6 @@
       class="the-popup-iframe"
       :text="text"
       :context="context"
-      :page-url="url"
-      :page-title="title"
       :in-frame="true"
       @close="close"
       @refresh="refresh"
@@ -28,9 +26,7 @@
     data () {
       return {
         // Data
-        url: '',
         text: '',
-        title: '',
         context: '',
         frameIndex: -1
       };
@@ -75,9 +71,7 @@
       onWindowMessageListener (message) {
         // The data have been received from content script.
         if (message.data.id === 'content-data') {
-          this.url = message.data.url;
           this.text = message.data.text;
-          this.title = message.data.title;
           this.context = message.data.context;
           this.frameIndex = message.data.frameIndex;
 

src/vue/Translate.vue

@@ -63,7 +63,6 @@
 <script>
   import api from '../leoApi';
   import history from '../storage/history';
-  import options from '../storage/options';
   import TranslateList from './TranslateList.vue';
   import TranslateHeader from './TranslateHeader.vue';
   import TranslateContext from './TranslateContext.vue';
@@ -82,8 +81,6 @@
 
     props: {
       text: String,
-      pageUrl: String,
-      pageTitle: String,
       context: {
         type: String,
         default: ''
@@ -108,9 +105,6 @@
         // Element states
         isListLoading: true,
         isMeaningAdding: false,
-
-        // Options
-        privateMode: true,
       };
     },
 
@@ -145,8 +139,6 @@
 
     created () {
       chrome.runtime.onMessage.addListener(this.onRuntimeMessageListener);
-
-      this.loadOptions();
     },
 
     beforeDestroy () {
@@ -155,14 +147,11 @@
 
     methods: {
       addToDictionary (translation) {
-        const pageUrl = this.privateMode ? '' : this.pageUrl;
-        const pageTitle = this.privateMode ? '' : this.pageTitle;
-
-        return api.addWordToDictionary(this.text, translation, pageUrl, pageTitle, this.context)
+        return api.addWordToDictionary(this.text, translation, this.context)
           .then(data => {
             let notification = '';
 
-            if (Object.keys(data).length === 0 || data.error_msg === '') {
+            if (data?.status === 'ok') {
               notification = `The "${this.text}" word has been added!`;
               history.addWord(this.text, translation, this.soundUrl);
             } else {
@@ -203,12 +192,6 @@
         });
       },
 
-      loadOptions() {
-        options.getOption('privateMode').then(value => {
-          this.privateMode = value;
-        });
-      },
-
       translate (text) {
         this.$emit('translate', text);
       },
@@ -229,10 +212,6 @@
         if (message.id === PROXY_CONTENT_CLOSE_POPUP) {
           this.isMeaningAdding = false;
         }
-
-        if (message.id === PROXY_ALL_CONTENT_REFRESH_OPTIONS) {
-          this.loadOptions();
-        }
       }
     }
   }