apache · Jyyjy · Aug 19, 2024 · Aug 10, 2024
diff --git a/build/UserALEWebExtension/optionsPage.html → build/UserALEWebExtension/browserAction.html b/build/UserALEWebExtension/optionsPage.html → build/UserALEWebExtension/browserAction.html
diff --git a/build/UserALEWebExtension/manifest.json b/build/UserALEWebExtension/manifest.json
@@ -18,9 +18,9 @@
     }
   ],
   "options_ui": {
-    "page": "optionsPage.html"
+    "page": "options.html"
   },
   "browser_action": {
-    "default_popup": "optionsPage.html"
+    "default_popup": "browserAction.html"
   }
 }
diff --git a/build/UserALEWebExtension/options.html b/build/UserALEWebExtension/options.html
@@ -0,0 +1,57 @@
+<!--
+* Licensed to the Apache Software Foundation (ASF) under one or more
+* contributor license agreements.  See the NOTICE file distributed with
+* this work for additional information regarding copyright ownership.
+* The ASF licenses this file to You under the Apache License, Version 2.0
+* (the "License"); you may not use this file except in compliance with
+* the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+-->
+
+<!doctype html>
+<html>
+  <head>
+    <title>User ALE Web Extension - Options</title>
+    <script src="options.js"></script>
+    <meta charset="utf-8" />
+  </head>
+  <body>
+    <h1>Logging Options</h1>
+    <form name="optionsForm" id="optionsForm">
+      <label>Logging Endpoint URL:</label>
+      <input name="url" id="url" />
+      <br />
+
+      <label>User:</label>
+      <input name="userId" id="user" />
+      <br />
+
+      <label>Password:</label>
+      <input name="password" type="password" id="password" />
+      <br />
+
+      <label>Tool Name:</label>
+      <input name="toolName" id="tool" />
+      <br />
+
+      <label>Tool Version:</label>
+      <input name="toolVersion" id="toolVersion" />
+      <br />
+
+      <label>URL whitelist regex:</label>
+      <input name="filter" id="filter" />
+      <br />
+
+      <div align="right">
+        <button type="submit" id="submitOptions">Save Changes</button>
+      </div>
+    </form>
+  </body>
+</html>
diff --git a/build/UserALEWebExtension/options.js b/build/UserALEWebExtension/options.js
@@ -1247,7 +1247,10 @@ function getConfig() {
             payload.pluginConfig.urlWhitelist;
     });
     document.getElementById("optionsForm").addEventListener("submit", setConfig);
-    document.getElementById("issueForm").addEventListener("submit", reportIssue);
+    const issueForm = document.getElementById("issueForm");
+    if (issueForm instanceof HTMLElement) {
+        issueForm.addEventListener("submit", reportIssue);
+    }
 }
 function reportIssue() {
     browser.runtime.sendMessage({

diff --git a/rollup.config.js b/rollup.config.js
@@ -100,7 +100,8 @@ export default [
                 targets: [
                     {src: srcWebExtensionDir + 'icons/**/*.*', dest: buildWebExtensionDir + 'icons'},
                     {src: srcWebExtensionDir + 'manifest.json', dest: buildWebExtensionDir},
-                    {src: srcWebExtensionDir + 'optionsPage.html', dest: buildWebExtensionDir}
+                    {src: srcWebExtensionDir + 'options.html', dest: buildWebExtensionDir},
+                    {src: srcWebExtensionDir + 'browserAction.html', dest: buildWebExtensionDir}
                 ],
                 copyOnce: true
             }),

diff --git a/src/UserALEWebExtension/optionsPage.html → src/UserALEWebExtension/browserAction.html b/src/UserALEWebExtension/optionsPage.html → src/UserALEWebExtension/browserAction.html
diff --git a/src/UserALEWebExtension/manifest.json b/src/UserALEWebExtension/manifest.json
@@ -18,9 +18,9 @@
     }
   ],
   "options_ui": {
-    "page": "optionsPage.html"
+    "page": "options.html"
   },
   "browser_action": {
-    "default_popup": "optionsPage.html"
+    "default_popup": "browserAction.html"
   }
 }
diff --git a/src/UserALEWebExtension/options.html b/src/UserALEWebExtension/options.html
@@ -0,0 +1,57 @@
+<!--
+* Licensed to the Apache Software Foundation (ASF) under one or more
+* contributor license agreements.  See the NOTICE file distributed with
+* this work for additional information regarding copyright ownership.
+* The ASF licenses this file to You under the Apache License, Version 2.0
+* (the "License"); you may not use this file except in compliance with
+* the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+-->
+
+<!doctype html>
+<html>
+  <head>
+    <title>User ALE Web Extension - Options</title>
+    <script src="options.js"></script>
+    <meta charset="utf-8" />
+  </head>
+  <body>
+    <h1>Logging Options</h1>
+    <form name="optionsForm" id="optionsForm">
+      <label>Logging Endpoint URL:</label>
+      <input name="url" id="url" />
+      <br />
+
+      <label>User:</label>
+      <input name="userId" id="user" />
+      <br />
+
+      <label>Password:</label>
+      <input name="password" type="password" id="password" />
+      <br />
+
+      <label>Tool Name:</label>
+      <input name="toolName" id="tool" />
+      <br />
+
+      <label>Tool Version:</label>
+      <input name="toolVersion" id="toolVersion" />
+      <br />
+
+      <label>URL whitelist regex:</label>
+      <input name="filter" id="filter" />
+      <br />
+
+      <div align="right">
+        <button type="submit" id="submitOptions">Save Changes</button>
+      </div>
+    </form>
+  </body>
+</html>
diff --git a/src/UserALEWebExtension/options.ts b/src/UserALEWebExtension/options.ts
@@ -80,10 +80,10 @@ function getConfig() {
     "submit",
     setConfig,
   );
-  (document.getElementById("issueForm") as HTMLFormElement).addEventListener(
-    "submit",
-    reportIssue,
-  );
+  const issueForm = document.getElementById("issueForm");
+  if (issueForm instanceof HTMLElement) {
+    issueForm.addEventListener("submit", reportIssue);
+  }
 }
 
 function reportIssue() {

diff --git a/test/e2e/spec/01-extension.spec.ts b/test/e2e/spec/01-extension.spec.ts
@@ -40,7 +40,7 @@ test.describe("Userale extension", () => {
     const requestPromise = sender.waitForRequest(
       (request) => request.method() === "POST",
     );
-    await page.goto(`chrome-extension://${extensionId}/optionsPage.html`);
+    await page.goto(`chrome-extension://${extensionId}/options.html`);
     // Sleep so options.js can update the html with values from local storage.
     await new Promise((r) => setTimeout(r, 1000));
     await page.fill("#filter", ".*");
@@ -60,7 +60,7 @@ test.describe("Userale extension", () => {
       const postData = request.postData();
       return Boolean(postData && postData.includes("testUser"));
     });
-    await page.goto(`chrome-extension://${extensionId}/optionsPage.html`);
+    await page.goto(`chrome-extension://${extensionId}/options.html`);
     await page.waitForLoadState("load");
     await page.fill("#user", id);
     await page.click("#submitOptions");
@@ -87,7 +87,7 @@ test.describe("Userale extension", () => {
       const postData = request.postData();
       return Boolean(postData && postData.includes(description));
     });
-    await page.goto(`chrome-extension://${extensionId}/optionsPage.html`);
+    await page.goto(`chrome-extension://${extensionId}/browserAction.html`);
     await page.waitForLoadState("load");
     await page.fill("#issueDescription", description);
     await page.click("#submitIssue");