Update browser extension repo to v0.3.1

Signed-off-by: Jacob Torrey <jacob@thinkst.com>

inch/manifest.json

@@ -1,6 +1,6 @@
 {
     "manifest_version": 3,
-    "version": "0.2",
+    "version": "0.3.1",
     "name": "AI Noise-cancelling headphones",
     "author": "jacob@thinkst.com",
     "description": "An extension to filter out AI-generated noise from your browsing experience",
@@ -8,6 +8,11 @@
         "contextMenus",
         "storage"
     ],
+    "icons": {
+        "16": "nch_small.png",
+        "48": "nch_med.png",
+        "128": "nch_large.png"
+      },
     "content_scripts": [
         {
             "js": ["scripts/nch.js"],

inch/scripts/nch-worker.js

@@ -45,10 +45,10 @@ async function query(text) {
 }
 
 // Tracking tabs that are dead to avoid sending responses to.
-var send_errs = 0;
+var dead_tabs = 0;
 async function return_results(tab, id, score) {
     const msg = {id: id, opacity: score};
-    chrome.tabs.sendMessage(tab, msg, {}, function(res) { if (chrome.runtime.lastError) send_errs++; });
+    chrome.tabs.sendMessage(tab, msg, {}, function(_res) { if (chrome.runtime.lastError) dead_tabs++; });
 }
 
 function handle_req(msg, sender, _sendResp) {

inch/scripts/nch.js

@@ -17,17 +17,37 @@ async function send_request(id, text) {
 
 // Given a JSON msg with the ID and opacity, sets the opacity as specified.
 function set_opacity(msg, _sender, _sendResp) {
+    const regex = /rgba?\((\d+), (\d+), (\d+)/;
     var element = document.getElementById(msg.id);
+    element.classList.add('nch');
     if (element) {
         //console.log("Setting " + element.id + " to opacity: " + msg.opacity);
         const opacity = Math.round(msg.opacity * 100) / 100;
         element.style.transition = "color 1s ease-out";
-        element.style.color = "rgba(0, 0, 0, " + opacity + ")";
+        const ecolor = window.getComputedStyle(element).color;
+        const match = ecolor.match(regex);
+        if (ecolor == null || match == null) {
+            element.style.setProperty("--rgb", "0, 0, 0");
+            element.style.color = "rgba(var(--rgb), " + opacity + ")";
+        } else {
+            const r = match[1];
+            const g = match[2];
+            const b = match[3];
+            element.style.setProperty("--rgb", r + ", " + g + ", " + b);
+            element.style.color = "rgba(var(--rgb), " + opacity + ")";
+        }
+        if (element.title == '' && opacity <= 0.60)
+            element.title = "Flagged as possibly AI-generated (confidence: " + (1-opacity) + ")";
     }
 }
 
 chrome.runtime.onMessage.addListener(set_opacity);
 
+var hoverStyle = document.createElement('style');
+hoverStyle.type = 'text/css';
+hoverStyle.innerHTML = 'p.nch:hover {--alpha: 255;color:rgba(var(--rgb),var(--alpha))!important;}';
+document.head.appendChild(hoverStyle);
+
 // The types of elements we'll iterate through
 const selector = 'p';
 const tags = document.querySelectorAll(selector);