extension: detect dark mode and set icon for dark mode

also see #57

extension/src/background.ts

@@ -173,6 +173,13 @@ browser.runtime.onMessage.addListener((message: any, sender: any, sendResponse:
         capture(comment, tag_str)
         sendResponse()
     }
+    if (message.method == 'DARK_MODE') {
+        const icon_path = message.hasDarkMode ? 'img/unicorn_dark.png' : 'img/unicorn.png'
+
+        // manifest v2 doesn't have browser.action
+        const action = browser.action ? browser.action : browser.browserAction
+        action.setIcon({path: icon_path})
+    }
 })
 
 // TODO handle cannot access chrome:// url??

extension/src/detect_dark_mode.ts

@@ -0,0 +1,10 @@
+const hasDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches
+
+// TODO this won't be typechecked though.. maybe need to make it TS aware only?
+// or maybe fine to import browser here, just remove unused stuff to keep content script small?
+
+// @ts-expect-error browser should be available in browser context
+chrome.runtime.sendMessage({
+    method: 'DARK_MODE',
+    hasDarkMode: hasDarkMode,
+})

extension/webpack.config.js

@@ -145,6 +145,12 @@ const manifestExtra = {
     } : content_security_policy,
 }
 manifestExtra[action_name] = action
+manifestExtra.content_scripts = [
+  {
+    "matches": ["<all_urls>"],
+    "js": ["detect_dark_mode.js"],
+  },
+]
 
 if (v3) {
   if (target === T.FIREFOX) {
@@ -202,6 +208,7 @@ const options = {
     background  : path.join(__dirname, "src", "background.ts"),
     popup       : path.join(__dirname, "src", "popup.ts"),
     options_page: path.join(__dirname, "src", "options_page.ts"),
+    detect_dark_mode: path.join(__dirname, "src", "detect_dark_mode.ts"),
   },
   output: {
       path: buildPath,