Add "join lobby"-button

wikiweaver-ext/background.js

@@ -138,7 +138,8 @@ async function UpdateBadge(connected) {
 }
 
 async function TryConnectToLobby(msg) {
-  const { code, username } = msg;
+  const { code } = msg;
+  const username = msg.username ?? await Settings.local.Get("username");
   const { url } = await Settings.local.Get();
   const userid = await Settings.session.Get(["userid-for-lobby", code], "");
 
@@ -310,4 +311,18 @@ chrome.runtime.onInstalled.addListener(async () => {
   await Settings.session.Defaults({
     connected: false,
   });
+
+  const url = await Settings.local.Get("url");
+
+  if ((await chrome.scripting.getRegisteredContentScripts({ ids: ["join-lobby"] })).length <= 0) {
+    const scripts = [
+      {
+        id: "join-lobby",
+        js: ["/content/join-lobby.js"],
+        matches: [`${url}/*`],
+      }
+    ]
+
+    await chrome.scripting.registerContentScripts(scripts);
+  }
 });

wikiweaver-ext/content/join-lobby.js

@@ -0,0 +1,13 @@
+const btn = document.getElementById("join-button");
+btn.onclick = JoinLobby;
+btn.hidden = false;
+
+async function JoinLobby() {
+  let code = window.location.hash.replace("#", "").toLocaleLowerCase().trim();
+
+  await chrome.runtime.sendMessage({
+    type: "connect",
+    code,
+  });
+}
+

wikiweaver-ext/manifest-chrome.json

@@ -22,7 +22,11 @@
     "webNavigation"
   ],
   "host_permissions": [
-    "*://*.wikipedia.org/*"
+    "*://*.wikipedia.org/*",
+    "https://wikiweaver.stuffontheinter.net"
+  ],
+  "optional_permissions": [
+    "<all_urls>"
   ],
   "background": {
     "type": "module",

wikiweaver-ext/manifest-firefox.json

@@ -21,7 +21,11 @@
     "webNavigation"
   ],
   "host_permissions": [
-    "*://*.wikipedia.org/*"
+    "*://*.wikipedia.org/*",
+    "https://wikiweaver.stuffontheinter.net/*"
+  ],
+  "optional_permissions": [
+    "<all_urls>"
   ],
   "background": {
     "type": "module",

wikiweaver-ext/options/options.js

@@ -18,12 +18,45 @@ async function save(e) {
   e.preventDefault();
 
   const urlElem = document.querySelector("#url");
+  const url = new URL(urlElem.value.toLowerCase() || urlElem.placeholder);
 
-  await Settings.local.Set("url", urlElem.value.toLowerCase() || urlElem.placeholder);
+  // For some reason keeping the port here made it so the script was not
+  // injected at localhost, when the server was set to http://localhost:3000
+  const port = url.port;
+  url.port = "";
+
+  const host = `${url.origin}/*`;
+
+  // We must request permissions as the first async function we call in this
+  // user input handler for it to work.
+  // See https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/permissions/request
+  // and https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/User_actions
+  await chrome.permissions.request({ origins: [host] });
+
+  // What a mess...
+  url.port = port;
+
+  if ((await chrome.scripting.getRegisteredContentScripts({ ids: ["join-lobby"] })).length > 0) {
+    await chrome.scripting.unregisterContentScripts({ ids: ["join-lobby"] });
+  }
+
+  const scripts = [
+    {
+      id: "join-lobby",
+      js: ["/content/join-lobby.js"],
+      matches: [host],
+    }
+  ]
+
+  await chrome.scripting.registerContentScripts(scripts);
+
+  // After the other stuff is done, store all values
+
+  await Settings.local.Set("url", url.origin);
   await Settings.local.Set("autoOpenStartPage", document.querySelector("#auto-open-start-page").checked);
 
   // TODO: show saved succeeded in some way
 }
 
 document.addEventListener("DOMContentLoaded", () => init(), false);
-document.querySelector("form").addEventListener("submit", save);
+document.querySelector("#submit").addEventListener("click", save);

wikiweaver-ext/popup/popup.js

@@ -297,6 +297,9 @@ async function HandleMessageConnect(msg) {
     data.connectionStatus = ConnectionStatus.DISCONNECTED;
     await UnregisterContentScripts();
   }
+
+  document.getElementById("code").textContent = msg.Code;
+  document.getElementById("username").textContent = msg.Username;
 }
 
 chrome.runtime.onMessage.addListener(async (msg) => {
@@ -322,12 +325,14 @@ const ContentScripts = [
 ];
 
 async function RegisterContentScripts() {
-  if ((await chrome.scripting.getRegisteredContentScripts()).length <= 0) {
+  if ((await chrome.scripting.getRegisteredContentScripts({ ids: ["content"] })).length <= 0) {
     await chrome.scripting.registerContentScripts(ContentScripts);
   }
 }
 
 async function UnregisterContentScripts() {
-  await chrome.scripting.unregisterContentScripts();
+  if ((await chrome.scripting.getRegisteredContentScripts({ ids: ["content"] })).length > 0) {
+    await chrome.scripting.unregisterContentScripts({ ids: ["content"] });
+  }
 }
 

wikiweaver-server/cmd/main/wikiweaver-server.go

@@ -639,6 +639,8 @@ type JoinFromExtRequest struct {
 
 type JoinToExtResponse struct {
 	Success        bool
+	Code           string
+	Username       string
 	UserID         string
 	AlreadyInLobby bool
 }
@@ -724,6 +726,8 @@ func handleExtJoin(w http.ResponseWriter, r *http.Request) {
 			if alreadyInLobby || globalState.Dev {
 				successResponse := JoinToExtResponse{
 					Success:        true,
+					Code:           lobby.Code,
+					Username:       otherWithSameUsername.Username,
 					UserID:         otherWithSameUsername.UserID,
 					AlreadyInLobby: alreadyInLobby,
 				}
@@ -788,6 +792,8 @@ func handleExtJoin(w http.ResponseWriter, r *http.Request) {
 
 		successResponse := JoinToExtResponse{
 			Success:        true,
+			Code:           lobby.Code,
+			Username:       extClient.Username,
 			UserID:         userID,
 			AlreadyInLobby: false,
 		}

wikiweaver-web/index.html

@@ -39,6 +39,9 @@
         <button id="redraw-button" class="button box text" onclick="HandleRedrawClicked()">Redraw Graph</button>
         <button id="export-button" class="button box text" onclick="HandleExportClicked()">Export png</button>
       </div>
+      <div id="tertiary-buttons" class="flex-horizontal-container">
+        <button id="join-button" class="button box text" hidden>Join Lobby</button>
+      </div>
       <div id="leaderboard-wrapper">
         <table id="leaderboard" class="text">
         </table>

wikiweaver-web/style.css

@@ -142,6 +142,11 @@ img {
   background: var(--blue);
 }
 
+#join-button {
+  background: var(--green);
+  margin-top: 0.5rem;
+}
+
 #leaderboard-wrapper {
   overflow-x: auto;
   flex-shrink: 0;