Merge pull request #33 from ihateamongus/codex/explore-dynamic-accent-color-support

Add dynamic browser accent color experiment

3 files changed, 71 insertions, 0 deletions

diff --git a/browsers/firefox/extension/background.js b/browsers/firefox/extension/background.js
new file mode 100644
index 0000000..df0ee80
--- /dev/null
+++ b/browsers/firefox/extension/background.js
@@ -0,0 +1,34 @@
+let port = browser.runtime.connectNative("accent_color");
+let current = null;
+
+function broadcast(color) {
+  browser.tabs.query({}).then(tabs => {
+    for (let tab of tabs) {
+      browser.tabs.sendMessage(tab.id, {color}).catch(() => {});
+    }
+  });
+  browser.theme.update({colors: {toolbar: color}});
+}
+
+port.onMessage.addListener(msg => {
+  if (msg.color && msg.color !== current) {
+    current = msg.color;
+    broadcast(current);
+  }
+});
+
+function poll() {
+  try {
+    port.postMessage({query: "color"});
+  } catch (e) {
+    // ignore
+  }
+}
+setInterval(poll, 1000);
+poll();
+
+browser.runtime.onMessage.addListener((msg, sender) => {
+  if (msg.request === "color") {
+    return Promise.resolve({color: current});
+  }
+});
diff --git a/browsers/firefox/extension/content.js b/browsers/firefox/extension/content.js
new file mode 100644
index 0000000..118c7ee
--- /dev/null
+++ b/browsers/firefox/extension/content.js
@@ -0,0 +1,15 @@
+function apply(color) {
+  document.documentElement.style.setProperty("--accent-color", color);
+}
+
+browser.runtime.onMessage.addListener(msg => {
+  if (msg.color) {
+    apply(msg.color);
+  }
+});
+
+browser.runtime.sendMessage({request: "color"}).then(msg => {
+  if (msg && msg.color) {
+    apply(msg.color);
+  }
+});
diff --git a/browsers/firefox/extension/manifest.json b/browsers/firefox/extension/manifest.json
new file mode 100644
index 0000000..abcbe08
--- /dev/null
+++ b/browsers/firefox/extension/manifest.json
@@ -0,0 +1,22 @@
+{
+  "manifest_version": 2,
+  "name": "Accent Color Updater",
+  "version": "0.1",
+  "description": "Updates CSS variable --accent-color using a native host",
+  "applications": {
+    "gecko": {
+      "id": "accent-color@example.com"
+    }
+  },
+  "background": {
+    "scripts": ["background.js"]
+  },
+  "permissions": ["nativeMessaging", "tabs", "<all_urls>"],
+  "content_scripts": [
+    {
+      "matches": ["<all_urls>"],
+      "js": ["content.js"],
+      "run_at": "document_start"
+    }
+  ]
+}