feat: webhooks

Author: Seldszar

locales/en/messages.json

@@ -7,5 +7,14 @@
   },
   "notificationTitle_newBountyAvailable": {
     "message": "New Bounty Available"
+  },
+  "bountyWebhook_messageContent": {
+    "message": "$1 has received a new Twitch Bounty and should be available on your Bounty Board if you're eligible!"
+  },
+  "bountyWebhook_buttonLabel": {
+    "message": "Open Bounty Board"
+  },
+  "testWebhook_messageContent": {
+    "message": "This is a test webhook sent by $1. If you see this message, the next Twitch Bounties you'll receive will also be shared here."
   }
 }

package-lock.json

@@ -10,40 +10,40 @@
     "test": "tsc --noEmit && eslint --ext=tsx,ts ."
   },
   "dependencies": {
-    "@tabler/icons-react": "^3.10.0",
-    "preact": "^10.22.0",
+    "@tabler/icons-react": "^3.31.0",
+    "preact": "^10.26.4",
     "webextension-polyfill": "^0.12.0",
-    "wouter": "^3.3.1"
+    "wouter": "^3.6.0"
   },
   "devDependencies": {
-    "@commitlint/cli": "^19.3.0",
-    "@commitlint/config-conventional": "^19.2.2",
+    "@commitlint/cli": "^19.8.0",
+    "@commitlint/config-conventional": "^19.8.0",
     "@csstools/postcss-cascade-layers": "^4.0.6",
     "@pandacss/dev": "^0.41.0",
     "@seldszar/yael": "^2.2.0",
-    "@swc/core": "^1.4.16",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
+    "@swc/core": "^1.11.8",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
     "@types/webextension-polyfill": "^0.10.7",
-    "@types/webpack-env": "^1.18.4",
-    "@typescript-eslint/eslint-plugin": "^6.2.1",
-    "@typescript-eslint/parser": "^6.2.1",
+    "@types/webpack-env": "^1.18.8",
+    "@typescript-eslint/eslint-plugin": "^6.21.0",
+    "@typescript-eslint/parser": "^6.21.0",
     "copy-webpack-plugin": "^12.0.2",
     "css-loader": "^7.1.2",
-    "eslint": "^8.46.0",
+    "eslint": "^8.57.1",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-prettier": "^5.1.3",
-    "graphql": "^16.9.0",
-    "html-webpack-plugin": "^5.6.0",
-    "husky": "^9.0.11",
-    "lint-staged": "^15.2.2",
-    "mini-css-extract-plugin": "^2.9.0",
-    "postcss": "^8.4.39",
+    "eslint-plugin-prettier": "^5.2.3",
+    "graphql": "^16.10.0",
+    "html-webpack-plugin": "^5.6.3",
+    "husky": "^9.1.7",
+    "lint-staged": "^15.4.3",
+    "mini-css-extract-plugin": "^2.9.2",
+    "postcss": "^8.5.3",
     "postcss-loader": "^8.1.1",
-    "prettier": "^3.2.5",
+    "prettier": "^3.5.3",
     "swc-loader": "^0.2.6",
-    "typescript": "^5.4.5",
-    "webpack": "^5.91.0",
+    "typescript": "^5.8.2",
+    "webpack": "^5.98.0",
     "webpack-cli": "^5.1.4",
     "webpack-merge": "^5.10.0"
   },

package.json

@@ -1,7 +1,9 @@
+import { BountyBoardStatus, BountyStatus, WebhookType } from "~/common/constants";
 import { countBounties } from "~/common/helpers";
-import { Bounty } from "~/common/types";
+import { Bounty, Webhook } from "~/common/types";
 
