Follow-up PR to allow for meta setting from Chrome Extension (#737)

* Assign a single meta at puzzle creation time

* pre-commit

* Remove comment

* Modify host_permissions to match suggests from https://developer.chrome.com/docs/extensions/develop/concepts/match-patterns

* Chrome Extension changes to support assigning the meta in the extension

* update version number

* Chrome extension changes to match meta assignment functionality

* Undo debugging

* update

* update

* Update popup.js

Change URL to TARGET_URL

* Update popup.js

Add TODO about deploymet

chrome_extension/cardboard/manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "Cardboard Chrome Extension",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "icons": {
     "16": "images/cardboard_bird.png",
     "32": "images/cardboard_bird.png",
@@ -16,9 +16,9 @@
 	"cookies"
   ],
   "host_permissions": [
-	"http://*:*/*",
+	"http://127.0.0.1/*",
 	"http://localhost/*",
 	"https://cardboard.rocks/*",
 	"https://www.cardboard.rocks/*"
   ]
-}
+}

chrome_extension/cardboard/popup.html

@@ -14,6 +14,10 @@
           <input class="puzzle_name" type="text" id="puzzle_name" name="puzzle_name"><br>
           <label for="puzzle_url">Puzzle URL: </label><br>
           <input class="puzzle_url" type="text" id="puzzle_url" name="puzzle_url"><br>
+          <label for="puzzle_meta">Assigned Meta: </label><br>
+          <select class="puzzle_meta" id="puzzle_meta" name="puzzle_meta">
+            <option key="none" value="">None</option>
+          </select><br>
           <input type="checkbox" id="is_meta" name="is_meta">
           <label for="is_meta"> Is meta</label><br>
           <input type="checkbox" id="create_channels" name="create_channels">

chrome_extension/cardboard/popup.js

@@ -1,10 +1,38 @@
+// TODO: Default this to false and control this in the deployment process
+const IS_PROD = true;
+
+const PROD_URL = "https://cardboard.rocks";
+const DEV_URL = "http://localhost:8000";
+
+// TODO: Make this configurable
+const HUNT_NUMBER = 10;
+
+let TARGET_URL = DEV_URL;
+if (IS_PROD) {
+  TARGET_URL = PROD_URL;
+}
+
+// Read all puzzles and filter down to those that are metas.
+const hunt_puzzles = await fetch(
+  TARGET_URL + "/api/v1/hunts/" + HUNT_NUMBER + "/puzzles",
+  {
+    method: "GET",
+  }
+);
+const response = await hunt_puzzles.json();
+let metas = [];
+for (const puzzle of response) {
+  if (puzzle.is_meta) {
+    metas.push(puzzle.name);
+  }
+}
+
 // There should only be one tab because there is only one currentWindow
 // and active tab.
 const tabs = await chrome.tabs.query({
   active: true,
   currentWindow: true,
 });
-
 const template = document.getElementById("li_template");
 const elements = new Set();
 for (const tab of tabs) {
@@ -16,28 +44,40 @@ for (const tab of tabs) {
   if (tab.url != undefined) {
     element.querySelector(".puzzle_url").value = tab.url;
   }
+
+  // Add metas to dropdown
+  let meta_dropdown = element.querySelector(".puzzle_meta");
+  for (const meta of metas) {
+    let option = document.createElement("option");
+    option.text = meta;
+    option.value = meta;
+    option.key = meta;
+    meta_dropdown.add(option);
+  }
   elements.add(element);
 }
 document.querySelector("ul").append(...elements);
+
 const button = document.querySelector("button");
 button.addEventListener("click", async (e) => {
   e.preventDefault();
   // Get Cardboard cookie
   const cardboard_cookie = await chrome.cookies.get({
-    url: "https://cardboard.rocks",
+    url: TARGET_URL,
     name: "csrftoken",
   });
 
   if (cardboard_cookie) {
     // Create puzzle. Puzzle name is limited to 30 characters
-    fetch("https://cardboard.rocks/api/v1/hunts/10/puzzles", {
+    fetch(TARGET_URL + "/api/v1/hunts/" + HUNT_NUMBER + "/puzzles", {
       method: "POST",
       mode: "cors",
       body: JSON.stringify({
         create_channels: document.getElementById("create_channels").checked,
         is_meta: document.getElementById("is_meta").checked,
         name: document.getElementById("puzzle_name").value.slice(0, 30),
         url: document.getElementById("puzzle_url").value,
+        assigned_meta: document.getElementById("puzzle_meta").value,
       }),
       headers: {
         "X-CSRFToken": cardboard_cookie.value,
@@ -48,17 +88,3 @@ button.addEventListener("click", async (e) => {
     console.log("No cookie found");
   }
 });
-
-// Doing a GET in order to get the metas that you can assign this new puzzles to.
-/*
-const hunt_puzzles = await fetch("http://localhost:8000/api/v1/hunts/3/puzzles", {
-  method: "GET",
-});
-const response = await hunt_puzzles.json();
-console.log(response);
-for (const puzzle of response) {
-  if (puzzle.is_meta) {
-    console.log(puzzle.name);
-  }
-}
-*/