add "onHighlight" experimental setting that plays immediately on

highlight

background.js

@@ -6,6 +6,7 @@ const defaultSettings = {
   eff: 15,
   ews: 0.1,
   playvolume: 0.1,
+  onHighlight: false,
 };
 
 function saveSettings(settings) {

morsefire.js

@@ -5,10 +5,31 @@ const containerCloseId = "morsefire_close";
 const playerId = "morsefire_player";
 
 let cw;
+let cwSettings;
 browser.runtime
   .sendMessage({ action: "morsefire_settings_get" })
   .then((settings) => {
-    cw = new jscw(settings);
+    cwSettings = settings;
+    cw = new jscw(cwSettings);
+
+    if (cwSettings.onHighlight) {
+      document.addEventListener("mouseup", (e) => {
+        if (e.target.closest(`#${containerId}`)) {
+          return;
+        }
+        const selectedText = window.getSelection().toString().trim();
+        if (selectedText) {
+          handleText(selectedText);
+        }
+      });
+
+      document.addEventListener("mousedown", (e) => {
+        if (e.target.closest(`#${containerId}`)) {
+          return;
+        }
+        tryStop();
+      });
+    }
   });
 
 function getEl(id) {
@@ -21,6 +42,14 @@ function setStyle(el, style) {
     .join(" ");
 }
 
+function tryStop() {
+  try {
+    cw.stop();
+  } catch (err) {
+    // nothing to stop
+  }
+}
+
 function create() {
   // the overall container
   const container = document.createElement("div");
@@ -35,11 +64,7 @@ function create() {
   const close = document.createElement("div");
   close.id = containerCloseId;
   close.addEventListener("click", () => {
-    try {
-      cw.stop();
-    } catch (err) {
-      // nothing to stop
-    }
+    tryStop();
     container.remove();
   });
   close.textContent = "x";
@@ -88,17 +113,17 @@ function create() {
   return container;
 }
 
+function handleText(text) {
+  tryStop();
+  getEl() ?? create();
+  cw.setText(text);
+  cw.renderPlayer(playerId, cw);
+  cw.play();
+}
+
 browser.runtime.onMessage.addListener((message) => {
   if (message.action !== containerId) {
     return;
   }
-  try {
-    cw.stop(); // stop any existing plays
-  } catch (err) {
-    // nothing to stop
-  }
-  getEl() ?? create();
-  cw.setText(message.text);
-  cw.renderPlayer(playerId, cw);
-  cw.play();
+  handleText(message.text);
 });

options.css

@@ -1,12 +1,19 @@
 body {
   padding: 10px;
-  max-width: 100px;
+  max-width: 200px;
+}
+label {
+  margin-bottom: 4px;
 }
 input {
-  padding: 4px 8px;
+  padding: 8px;
   margin-bottom: 8px;
+  border: 1px solid #555;
+  border-radius: 4px;
+}
+summary {
+  padding: 4px;
 }
-
 button {
   margin-top: 8px;
   padding: 8px;

options.html

@@ -20,6 +20,12 @@
     <label for="ews">Volume</label>
     <input type="number" step="0.05" max="1" min="0" id="playvolume" />
 
+    <details>
+      <summary>Experimental</summary>
+      <input type="checkbox" id="onHighlight" />
+      <label for="onHighlight">Play on highlight</label>
+    </details>
+
     <button id="save">Save</button>
 
     <script src="options.js"></script>

options.js

@@ -1,20 +1,32 @@
-const fields = ["wpm", "freq", "eff", "ews", "playvolume"];
+const fields = ["wpm", "freq", "eff", "ews", "playvolume", "onHighlight"];
 
 document.addEventListener("DOMContentLoaded", () => {
   // Load current settings and populate the form
   browser.runtime
     .sendMessage({ action: "morsefire_settings_get" })
     .then((settings) => {
       fields.forEach((field) => {
-        document.getElementById(field).value = settings[field];
+        switch (field) {
+          case "onHighlight":
+            document.getElementById(field).checked = settings[field];
+            break;
+          default:
+            document.getElementById(field).value = settings[field];
+        }
       });
     });
 
   // Save settings when the Save button is clicked
   document.getElementById("save").addEventListener("click", () => {
     const settings = {};
     fields.forEach((field) => {
-      settings[field] = parseInt(document.getElementById(field).value, 10);
+      switch (field) {
+        case "onHighlight":
+          settings[field] = document.getElementById(field).checked;
+          break;
+        default:
+          settings[field] = parseInt(document.getElementById(field).value, 10);
+      }
     });
 
     // Repeat for other settings