version update

CHANGELOG.md

@@ -4,6 +4,7 @@
 
 - Removed langage
 - Added a button next to model to get the last ChatGPT version
+- Added update message
 
 ## v1.0.0
 

README.md

@@ -20,7 +20,7 @@ If MoodleGPT cannot complete one of your moodle quiz please provide the html cod
 
 ## Set up
 
-Go to <b>"Manage my extensions"</b> on your browser, then click on <b>"Load unpacked extension"</b> and select the <b>"extension"</b> folder. Afterwards, click on the extension icons and enter the apiKey obtained from [openai](https://platform.openai.com/). Finally, enter a code that will activate the extension on your moodle page and click on the save button (The extension need to be configured before entering the moodle quiz).
+Go to <b>"Manage my extensions"</b> on your browser, then click on <b>"Load unpacked extension"</b> and select the <b>"extension"</b> folder. Afterwards, click on the extension icons and enter the apiKey obtained from [openai](https://platform.openai.com/). Afterward, enter a <b>code</b> that will activate the extension on your moodle page. Finally, click one the <b>reload button</b> next to model and click on the save button (The extension need to be configured before entering the moodle quiz).
 
 ## Inject the code into the moodle
 
@@ -38,7 +38,7 @@ Type back the <b>code</b> on the keyboard and the code will be removed from the
 
 - <b>Api key</b>: the openai api key.
 - <b>Code</b>: code that you will need to inject/remove the code.
-- <b>GPT Model</b>: the gpt model you want to use (by default it's "gpt-3.5-turbo"). You can click on the reload button to get the latest version of available gpt model for your account but you need to enter the api key first.
+- <b>GPT Model</b>: the gpt model you want to use. You can click on the reload button to get the latest version of available gpt model for your account but you need to enter the api key first.
 - <b>Cursor indication</b>: show a pointer cursor and a hourglass to know when the request is finished.
 - <b>Title indication</b>: show some informations into the title to know for example if the code have been injected.
   <br/> ![Injected](./assets/title-injected.png)

extension/popup/index.html

@@ -6,7 +6,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>MoodleGPT</title>
     <link rel="stylesheet" href="style.css" />
-    <script src="index.js" defer></script>
+    <script src="./js/index.js" defer></script>
+    <script src="./js/version.js" defer></script>
     <link rel="icon" type="image/png" href="../icon.png" />
     <link
       rel="stylesheet"
@@ -25,7 +26,10 @@
         title="Mortarboard icons created by itim2101 - Flaticon"
         ><img src="../icon.png" alt="icon"
       /></a>
-      <h1>MoodleGPT</h1>
+      <div class="col center title">
+        <h1>MoodleGPT</h1>
+        <p id="version"></p>
+      </div>
       <div class="line center">
         <label for="apiKey" class="textLabel">Api Key</label>
         <input id="apiKey" type="text" />
@@ -36,7 +40,7 @@
       </div>
       <div class="line center">
         <label for="model" class="textLabel">GPT Model</label>
-        <input id="model" type="text" value="gpt-3.5-turbo" />
+        <input id="model" type="text" />
         <i
           id="reloadModel"
           class="fa-solid fa-rotate-right"

extension/popup/js/index.js

@@ -1,117 +1,121 @@
-const saveBtn = document.querySelector(".save");
-const message = document.querySelector("#message");
-
-const inputsText = ["apiKey", "code", "model"];
-const inputsCheckbox = [
-  "logs",
-  "title",
-  "cursor",
-  "typing",
-  "mouseover",
-  "infinite",
-  "table",
-  "timeout",
-];
-
-function showMessage(messageTxt, valide) {
-  message.style.color = valide ? "limegreen" : "red";
-  message.textContent = messageTxt;
-  message.style.display = "block";
-  setTimeout(() => (message.style.display = "none"), 5000);
-}
-
-//save the configuration
-saveBtn.addEventListener("click", function () {
-  const [apiKey, code, model] = inputsText.map((selector) =>
-    document.querySelector("#" + selector).value.trim()
-  );
-  const [logs, title, cursor, typing, mouseover, infinite, table, timeout] =
-    inputsCheckbox.map(
-      (selector) => document.querySelector("#" + selector).checked
-    );
-
-  if (!apiKey || !code || !model) {
-    showMessage("Please complete all the form");
-    return;
-  }
-
-  if (code.length < 3) {
-    showMessage("The code should at least contain 3 characters");
-    return;
-  }
-
-  chrome.storage.sync.set({
-    moodleGPT: {
-      apiKey,
-      code,
-      model,
-      logs,
-      title,
-      cursor,
-      typing,
-      mouseover,
-      infinite,
-      table,
-      timeout,
-    },
-  });
-
-  showMessage("Configuration saved", true);
-});
-
-//we load back the configuration
-chrome.storage.sync.get(["moodleGPT"]).then(function (storage) {
-  const config = storage.moodleGPT;
-
-  if (config) {
-    inputsText.forEach((key) =>
-      config[key]
-        ? (document.querySelector("#" + key).value = config[key])
-        : null
-    );
-    inputsCheckbox.forEach(
-      (key) => (document.querySelector("#" + key).checked = config[key] || "")
-    );
-  }
-
-  //getting the last chatgpt version
-  const apiKeySelector = document.querySelector("#apiKey");
-  const reloadModel = document.querySelector("#reloadModel");
-
-  let apiKey = apiKeySelector.value;
-
-  function checkFiledApiKey() {
-    if (apiKey) {
-      reloadModel.removeAttribute("disabled");
-      reloadModel.setAttribute("title", "Get last ChatGPT version");
-      return;
-    }
-
-    reloadModel.setAttribute("disabled", true);
-    reloadModel.setAttribute("title", "Provide an api key first");
-  }
-
-  checkFiledApiKey();
-
-  apiKeySelector.addEventListener("change", function (event) {
-    apiKey = apiKeySelector.value.trim();
-    checkFiledApiKey();
-  });
-
-  reloadModel.addEventListener("click", async function () {
-    if (!apiKey) return;
-    try {
-      const req = await fetch("https://api.openai.com/v1/models", {
-        headers: {
-          Authorization: `Bearer ${apiKey}`,
-        },
-      });
-      const rep = await req.json();
-      const model = rep.data.find((model) => model.id.includes("gpt"));
-      document.querySelector("#model").value = model.root;
-    } catch (err) {
-      console.error(err);
-      showMessage("Failed to fetch last ChatGPT version");
-    }
-  });
-});
+const saveBtn = document.querySelector(".save");
+const message = document.querySelector("#message");
+
+const inputsText = ["apiKey", "code", "model"];
+const inputsCheckbox = [
+  "logs",
+  "title",
+  "cursor",
+  "typing",
+  "mouseover",
+  "infinite",
+  "table",
+  "timeout",
+];
+
+function showMessage(messageTxt, valide) {
+  message.style.color = valide ? "limegreen" : "red";
+  message.textContent = messageTxt;
+  message.style.display = "block";
+  setTimeout(() => (message.style.display = "none"), 5000);
+}
+
+//save the configuration
+saveBtn.addEventListener("click", function () {
+  const [apiKey, code, model] = inputsText.map((selector) =>
+    document.querySelector("#" + selector).value.trim()
+  );
+  const [logs, title, cursor, typing, mouseover, infinite, table, timeout] =
+    inputsCheckbox.map(
+      (selector) => document.querySelector("#" + selector).checked
+    );
+
+  if (!apiKey || !code || !model) {
+    showMessage("Please complete all the form");
+    return;
+  }
+
+  if (code.length < 3) {
+    showMessage("The code should at least contain 3 characters");
+    return;
+  }
+
+  chrome.storage.sync.set({
+    moodleGPT: {
+      apiKey,
+      code,
+      model,
+      logs,
+      title,
+      cursor,
+      typing,
+      mouseover,
+      infinite,
+      table,
+      timeout,
+    },
+  });
+
+  showMessage("Configuration saved", true);
+});
+
+//we load back the configuration
+chrome.storage.sync.get(["moodleGPT"]).then(function (storage) {
+  const config = storage.moodleGPT;
+
+  if (config) {
+    inputsText.forEach((key) =>
+      config[key]
+        ? (document.querySelector("#" + key).value = config[key])
+        : null
+    );
+    inputsCheckbox.forEach(
+      (key) => (document.querySelector("#" + key).checked = config[key] || "")
+    );
+  }
+
+  getLastChatGPTVersion();
+});
+
+//getting the last chatgpt version
+function getLastChatGPTVersion() {
+  const apiKeySelector = document.querySelector("#apiKey");
+  const reloadModel = document.querySelector("#reloadModel");
+
+  let apiKey = apiKeySelector.value;
+
+  function checkFiledApiKey() {
+    if (apiKey) {
+      reloadModel.removeAttribute("disabled");
+      reloadModel.setAttribute("title", "Get last ChatGPT version");
+      return;
+    }
+
+    reloadModel.setAttribute("disabled", true);
+    reloadModel.setAttribute("title", "Provide an api key first");
+  }
+
+  checkFiledApiKey();
+
+  apiKeySelector.addEventListener("change", function (event) {
+    apiKey = apiKeySelector.value.trim();
+    checkFiledApiKey();
+  });
+
+  reloadModel.addEventListener("click", async function () {
+    if (!apiKey) return;
+    try {
+      const req = await fetch("https://api.openai.com/v1/models", {
+        headers: {
+          Authorization: `Bearer ${apiKey}`,
+        },
+      });
+      const rep = await req.json();
+      const model = rep.data.find((model) => model.id.includes("gpt"));
+      document.querySelector("#model").value = model.root;
+    } catch (err) {
+      console.error(err);
+      showMessage("Failed to fetch last ChatGPT version");
+    }
+  });
+}

extension/popup/js/version.js

@@ -0,0 +1,39 @@
+const currentVersion = "1.0.1";
+const versionDisplay = document.querySelector("#version");
+
+async function getLastVersion() {
+  const req = await fetch(
+    "https://raw.githubusercontent.com/yoannchb-pro/MoodleGPT/main/package.json"
+  );
+  const rep = await req.json();
+  return rep.version;
+}
+
+function setVersion(version, isCurrent = true) {
+  if (isCurrent) {
+    versionDisplay.textContent = "v" + version;
+    return;
+  }
+
+  const link = document.createElement("a");
+  link.href = "https://github.com/yoannchb-pro/MoodleGPT";
+  link.rel = "noopener noreferrer";
+  link.target = "_blank";
+  link.textContent = "v" + version;
+  versionDisplay.appendChild(link);
+  versionDisplay.appendChild(document.createTextNode(" is now available !"));
+}
+
+async function notifyUpdate() {
+  const lastVersion = await getLastVersion().catch((err) => {
+    console.error(err);
+    return currentVersion;
+  });
+  if (currentVersion !== lastVersion) {
+    setVersion(lastVersion, false);
+  } else {
+    setVersion(currentVersion);
+  }
+}
+
+notifyUpdate();

extension/popup/style.css

@@ -40,7 +40,7 @@ img {
   margin-top: 0.75rem;
 }
 
-h1 {
+.title {
   margin-top: 0.75rem;
   margin-bottom: 0.75rem;
 }
@@ -98,6 +98,10 @@ a {
   margin-bottom: 0.75rem;
 }
 
+#version {
+  font-size: 0.75rem;
+}
+
 #message {
   display: none;
   margin-top: 0.75rem;