fix issue with repeated injections. Add loading UX

thesofakillers · Nov 18, 2019 · 91fada5 · 91fada5
1 parent 9e8389a
commit 91fada5
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 39 deletions.
diff --git a/GPTrueOrFalse/src/content/content.js b/GPTrueOrFalse/src/content/content.js
@@ -11,6 +11,8 @@ function gotMessage(message) {
     return checkSelection();
   } else if (message.type === "evaluate") {
     return evaluateSelection();
+  } else if (message.type === "loaded-check") {
+    return Promise.resolve({ reply: true });
   }
 }
 
@@ -28,6 +30,16 @@ function evaluateSelection() {
   }
   // parse the selected text
   let text = selection.toString();
+  // mark the element after which to insert the result of the evaluation
+  element.className += " " + "afterMeGpt2";
+  // prepare the message element
+  let message_element = $("<p class='GPT2Message'>Loading...</p>");
+  message_element.css("border", "2px dashed grey");
+  message_element.css("border-top", "5px solid grey");
+  message_element.css("font-family", "monospace");
+  message_element.css("font-size", "14px");
+  // insert the message element
+  message_element.insertAfter(".afterMeGpt2");
   // evaluate
   fetch(
     "https://huggingface.co/openai-detector/?" +
@@ -40,16 +52,13 @@ function evaluateSelection() {
       let used_tokens = json.used_tokens;
       let realness = Math.round(json.real_probability * 100 * 100) / 100;
       let css_color_string = generateHSLString(realness, 0, 120);
-      // mark the element after which to insert the result of the evaluation
-      element.className += " " + "afterMeGpt2";
+
       // prepare the message
       let message_text = `According to the detector, there is a ${realness} % chance that the selected text is real. ${used_tokens} out of ${all_tokens} tokens were considered`;
-      // prepare the message element
-      let message_element = $(`<p class='GPT2Message'>${message_text}</p>`);
+      // update the message element with the outcome
+      message_element.text(message_text);
       message_element.css("border", `2px dashed ${css_color_string}`);
       message_element.css("border-top", `5px solid ${css_color_string}`);
-      // insert the message element
-      message_element.insertAfter(".afterMeGpt2");
     })
     .catch(err => console.log(err));
 }

diff --git a/GPTrueOrFalse/src/manifest.json b/GPTrueOrFalse/src/manifest.json
@@ -1,7 +1,7 @@
 {
   "manifest_version": 2,
   "name": "GPTrue or False",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "description": "Display OpenAI's GPT-2 log probability of a sample of text.",
   "icons": {
     "16": "./images/icon/16.png",

diff --git a/GPTrueOrFalse/src/popup/index.js b/GPTrueOrFalse/src/popup/index.js
@@ -1,38 +1,59 @@
 window.onload = () => {
-  return browser.tabs
-    .executeScript({
-      file: "./libraries/jquery-3.3.1.slim.min.js"
-    })
-    .then(() => {
-      return browser.tabs.executeScript({
-        file: "./libraries/browser-polyfill.min.js"
-      });
-    })
-    .then(() => {
-      return browser.tabs.executeScript({
-        file: "./content/content.js"
-      });
-    })
-    .then(res => {
-      console.log(res);
-      return browser.tabs.query({ active: true, currentWindow: true });
-    })
-    .then(query_result => {
-      return browser.tabs.sendMessage(query_result[0].id, {
-        type: "selection-check"
-      });
-    })
-    .then(res => {
-      let selected_words = res.token_number;
-      if (selected_words > 50) {
-        return activateButton("evaluateSelectedText");
-      } else {
-        return deactivateButton("evaluateSelectedText", selected_words);
-      }
-    })
-    .catch(err => console.log(err));
+  // get the current tab
+  return (
+    browser.tabs
+      .query({ active: true, currentWindow: true })
+      .then(query_result => {
+        console.log(query_result);
+        // ask it if the content script is already loaded
+        return browser.tabs.sendMessage(query_result[0].id, {
+          type: "loaded-check"
+        });
+      })
+      .then(res => {
+        // if it is, do nothing for this promise
+        if (res.reply) return Promise.resolve();
+      })
+      .catch(() => {
+        // an error being thrown signals the content script not being loaded, load it.
+        return browser.tabs
+          .executeScript({
+            file: "./libraries/jquery-3.3.1.slim.min.js"
+          })
+          .then(() => {
+            return browser.tabs.executeScript({
+              file: "./libraries/browser-polyfill.min.js"
+            });
+          })
+          .then(() => {
+            return browser.tabs.executeScript({
+              file: "./content/content.js"
+            });
+          });
+      })
+      // check that enough words are selected
+      .then(() => {
+        return browser.tabs.query({ active: true, currentWindow: true });
+      })
+      .then(query_result => {
+        return browser.tabs.sendMessage(query_result[0].id, {
+          type: "selection-check"
+        });
+      })
+      .then(res => {
+        // Activate or deactivate button dependng on number of words
+        let selected_words = res.token_number;
+        if (selected_words >= 50) {
+          return activateButton("evaluateSelectedText");
+        } else {
+          return deactivateButton("evaluateSelectedText", selected_words);
+        }
+      })
+      .catch(err => console.log(err))
+  );
 };
 
+// orders content script to evaluate
 document.getElementById("evaluateSelectedText").onclick = () => {
   browser.tabs
     .query({ active: true, currentWindow: true })