Basic POC for frontend page manipulation

manifest.json

@@ -2,17 +2,16 @@
   "name": "DII Hackathon",
   "version": "0.1",
   "description": "A Chrome extension that communicates with Adafruit.IO for the Design of Innovative Interactions course at University of Salzburg",
-  "permissions": ["storage"],
+  "permissions": ["storage", "activeTab"],
   "background": {
-    "scripts": [
-      "dist/background/index.js"
-    ],
+    "scripts": ["dist/background/index.js"],
     "persistent": false
   },
-  "content": {
-    "scripts": [
-      "dist/frontend/index.js"
-    ]
-  },
+  "content_scripts": [
+    {
+      "matches": ["https://meet.google.com/*"],
+      "js": ["dist/frontend/index.js"]
+    }
+  ],
   "manifest_version": 2
 }

src/background/api.js

@@ -1,7 +1,7 @@
 import mqtt from "mqtt";
 
-const mqttHeartbeatTopic = "dennissc/feeds/heartbeat/json";
-const mqttTiltTopic = "dennissc/feeds/tilt-sensor/json";
+const mqttHeartbeatTopic = `${process.env.AIO_USERNAME}/feeds/heartbeat/json`;
+const mqttTiltTopic = `${process.env.AIO_USERNAME}/feeds/tilt-sensor/json`;
 const mqttEdnpoint = process.env.AIO_ENDPOINT;
 const mqttOptions = {
   port: Number(process.env.AIO_PORT),

src/background/index.js

@@ -1,11 +1,12 @@
 import { subscribeToAllSensors } from "./api";
 import dotenv from "dotenv";
+import { storeValue } from "./storage";
 
 dotenv.config();
 
 chrome.runtime.onInstalled.addListener(() => {
   subscribeToAllSensors({
-    onHeartbeat: (heartbeatData) => console.log(heartbeatData),
-    onTilt: (tiltData) => console.log(tiltData),
+    onHeartbeat: (heartbeatData) => storeValue("heartbeat", heartbeatData),
+    onTilt: (tiltData) => storeValue("tilt", tiltData),
   });
 });

src/background/storage.js

@@ -0,0 +1,3 @@
+export function storeValue(key, value) {
+  chrome.storage.sync.set({ [key]: value });
+}

src/frontend/index.js

@@ -1 +1,23 @@
-console.log("Frontend registered");
+const testEl = document.createElement("div");
+testEl.style["position"] = "fixed";
+testEl.style["top"] = "0";
+testEl.style["left"] = "0";
+testEl.style["z-index"] = "1000";
+testEl.style["background-color"] = "red";
+document.body.appendChild(testEl);
+
+chrome.storage.onChanged.addListener((changes, namespace) => {
+  for (let key in changes) {
+    const newValue = changes[key];
+
+    if (key === "heartbeat") {
+      console.log("heartbeat", newValue);
+      testEl.innerHTML += `\nNew heartbeat: ${JSON.stringify(newValue)}`;
+    }
+
+    if (key === "tilt") {
+      console.log("tilt", newValue);
+      testEl.innerHTML += `\nNew tilt: ${JSON.stringify(newValue)}`;
+    }
+  }
+});