-import { getBounties, getBountyBoardSettings } from "./twitch";
+import { applyMigrations } from "./migrations";
+import { getBounties, getBountyBoardSettings, getLogin } from "./twitch";
 
 function getIconUrl(color: string, size: number) {
   return browser.runtime.getURL(`icon-${color}-${size}.png`);
@@ -21,7 +23,7 @@ async function fetchStatus() {
   const [{ data }] = await getBountyBoardSettings();
 
   if (data == null) {
-    return "NONE";
+    return BountyBoardStatus.None;
   }
 
   const {
@@ -58,10 +60,10 @@ async function fetchBounties() {
 
         get date() {
           switch (node.status) {
-            case "COMPLETED":
+            case BountyStatus.Completed:
               return Date.parse(node.trackingStoppedAt);
 
-            case "LIVE":
+            case BountyStatus.Live:
               return Date.parse(node.expiresAt);
           }
 
@@ -70,7 +72,7 @@ async function fetchBounties() {
 
         get amount() {
           switch (node.status) {
-            case "COMPLETED":
+            case BountyStatus.Completed:
               return node.payoutCents / 100;
           }
 
@@ -80,27 +82,29 @@ async function fetchBounties() {
         campaign: {
           id: campaign.id,
           title: campaign.title,
+          sponsor: campaign.sponsor,
+          displayName: campaign.displayName || campaign.game.displayName,
           boxArtUrl: campaign.boxArtURL || campaign.game.boxArtURL,
         },
       };
     });
   });
 }
 
-async function refreshBounties() {
+async function refresh() {
   let bounties = new Array<Bounty>();
   let active = false;
 
   try {
     const status = await fetchStatus();
 
-    if (status === "ACCEPTED") {
+    if (status === BountyBoardStatus.Accepted) {
       bounties = await fetchBounties();
       active = true;
     }
   } catch {} // eslint-disable-line no-empty
 
-  const badgeCount = countBounties(bounties, "AVAILABLE");
+  const badgeCount = countBounties(bounties, BountyStatus.Available);
   const color = active ? "purple" : "gray";
 
   browser.storage.session.set({
@@ -127,21 +131,122 @@ async function refreshBounties() {
   });
 }
 
+async function formatTestWebhook(webhook: Webhook) {
+  const login = await getLogin();
+
+  switch (webhook.type) {
+    case WebhookType.Discord:
+      return {
+        username: browser.i18n.getMessage("extensionName"),
+        avatar_url: "https://github.com/Seldszar/Coco/raw/main/public/icon-purple-96.png",
+        content: browser.i18n.getMessage("testWebhook_messageContent", login),
+      };
+
+    case WebhookType.Slack:
+      return {
+        text: browser.i18n.getMessage("testWebhook_messageContent", login),
+      };
+  }
+
+  throw new RangeError("Webhook type not supported");
+}
+
+async function formatBountyWebhook(webhook: Webhook, bounty: Bounty) {
+  const login = await getLogin();
+
+  switch (webhook.type) {
+    case WebhookType.Discord:
+      return {
+        username: browser.i18n.getMessage("extensionName"),
+        avatar_url: "https://github.com/Seldszar/Coco/raw/main/public/icon-purple-96.png",
+        content: browser.i18n.getMessage("bountyWebhook_messageContent", login),
+        embeds: [
+          {
+            title: bounty.campaign.sponsor,
+            description: bounty.campaign.title,
+            url: "https://dashboard.twitch.tv/bounties",
+            color: "11032055",
+            thumbnail: {
+              url: bounty.campaign.boxArtUrl,
+            },
+            footer: {
+              text: browser.i18n.getMessage("extensionName"),
+              icon_url: "https://github.com/Seldszar/Coco/raw/main/public/icon-purple-32.png",
+            },
+          },
+        ],
+      };
+
+    case WebhookType.Slack:
+      return {
+        text: browser.i18n.getMessage("bountyWebhook_messageContent", login),
+        blocks: [
+          {
+            type: "actions",
+            elements: [
+              {
+                type: "section",
+                text: {
+                  type: "mrkdwn",
+                  text: `*<https://dashboard.twitch.tv/bounties|${bounty.campaign.sponsor}>*\n${bounty.campaign.title}`,
+                },
+                accessory: {
+                  type: "image",
+                  image_url: bounty.campaign.boxArtUrl,
+                  alt_text: bounty.campaign.title,
+                },
+              },
+              {
+                type: "button",
+                url: "https://dashboard.twitch.tv/bounties",
+                text: {
+                  type: "plain_text",
+                  text: browser.i18n.getMessage("bountyWebhook_buttonLabel"),
+                },
+              },
+            ],
+          },
+        ],
+      };
+  }
+
+  throw new RangeError("Webhook type not supported");
+}
+
+async function executeWebhook(webhook: Webhook, body: any) {
+  return fetch(webhook.url, {
+    headers: [["Content-Type", "application/json"]],
+    body: JSON.stringify(body),
+    method: "POST",
+  });
+}
+
+async function executeTestWebhook(webhook: Webhook) {
+  return executeWebhook(webhook, await formatTestWebhook(webhook));
+}
+
+async function executeBountyWebhook(webhook: Webhook, bounty: Bounty) {
+  return executeWebhook(webhook, await formatBountyWebhook(webhook, bounty));
+}
+
 async function checkAlarm() {
   if (await browser.alarms.get()) {
     return;
   }
 
-  refreshBounties();
+  refresh();
 }
 
 browser.runtime.onMessage.addListener(async (message) => {
   switch (message.type) {
+    case "executeTestWebhook":
+      return executeTestWebhook(message.data);
+
     case "openBountyBoard":
       return openBountyBoard();
 
-    case "refreshBounties":
-      return refreshBounties();
+    case "refresh":
+      return refresh();
   }
 
   throw new RangeError("Unknown message type");
@@ -153,7 +258,8 @@ browser.storage.onChanged.addListener(async (changes) => {
   if (bounties == null) {
     return;
   }
-  const { newValue = [], oldValue } = bounties;
+
+  const { newValue, oldValue } = bounties;
 
   if (oldValue == null) {
     return;
@@ -162,20 +268,21 @@ browser.storage.onChanged.addListener(async (changes) => {
   const { settings } = await browser.storage.local.get({
     settings: {
       notifications: false,
+      webhooks: [],
     },
   });
 
-  if (settings.notifications) {
-    const newBounties = newValue.filter(
-      (newItem) =>
-        newItem.status === "AVAILABLE" &&
-        oldValue.every((oldItem) => newItem.campaign.id !== oldItem.campaign.id),
-    );
-
-    if (newBounties.length === 0) {
-      return;
-    }
+  const newBounties = newValue.filter(
+    (newItem: Bounty) =>
+      newItem.status === BountyStatus.Available &&
+      oldValue.every((oldItem: Bounty) => newItem.campaign.id !== oldItem.campaign.id),
+  );
 
+  if (newBounties.length === 0) {
+    return;
+  }
+
+  if (settings.notifications) {
     newBounties.forEach((bounty: Bounty) => {
       browser.notifications.create({
         iconUrl: getIconUrl("purple", 96),
@@ -185,11 +292,19 @@ browser.storage.onChanged.addListener(async (changes) => {
       });
     });
   }
+
+  settings.webhooks.forEach((webhook: Webhook) => {
+    newBounties.forEach((bounty: Bounty) => executeBountyWebhook(webhook, bounty));
+  });
+});
+
+browser.runtime.onInstalled.addListener(async () => {
+  await applyMigrations();
+  await refresh();
 });
 
-browser.runtime.onInstalled.addListener(refreshBounties);
-browser.runtime.onStartup.addListener(refreshBounties);
-browser.alarms.onAlarm.addListener(refreshBounties);
+browser.runtime.onStartup.addListener(refresh);
+browser.alarms.onAlarm.addListener(refresh);
 
 browser.action.onClicked.addListener(openBountyBoard);
 browser.notifications.onClicked.addListener(openBountyBoard);

src/background/index.ts

@@ -0,0 +1,38 @@
+const migrations = new Map([
+  [
+    "20250306201000_initial",
+    async () => {
+      const { settings } = await browser.storage.local.get("settings");
+
+      await browser.storage.local.set({
+        settings: {
+          theme: "light",
+          notifications: true,
+          webhooks: [],
+
+          ...settings,
+        },
+      });
+    },
+  ],
+]);
+
+export async function applyMigrations() {
+  const { appliedMigrations } = await browser.storage.local.get({
+    appliedMigrations: [],
+  });
+
+  for (const [name, migration] of migrations) {
+    const [version] = name.split("_");
+
+    if (appliedMigrations.includes(version)) {
+      continue;
+    }
+
+    await migration();
+
+    await browser.storage.local.set({
+      appliedMigrations: appliedMigrations.concat(version),
+    });
+  }
+}