Basic POC for frontend page manipulation

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)}`;
+    }
+  }
+});