feat: add option for automatically updating client app

src/_locales/en/messages.json

@@ -144,6 +144,11 @@
     "description": "Title of the option."
   },
 
+  "optionTitle_autoUpdateClientApp": {
+    "message": "Automatically update client app",
+    "description": "Title of the option."
+  },
+
   "optionTitle_witSpeechApiLang": {
     "message": "API language",
     "description": "Title of the option."
@@ -466,7 +471,7 @@
   },
 
   "pageContent_optionClientAppDownloadDesc": {
-    "message": "Download and install the client app for user input simulation.",
+    "message": "Download and install the client app to enable user input simulation.",
     "description": "Page content."
   },
 
@@ -481,7 +486,7 @@
   },
 
   "pageContent_installDesc": {
-    "message": "The client app enables Buster to simulate user input and helps lower the occurrence of difficult challenges and temporary blocks.",
+    "message": "The client app enables Buster to simulate user input and helps improve the success rate of the extension and lower the occurrence of temporary blocks.",
     "description": "Page content."
   },
 
@@ -505,6 +510,11 @@
     "description": "Page content."
   },
 
+  "pageContent_manifestLocationDesc": {
+    "message": "The manifest location is browser-dependent, edit the path only if the installation does not succeed.",
+    "description": "Page content."
+  },
+
   "pageTitle": {
     "message": "$PAGETITLE$ - $EXTENSIONNAME$",
     "description": "Title of the page.",
@@ -530,6 +540,11 @@
     "description": "Title of the page."
   },
 
+  "info_updatingClientApp": {
+    "message": "Updating client app. This will take a moment.",
+    "description": "Info message."
+  },
+
   "error_captchaNotSolved": {
     "message": "Captcha could not be solved. Try again after requesting a new challenge.",
     "description": "Error message."
@@ -545,8 +560,18 @@
     "description": "Error message."
   },
 
-  "error_missingNativeApp": {
-    "message": "Cannot connect to native app. Finish setting up the application or turn off user input simulation from the options page.",
+  "error_missingClientApp": {
+    "message": "Cannot connect to client app. Finish setting up the app or turn off user input simulation from the extension's options page.",
+    "description": "Error message."
+  },
+
+  "error_outdatedClientApp": {
+    "message": "The client app is outdated. Download and install the latest version from the extension's options page.",
+    "description": "Error message."
+  },
+
+  "error_clientAppUpdateFailed": {
+    "message": "The client app cannot be updated. Download and install the latest version from the extension's options page.",
     "description": "Error message."
   },
 

src/background/main.js

@@ -11,9 +11,11 @@ import {
   executeCode,
   executeFile,
   scriptsAllowed,
-  functionInContext
+  functionInContext,
+  getBrowser,
+  getPlatform
 } from 'utils/common';
-import {clientAppApiVersion} from 'utils/config';
+import {clientAppVersion} from 'utils/config';
 
 let nativePort;
 
@@ -151,18 +153,24 @@ async function onMessage(request, sender) {
     return getFramePos(sender.tab.id, sender.frameId, request.index);
   } else if (request.id === 'getTabZoom') {
     return browser.tabs.getZoom(sender.tab.id);
-  } else if (request.id === 'startNativeApp') {
+  } else if (request.id === 'startClientApp') {
     nativePort = browser.runtime.connectNative('org.buster.client');
-  } else if (request.id === 'stopNativeApp') {
+  } else if (request.id === 'stopClientApp') {
     if (nativePort) {
       nativePort.disconnect();
     }
-  } else if (request.id === 'sendNativeMessage') {
+  } else if (request.id === 'messageClientApp') {
     const message = {
-      apiVersion: clientAppApiVersion,
+      apiVersion: clientAppVersion,
       ...request.message
     };
-    return await sendNativeMessage(nativePort, message);
+    return sendNativeMessage(nativePort, message);
+  } else if (request.id === 'openOptions') {
+    browser.runtime.openOptionsPage();
+  } else if (request.id === 'getPlatform') {
+    return getPlatform();
+  } else if (request.id === 'getBrowser') {
+    return getBrowser();
   }
 }
 

src/content/install.js → src/content/setup.js

@@ -1,5 +1,5 @@
-function install() {
-  const url = new URL(chrome.extension.getURL('/src/install/index.html'));
+function setup() {
+  const url = new URL(chrome.extension.getURL('/src/setup/index.html'));
   url.searchParams.set(
     'session',
     new URL(window.location.href).searchParams.get('session')
@@ -11,4 +11,4 @@ function install() {
   document.body.appendChild(frame);
 }
 
-install();
+setup();

src/manifest.json

@@ -52,9 +52,9 @@
       "js": ["src/manifest.js", "src/solve/script.js"]
     },
     {
-      "matches": ["http://127.0.0.1/buster/install?session=*"],
+      "matches": ["http://127.0.0.1/buster/setup?session=*"],
       "run_at": "document_idle",
-      "js": ["src/content/install.js"]
+      "js": ["src/content/setup.js"]
     }
   ],
 
@@ -69,5 +69,5 @@
     "page": "src/background/index.html"
   },
 
-  "web_accessible_resources": ["src/install/index.html", "src/content/reset.js"]
+  "web_accessible_resources": ["src/setup/index.html", "src/content/reset.js"]
 }

src/options/App.vue

@@ -100,6 +100,15 @@
           <v-switch id="si" v-model="options.simulateUserInput"></v-switch>
         </v-form-field>
       </div>
