feat: navigate with client app using keyboard

Closes #168.

src/_locales/en/messages.json

@@ -189,6 +189,11 @@
     "description": "Title of the option."
   },
 
+  "optionTitle_navigateWithKeyboard": {
+    "message": "Navigate with keyboard",
+    "description": "Title of the option."
+  },
+
   "optionTitle_autoUpdateClientApp": {
     "message": "Auto-update client app",
     "description": "Title of the option."

src/options/App.vue

@@ -126,6 +126,18 @@
           </v-form-field>
         </div>
 
+        <div
+          class="option"
+          v-if="clientAppVerified && options.simulateUserInput"
+        >
+          <v-form-field
+            input-id="nc"
+            :label="getText('optionTitle_navigateWithKeyboard')"
+          >
+            <v-switch id="nc" v-model="options.navigateWithKeyboard"></v-switch>
+          </v-form-field>
+        </div>
+
         <div class="option" v-if="clientAppInstalled">
           <v-form-field
             input-id="auc"
@@ -294,7 +306,8 @@ export default {
         loadEnglishChallenge: false,
         tryEnglishSpeechModel: false,
         simulateUserInput: false,
-        autoUpdateClientApp: false
+        autoUpdateClientApp: false,
+        navigateWithKeyboard: false
       }
     };
   },

src/solve/main.js

@@ -236,10 +236,15 @@ async function solve(simulateUserInput, clickEvent) {
     return;
   }
 
+  const navigateWithKeyboard = await storage.get(
+    'navigateWithKeyboard',
+    'sync'
+  );
+
   let browserBorder;
   let useMouse = true;
   if (simulateUserInput) {
-    if (clickEvent.clientX || clickEvent.clientY) {
+    if (!navigateWithKeyboard && (clickEvent.clientX || clickEvent.clientY)) {
       browserBorder = await getBrowserBorder(clickEvent);
     } else {
       useMouse = false;

src/storage/versions/local/Lj3MYlSr4L.js

@@ -0,0 +1,27 @@
+import browser from 'webextension-polyfill';
+
+const message = 'Add navigateWithKeyboard';
+
+const revision = 'Lj3MYlSr4L';
+const downRevision = 'DlgF14Chrh';
+
+const storage = browser.storage.local;
+
+async function upgrade() {
+  const changes = {
+    navigateWithKeyboard: false
+  };
+
+  changes.storageVersion = revision;
+  return storage.set(changes);
+}
+
+async function downgrade() {
+  const changes = {};
+  await storage.remove('navigateWithKeyboard');
+
+  changes.storageVersion = downRevision;
+  return storage.set(changes);
+}
+
+export {message, revision, upgrade, downgrade};

src/storage/versions/local/versions.json

@@ -7,6 +7,7 @@
     "ZtLMLoh1ag",
     "t335iRDhZ8",
     "X3djS8vZC",
-    "DlgF14Chrh"
+    "DlgF14Chrh",
+    "Lj3MYlSr4L"
   ]
 }

src/storage/versions/sync/Lj3MYlSr4L.js

@@ -0,0 +1,27 @@
+import browser from 'webextension-polyfill';
+
+const message = 'Add navigateWithKeyboard';
+
+const revision = 'Lj3MYlSr4L';
+const downRevision = 'DlgF14Chrh';
+
+const storage = browser.storage.sync;
+
+async function upgrade() {
+  const changes = {
+    navigateWithKeyboard: false
+  };
+
+  changes.storageVersion = revision;
+  return storage.set(changes);
+}
+
+async function downgrade() {
+  const changes = {};
+  await storage.remove('navigateWithKeyboard');
+
+  changes.storageVersion = downRevision;
+  return storage.set(changes);
+}
+
+export {message, revision, upgrade, downgrade};

src/storage/versions/sync/versions.json

@@ -7,6 +7,7 @@
     "ZtLMLoh1ag",
     "t335iRDhZ8",
     "X3djS8vZC",
-    "DlgF14Chrh"
+    "DlgF14Chrh",
+    "Lj3MYlSr4L"
   ]
 }

src/utils/data.js

@@ -9,7 +9,8 @@ const optionKeys = [
   'loadEnglishChallenge',
   'tryEnglishSpeechModel',
   'simulateUserInput',
-  'autoUpdateClientApp'
+  'autoUpdateClientApp',
+  'navigateWithKeyboard'
 ];
 
 const clientAppPlatforms = [