+
+      <div class="option">
+        <v-form-field input-id="auc"
+            v-if="options.simulateUserInput"
+            :label="getText('optionTitle_autoUpdateClientApp')">
+          <v-switch id="auc" v-model="options.autoUpdateClientApp"></v-switch>
+        </v-form-field>
+      </div>
+
       <div class="client-bownload" v-if="showClientAppNotice">
         <div class="download-desc">
           {{ getText('pageContent_optionClientAppDownloadDesc') }}
@@ -131,6 +140,7 @@ import {Button, Select, Switch, FormField, TextField} from 'ext-components';
 import storage from 'storage/storage';
 import {getOptionLabels, pingClientApp} from 'utils/app';
 import {getText, getPlatform} from 'utils/common';
+import {clientAppVersion} from 'utils/config';
 import {
   optionKeys,
   clientAppPlatforms,
@@ -199,7 +209,8 @@ export default {
         witSpeechApiKeys: {},
         loadEnglishChallenge: false,
         tryEnglishSpeechModel: false,
-        simulateUserInput: false
+        simulateUserInput: false,
+        autoUpdateClientApp: false
       }
     };
   },
@@ -213,7 +224,7 @@ export default {
           if (!this.clientAppDownloadUrl) {
             const {os, arch} = await getPlatform();
             if (clientAppPlatforms.includes(`${os}/${arch}`)) {
-              this.clientAppDownloadUrl = `https://github.com/dessant/buster-client/releases/download/v0.1.0/buster-client-v0.1.0-${os}-${arch}`;
+              this.clientAppDownloadUrl = `https://github.com/dessant/buster-client/releases/download/v${clientAppVersion}/buster-client-setup-v${clientAppVersion}-${os}-${arch}`;
               if (os === 'windows') {
                 this.clientAppDownloadUrl += '.exe';
               }

src/install/App.vue → src/setup/App.vue

@@ -3,7 +3,7 @@
 <div id="app" v-if="dataLoaded">
   <div class="wrap" v-if="!isInstallSuccess && !isInstallError">
     <div class="title">
-      {{ getText('buttonText_installApp') }}
+      {{ getText('pageContent_installTitle') }}
     </div>
     <div class="desc">
       {{ getText('pageContent_installDesc') }}
@@ -13,7 +13,13 @@
         v-model.trim="appDir"
         :label="getText('inputLabel_appLocation')">
     </v-textfield>
+
+    <div class="manifest-desc" v-if="manifestDirEditable">
+      {{ getText('pageContent_manifestLocationDesc') }}
+    </div>
+
     <v-textfield
+        v-if="manifestDirEditable"
         v-model.trim="manifestDir"
         :label="getText('inputLabel_manifestLocation')">
     </v-textfield>
@@ -52,7 +58,7 @@ import {Button, TextField} from 'ext-components';
 
 import storage from 'storage/storage';
 import {pingClientApp} from 'utils/app';
-import {getText, getBrowser} from 'utils/common';
+import {getText} from 'utils/common';
 import {targetEnv} from 'utils/config';
 
 export default {
@@ -73,6 +79,7 @@ export default {
       session: urlParams.get('session'),
       appDir: '',
       manifestDir: '',
+      manifestDirEditable: false,
 
       isInstalling: false,
       isInstallSuccess: false,
@@ -113,15 +120,30 @@ export default {
       } finally {
         this.isInstalling = false;
       }
+
+      if (this.isInstallSuccess) {
+        const data = new FormData();
+        data.append('session', this.session);
+
+        await fetch(`${this.apiUrl}/setup/close`, {
+          referrer: '',
+          mode: 'cors',
+          method: 'POST',
+          body: data
+        });
+      }
     },
 
     location: async function() {
       const data = new FormData();
       data.append('session', this.session);
-      data.append('browser', (await getBrowser()).name);
+      data.append(
+        'browser',
+        (await browser.runtime.sendMessage({id: 'getBrowser'})).name
+      );
       data.append('targetEnv', targetEnv);
 
-      const rsp = await fetch(`${this.apiUrl}/install/location`, {
+      const rsp = await fetch(`${this.apiUrl}/setup/location`, {
         referrer: '',
         mode: 'cors',
         method: 'POST',
@@ -146,7 +168,7 @@ export default {
       data.append('targetEnv', targetEnv);
       data.append('extension', this.getExtensionId());
 
-      const rsp = await fetch(`${this.apiUrl}/install/run`, {
+      const rsp = await fetch(`${this.apiUrl}/setup/install`, {
         referrer: '',
         mode: 'cors',
         method: 'POST',
@@ -167,6 +189,11 @@ export default {
   created: async function() {
     await this.setLocation();
 
+    const {os} = await browser.runtime.sendMessage({id: 'getPlatform'});
+    if (os !== 'windows') {
+      this.manifestDirEditable = true;
+    }
+
     this.dataLoaded = true;
   }
 };
@@ -199,7 +226,8 @@ body {
 }
 
 .title,
-.desc {
+.desc,
+.manifest-desc {
   @include mdc-theme-prop('color', 'text-primary-on-light');
 }
 
@@ -218,14 +246,20 @@ body {
   margin-bottom: 24px;
 }
 
+.manifest-desc {
+  @include mdc-typography('caption');
+  margin-top: 12px;
+  margin-bottom: 4px;
+}
+
 .button {
   @include mdc-button-ink-color(#fff);
   width: 200px;
   height: 48px;
 }
 
 .install-button {
-  margin-top: 24px;
+  margin-top: 36px;
 }
 
 .error-button {