rework V1

Data/.env.example

@@ -0,0 +1,7 @@
+FIREFOX_EXT_ID=mailcow-alias@example.tld
+
+# For jest tests
+TEST_MAILCOW_HOST=https://mail.host.com
+TEST_APIKEY=123-123-123-123-123
+TEST_FORWARD_ADDRESS=foo@host.com
+TEST_ALIAS_DOMAIN=host.com

Data/.gitignore

@@ -0,0 +1,209 @@
+### macOS ###
+# General
+.DS_Store
+.AppleDouble
+.LSOverride
+
+# Icon must end with two \r
+Icon
+
+
+# Thumbnails
+._*
+
+# Files that might appear in the root of a volume
+.DocumentRevisions-V100
+.fseventsd
+.Spotlight-V100
+.TemporaryItems
+.Trashes
+.VolumeIcon.icns
+.com.apple.timemachine.donotpresent
+
+# Directories potentially created on remote AFP share
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk
+
+### macOS Patch ###
+# iCloud generated files
+*.icloud
+
+### Node ###
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+.temp
+
+# Docusaurus cache and generated files
+.docusaurus
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
+
+### Node Patch ###
+# Serverless Webpack directories
+.webpack/
+
+# Optional stylelint cache
+
+# SvelteKit build / generate output
+.svelte-kit
+
+### react ###
+.DS_*
+**/*.backup.*
+**/*.back.*
+
+node_modules
+
+*.sublime*
+
+psd
+thumb
+sketch
+
+### VisualStudioCode ###
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+!.vscode/*.code-snippets
+
+# Local History for Visual Studio Code
+.history/
+
+# Built Visual Studio Code Extensions
+*.vsix
+
+### VisualStudioCode Patch ###
+# Ignore all local history of files
+.history
+.ionide
+
+# Plasmo
+.plasmo
+
+key.pem

Data/.prettierrc.cjs

@@ -0,0 +1,17 @@
+/**
+ * @type {import('prettier').Options}
+ */
+module.exports = {
+  printWidth: 80,
+  tabWidth: 2,
+  useTabs: false,
+  semi: false,
+  singleQuote: false,
+  trailingComma: "none",
+  bracketSpacing: true,
+  bracketSameLine: true,
+  plugins: [require.resolve("@plasmohq/prettier-plugin-sort-imports")],
+  importOrder: ["^@plasmohq/(.*)$", "^~(.*)$", "^[./]"],
+  importOrderSeparation: true,
+  importOrderSortSpecifiers: true,
+};

Data/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 jonerrr
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

Data/README.md

@@ -0,0 +1,25 @@
+# Mailcow Alias Generator
+
+A Chrome & Firefox extension for creating aliases using Mailcow's API.
+
+[Chromium-based browsers install](https://chrome.google.com/webstore/detail/mailcow-aliases/iodaelineglpblekpapnngdfoohkaedg) 
+
+[Firefox install](https://addons.mozilla.org/en-US/firefox/addon/mailcow-aliases/)
+
+## Usage
+
+Visit the extension options and complete the initial setup. You can create aliases by right-clicking on any page and selecting "Generate Alias". This will copy the email to your clipboard. In the extension popup, you can then view all your generated aliases (only by this extension).
+
+## Build Requirements
+
+- NodeJS 18.x or later
+- pnpm
+- A browser that supports Chrome or Firefox extensions
+
+## Build Instructions
+
+1. Clone the repository.
+2. Run `pnpm install`.
+3. Rename and fill in the `.env.example` with your Firefox extension ID.
+4. To build and package run `pnpm build --zip`. The default target is `chrome-mv3` but if you want to build for Firefox, add the argument `--target=firefox-mv2`.
+5. For Firefox, go to `about:debugging#/runtime/this-firefox`, click "Load Temporary Add-on", and select the `manifest.json` file in the `build/firefox-mv2-xxxx` folder. For Chrome, go to `chrome://extensions/`, click "Load unpacked", and select the `build/chrome-mv3-xxxx` folder.

Data/jest.config.mjs

@@ -0,0 +1,28 @@
+import { createRequire } from "module";
+import { pathsToModuleNameMapper } from "ts-jest";
+
+const require = createRequire(import.meta.url);
+const tsconfig = require("./tsconfig.json");
+
+/**
+ * @type {import('@jest/types').Config.InitialOptions}
+ */
+
+const config = {
+	setupFiles: ["jest-webextension-mock"],
+	extensionsToTreatAsEsm: [".ts", ".tsx"],
+	testRegex: ["^.+\\.test.tsx?$"],
+	moduleNameMapper: pathsToModuleNameMapper(tsconfig.compilerOptions.paths, {
+		prefix: "<rootDir>/",
+	}),
+	testEnvironment: "jsdom",
+	transform: {
+		"^.+\\.ts?$": ["ts-jest", { isolatedModules: true, useESM: true }],
+		"^.+\\.tsx?$": [
+			"ts-jest",
+			{ useESM: true, tsconfig: { jsx: "react-jsx" } },
+		],
+	},
+};
+
+export default config;

Data/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "mailcow-aliases",
+  "displayName": "Mailcow Aliases",
+  "version": "2.2.0",
+  "description": "Generate Mailcow aliases on the fly!",
+  "author": "jonah",
+  "homepage": "https://github.com/jonerrr/mailow-alias-extension/",
+  "scripts": {
+    "dev": "plasmo dev",
+    "build": "plasmo build",
+    "package": "plasmo package",
+    "test": "jest"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.11.1",
+    "@mantine/core": "^6.0.19",
+    "@mantine/notifications": "^6.0.19",
+    "@ngneat/falso": "^7.0.1",
+    "@plasmohq/messaging": "^0.5.0",
+    "@plasmohq/storage": "^1.7.2",
+    "dayjs": "^1.11.9",
+    "plasmo": "0.83.0",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "tabler-icons-react": "^1.56.0"
+  },
+  "devDependencies": {
+    "@jest/globals": "^29.6.2",
+    "@jest/types": "^29.6.1",
+    "@plasmohq/prettier-plugin-sort-imports": "4.0.1",
+    "@types/chrome": "0.0.243",
+    "@types/node": "20.5.0",
+    "@types/react": "18.2.20",
+    "@types/react-dom": "18.2.7",
+    "dotenv": "^16.3.1",
+    "jest": "^29.6.2",
+    "jest-environment-jsdom": "^29.6.2",
+    "jest-webextension-mock": "^3.8.9",
+    "prettier": "3.0.1",
+    "ts-jest": "^29.1.1",
+    "typescript": "5.1.6"
+  },
+  "manifest": {
+    "permissions": [
+      "tabs",
+      "contextMenus",
+      "clipboardWrite"
+    ],
+    "host_permissions": [
+      "https://*/*"
+    ],
+    "browser_specific_settings": {
+      "gecko": {
+        "id": "$FIREFOX_EXT_ID"
+      }
+    }
+  }
+}

Data/src/Components/AliasRow.tsx

@@ -0,0 +1,139 @@
+import {
+  ActionIcon,
+  CopyButton,
+  Group,
+  Skeleton,
+  Text,
+  Tooltip
+} from "@mantine/core"
+import { notifications } from "@mantine/notifications"
+import dayjs from "dayjs"
+import relativeTime from "dayjs/plugin/relativeTime"
+import { type Dispatch, type SetStateAction, useState } from "react"
+import {
+  ClipboardCheck,
+  Copy,
+  Inbox,
+  InboxOff,
+  Trash
+} from "tabler-icons-react"
+
+import { type Alias, type Settings, deleteAlias, updateAlias } from "~utils"
+
+dayjs.extend(relativeTime)
+
+interface AliasRowProps {
+  settings: Settings
+  alias: Alias
+  setAliases: Dispatch<SetStateAction<Alias[]>>
+}
+
+export function AliasRow({ settings, alias, setAliases }: AliasRowProps) {
+  const [loading, setLoading] = useState(false)
+
+  // TODO smooth animations for deletions and generating aliases
+  // TODO possibly an undo button after delete that stays until you close the popup
+
+  return (
+    <tr key={alias.id.toString()}>
+      <td>
+        <Text
+          size="md"
+          weight={500}
+          strikethrough={!alias.active}
+          c={alias.active ? "" : "dimmed"}>
+          {alias.address}
+        </Text>
+      </td>
+
+      <td>
+        <Text strikethrough={!alias.active} c={alias.active ? "" : "dimmed"}>
+          {alias.targetAddress}
+        </Text>
+      </td>
+
+      <td>
+        {/* <Text>{alias.modified.toLocaleString()}</Text> */}
+        <Text>{dayjs(alias.created).fromNow()}</Text>
+      </td>
+
+      {/* TODO: figure out why tooltips are under table header */}
+      <td className="actions">
+        <Skeleton visible={false}>
+          <Group spacing={4} position="right">
+            <CopyButton value={alias.address}>
+              {({ copied, copy }) => (
+                <Tooltip sx={{ zIndex: 2 }} label={copied ? "Copied" : "Copy"}>
+                  <ActionIcon
+                    aria-label="Copy"
+                    onClick={copy}
+                    color={copied ? "lime" : "teal"}
+                    variant="light">
+                    {copied ? <ClipboardCheck size={16} /> : <Copy size={16} />}
+                  </ActionIcon>
+                </Tooltip>
+              )}
+            </CopyButton>
+
+            <Tooltip label={alias.active ? "Disable" : "Enable"}>
+              <ActionIcon
+                aria-label={alias.active ? "Disable" : "Enable"}
+                color={alias.active ? "yellow" : "lime"}
+                variant="light"
+                loading={loading}
+                onClick={async () => {
+                  setLoading(true)
+                  const update = await updateAlias(
+                    alias.id,
+                    settings,
+                    alias.active ? 0 : 1
+                  )
+                  if (!update) {
+                    setLoading(false)
+                    return notifications.show({
+                      title: "Error",
+                      message: `Failed to ${
+                        alias.active ? "disable" : "enable"
+                      } alias`,
+                      color: "red"
+                    })
+                  }
+
+                  alias.active = !alias.active
+                  setLoading(false)
+                }}>
+                {alias.active ? <InboxOff size={16} /> : <Inbox size={16} />}
+              </ActionIcon>
+            </Tooltip>
+            <Tooltip label="Delete">
+              <ActionIcon
+                color="red"
+                variant="light"
+                loading={loading}
+                onClick={async () => {
+                  setLoading(true)
+
+                  const del = await deleteAlias(alias.id, settings)
+                  if (!del) {
+                    setLoading(false)
+                    return notifications.show({
+                      title: "Error",
+                      message: `Failed to delete alias`,
+                      color: "red"
+                    })
+                  }
+
+                  setAliases((aliases) =>
+                    aliases.filter((a) => a.id !== alias.id)
+                  )
+                  setLoading(false)
+                }}>
+                <Trash size={16} />
+              </ActionIcon>
+            </Tooltip>
+          </Group>
+        </Skeleton>
+      </td>
+    </tr>
+  )
+}

Data/src/Components/AliasTable.tsx

@@ -0,0 +1,90 @@
+import {
+  ActionIcon,
+  ScrollArea,
+  Table,
+  Tooltip,
+  createStyles
+} from "@mantine/core"
+import { type Dispatch, type SetStateAction, useState } from "react"
+import { Settings as SettingsIcon } from "tabler-icons-react"
+
+import type { Alias, Settings } from "~utils"
+
+import { AliasRow } from "./AliasRow"
+
+const useStyles = createStyles((theme) => ({
+  header: {
+    position: "sticky",
+    top: 0,
+    backgroundColor: theme.colors.dark[7],
+    transition: "box-shadow 150ms ease",
+    zIndex: 1,
+    "&::after": {
+      content: '""',
+      position: "absolute",
+      left: 0,
+      right: 0,
+      bottom: 0,
+      borderBottom: `1px solid ${theme.colors.dark[3]}`
+    }
+  },
+
+  scrolled: {
+    boxShadow: theme.shadows.sm
+  }
+}))
+
+interface AliasTableProps {
+  settings: Settings
+  aliases: Alias[]
+  setAliases: Dispatch<SetStateAction<Alias[]>>
+}
+//TODO possibily cache stuff
+export function AliasTable({ settings, aliases, setAliases }: AliasTableProps) {
+  const [scrolled, setScrolled] = useState(false)
+
+  const { classes, cx } = useStyles()
+  //TODO fix loading
+  return (
+    <ScrollArea
+      sx={{ height: 300 }}
+      onScrollPositionChange={({ y }) => setScrolled(y !== 0)}
+      offsetScrollbars>
+      <Table
+        sx={{ maxHeight: 400, maxWidth: 800, isolation: "isolate" }}
+        verticalSpacing="xs">
+        <thead className={cx(classes.header, { [classes.scrolled]: scrolled })}>
+          <tr>
+            <th>Alias</th>
+            <th>Target</th>
+            <th>Created</th>
+            <th style={{ float: "right" }}>
+              <Tooltip label="Settings" position="left">
+                <ActionIcon
+                  aria-label="Settings"
+                  component="a"
+                  href="/options.html"
+                  target="_blank">
+                  <SettingsIcon size={18} />
+                </ActionIcon>
+              </Tooltip>
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          {/* TODO show current website aliases on top */}
+          {aliases
+            .sort((a, b) => b.created - a.created)
+            .map((alias) => (
+              <AliasRow
+                settings={settings}
+                alias={alias}
+                setAliases={setAliases}
+                key={alias.id.toString()}
+              />
+            ))}
+        </tbody>
+      </Table>
+    </ScrollArea>
+  )
+}

Data/src/background.ts

@@ -0,0 +1,66 @@
+import { Storage } from "@plasmohq/storage"
+import { type Settings, generateAlias } from "~utils"
+
+chrome.runtime.onInstalled.addListener(async (details) => {
+  if (details.reason !== "install") return
+
+  // set initial settings
+  const storage = new Storage()
+
+  await storage.set("settings", {
+    host: "",
+    apiKey: "",
+    forwardAddress: "",
+    aliasDomain: "",
+    generationMethod: 1
+  })
+  await storage.set("initialSetup", true)
+
+  // open options page
+  chrome.runtime.openOptionsPage()
+})
+
+// this adds a menu item when you right click
+chrome.contextMenus.create({
+  title: "Generate Alias",
+  id: "generateAlias",
+  contexts: ["all"]
+})
+
+chrome.contextMenus.onClicked.addListener(async (info, tab) => {
+  if (info.menuItemId === "generateAlias") {
+    const storage = new Storage()
+    const settings: Settings = await storage.get("settings")
+
+    const configured =
+      settings.host &&
+      settings.apiKey &&
+      settings.forwardAddress &&
+      settings.aliasDomain
+
+    if (!configured) {
+      // TODO error stuff (maybe create another message handler in content.ts for popups)
+      console.log("not configured")
+      return
+    }
+
+    const hostname = new URL(tab!.url!).hostname
+
+    const alias = await generateAlias(settings as Required<Settings>, hostname)
+
+    // once service workers support the clipboard api, we won't have to do this messaging stuff
+
+    chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
+      chrome.tabs.sendMessage(
+        tabs[0].id,
+        {
+          message: "copyText",
+          textToCopy: alias.address
+        },
+        function (response) {}
+      )
+    })
+  }
+})
+
+export {}

Data/src/content.ts

@@ -0,0 +1,19 @@
+export {}
+
+chrome.runtime.onMessage.addListener( 
+    function(request) {
+        if (request.message === "copyText"){
+        copyToClipboard(request.textToCopy);
+            //TODO (maybe) create popup modal notifying user that text was copied
+    }
+    }
+);
+
+function copyToClipboard(text: string) {
+    const el = document.createElement("textarea")
+    el.value = text
+    document.body.appendChild(el)
+    el.select()
+    document.execCommand("copy")
+    document.body.removeChild(el)
+  }

Data/src/options.tsx

@@ -0,0 +1,350 @@
+import {
+  Button,
+  Card,
+  Collapse,
+  Group,
+  Modal,
+  PasswordInput,
+  SegmentedControl,
+  Select,
+  Skeleton,
+  Text,
+  TextInput,
+  Title,
+  createStyles
+} from "@mantine/core"
+import { notifications } from "@mantine/notifications"
+import { useEffect, useState } from "react"
+
+import { useStorage } from "@plasmohq/storage/hook"
+import { Storage } from "@plasmohq/storage"
+import { ThemeProvider } from "~theme"
+import { type Settings, fetchDomains, generateEmail } from "~utils"
+
+const useStyles = createStyles((theme) => ({
+  item: {
+    "& + &": {
+      paddingTop: theme.spacing.sm,
+      marginTop: theme.spacing.sm,
+      borderTop: `1px solid ${theme.colors.dark[4]}`
+    }
+  },
+  collapse: {
+    paddingTop: theme.spacing.sm,
+    marginTop: theme.spacing.sm,
+    borderTop: `1px solid ${theme.colors.dark[4]}`
+  }
+}))
+
+export default function IndexOptions() {
+  const { classes } = useStyles()
+
+  const [settings, updateSettings] = useStorage<Settings | "loading">(
+    "settings",
+    "loading"
+  )
+  console.log(settings)
+  const [initialSetup, setInitialSetup] = useStorage<boolean>(
+    "initialSetup",
+    false
+  )
+
+  const [loading, setLoading] = useState(false)
+
+  // for temporary storage of config values. once they are valid, they are saved in storage
+  const [host, setHost] = useState("")
+  //TODO store apikey securely (maybe have an option for using the SecureStorage API and setting a password)
+  const [apiKey, setApiKey] = useState("")
+  const [forwardAddress, setForwardAddress] = useState("")
+
+  const [domains, setDomains] = useState<string[]>([])
+
+  const storage = new Storage()
+
+  storage.watch({
+    settings: (s) => {
+      console.log(s.newValue)
+    }
+  })
+
+  useEffect(() => {
+    // load settings from storage only after they have loaded
+    if (settings === "loading") return
+
+    // set the state of the config values to the values in storage
+    setHost((settings as Settings).host ?? "")
+    setApiKey((settings as Settings).apiKey ?? "")
+    setForwardAddress((settings as Settings).forwardAddress ?? "")
+  }, [settings])
+
+  const changesSaved =
+    settings !== "loading" &&
+    settings.host === host &&
+    settings.apiKey === apiKey &&
+    settings.forwardAddress === forwardAddress
+
+  return (
+    <ThemeProvider>
+      <Modal
+        opened={initialSetup}
+        centered
+        withCloseButton={false}
+        closeOnClickOutside={false}
+        onClose={() => setInitialSetup(false)}
+        title={<Text fw={700}>Thank you for installing!</Text>}>
+        <Text c="dimmed">
+          Please configure your Mailcow details to use the extension. You can
+          change these settings later in the extension's settings.
+          <br />
+          To generate an alias, right click anywhere on a page and select the
+          "Generate Alias" option. The alias will be automatically copied to
+          your clipboard.
+          <br />
+          If you want to view all your aliases, click on the icon in the
+          extension menu.
+        </Text>
+        <Button fullWidth mt={10} onClick={() => setInitialSetup(false)}>
+          I Understand
+        </Button>
+      </Modal>
+
+      <Card
+        withBorder
+        radius="md"
+        p="xl"
+        m="lg"
+        sx={{ backgroundColor: "dark.7" }}>
+        <Skeleton visible={settings === "loading"}>
+          <Group position="apart">
+            <div>
+              <Text size="lg" sx={{ lineHeight: 1 }} weight={700}>
+                Extension Configuration
+              </Text>
+              <Text size="xs" color="dimmed" mt={3} mb="xl">
+                Configure your Mailcow details and alias generation method
+              </Text>
+            </div>
+
+            <Text
+              size="xs"
+              color="dimmed"
+              c={changesSaved ? "gray.4" : "red.8"}>
+              {changesSaved ? "All changes saved" : "Unsaved changes"}
+            </Text>
+          </Group>
+
+          <Group position="apart" noWrap spacing="xl" className={classes.item}>
+            <div>
+              <Text>Host</Text>
+              <Text size="xs" color="dimmed">
+                URL of your Mailcow instance
+              </Text>
+            </div>
+            <TextInput
+              value={host}
+              onChange={(event) => {
+                event.currentTarget.value.match(
+                  /^(https?:\/\/)(?:[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?\.)+[a-z0-9][a-z0-9-]{0,61}[a-z0-9]$/gi
+                )
+                  ? updateSettings({
+                      ...(settings as Settings),
+                      host: event.currentTarget.value
+                    })
+                  : setHost(event.currentTarget.value)
+              }}
+              error={
+                host === "" ||
+                host.match(
+                  /^(https?:\/\/)(?:[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?\.)+[a-z0-9][a-z0-9-]{0,61}[a-z0-9]$/gi
+                )
+                  ? null
+                  : "Invalid Host"
+              }
+              placeholder="https://mail.example.com"
+              size="md"
+              sx={{ width: "30%" }}
+            />
+          </Group>
+
+          <Group position="apart" noWrap spacing="xl" className={classes.item}>
+            <div>
+              <Text>API Key</Text>
+              <Text size="xs" color="dimmed">
+                API key of your Mailcow instance
+              </Text>
+            </div>
+            <PasswordInput
+              value={apiKey}
+              onChange={(event) => {
+                // replace any character that can't be part of an API key.
+                // it is easy to accidentally copy a bunch of spaces or newlines when copying the API key
+                const cleaned = event.currentTarget.value.replace(
+                  /[^\w\d-]+/g,
+                  ""
+                )
+                cleaned.match(/^([\w]{6}-){4}[\w]{6}$/g)
+                  ? updateSettings({
+                      ...(settings as Settings),
+                      apiKey: cleaned
+                    })
+                  : setApiKey(cleaned)
+              }}
+              error={
+                apiKey === "" || apiKey.match(/^([\w]{6}-){4}[\w]{6}$/g)
+                  ? null
+                  : "Invalid API Key"
+              }
+              placeholder="XXXXXX-XXXXXX-XXXXXX-XXXXXX-XXXXXX"
+              size="md"
+              sx={{ width: "30%" }}
+            />
+          </Group>
+
+          <Group position="apart" noWrap spacing="xl" className={classes.item}>
+            <div>
+              <Text>Forwarding Address</Text>
+              <Text size="xs" color="dimmed">
+                Default address for email to be forwarded to
+              </Text>
+            </div>
+            <TextInput
+              value={forwardAddress}
+              onChange={(event) => {
+                event.currentTarget.value.match(
+                  /^[\w-\.]+@([\w-]+\.)+[\w-]{2,6}$/g
+                )
+                  ? updateSettings({
+                      ...(settings as Settings),
+                      forwardAddress: event.currentTarget.value
+                    })
+                  : setForwardAddress(event.currentTarget.value)
+              }}
+              error={
+                forwardAddress === "" ||
+                forwardAddress.match(/^[\w-\.]+@([\w-]+\.)+[\w-]{2,6}$/g)
+                  ? null
+                  : "Invalid Email Address"
+              }
+              placeholder="example@example.com"
+              size="md"
+              sx={{ width: "30%" }}
+            />
+          </Group>
+
+          <Collapse in={!!domains.length} className={classes.collapse}>
+            <Group position="apart" noWrap spacing="xl">
+              <div>
+                <Text>Alias Domain</Text>
+                <Text size="xs" color="dimmed">
+                  Default domain used for generating aliases
+                </Text>
+              </div>
+              <Select
+                size="md"
+                sx={{ width: "30%" }}
+                data={domains}
+                value={(settings as Settings).aliasDomain}
+                onChange={(value) =>
+                  updateSettings({
+                    ...(settings as Settings),
+                    aliasDomain: value
+                  })
+                }
+                transitionProps={{
+                  transition: "pop-top-left",
+                  duration: 80,
+                  timingFunction: "ease"
+                }}
+              />
+            </Group>
+
+            <Group
+              position="apart"
+              noWrap
+              spacing="xl"
+              className={classes.collapse}>
+              <div>
+                <Text>Generation Method</Text>
+                <Text size="xs" color="dimmed">
+                  How the alias addresses should be generated
+                </Text>
+              </div>
+              <SegmentedControl
+                size="md"
+                sx={{ width: "30%" }}
+                data={[
+                  { label: "Random Characters", value: "0" },
+                  { label: "Random Name", value: "1" }
+                ]}
+                value={(settings as Settings).generationMethod?.toString()}
+                onChange={(value) =>
+                  updateSettings({
+                    ...(settings as Settings),
+                    generationMethod: parseInt(value)
+                  })
+                }
+              />
+            </Group>
+
+            <Group
+              position="apart"
+              noWrap
+              spacing="xl"
+              className={classes.collapse}>
+              <div>
+                <Title order={2}>Example Alias</Title>
+              </div>
+              <Text>
+                {generateEmail(settings as Required<Settings>, "example.com")}
+              </Text>
+            </Group>
+          </Collapse>
+
+          <Group position="center" mt="sm" pt="sm">
+            <Button
+              variant="light"
+              size="xl"
+              fullWidth
+              loading={loading}
+              disabled={
+                !(
+                  settings !== "loading" &&
+                  settings.host &&
+                  settings.apiKey &&
+                  settings.forwardAddress
+                )
+              }
+              onClick={() => {
+                ;(async () => {
+                  setLoading(true)
+                  try {
+                    const domains = await fetchDomains(
+                      settings as Required<Settings>
+                    )
+                    if (!domains.length)
+                      return notifications.show({
+                        title: "No Domains Found",
+                        message:
+                          "No valid domains were found on your Mailcow instance",
+                        color: "red"
+                      })
+                    setDomains(domains)
+                  } catch (e) {
+                    console.error(e)
+                    notifications.show({
+                      title: "Error fetching Mailcow information",
+                      message: e.message,
+                      color: "red"
+                    })
+                  }
+                  setLoading(false)
+                })()
+              }}>
+              {loading ? "Loading" : "Load"} Mailcow Information
+            </Button>
+          </Group>
+        </Skeleton>
+      </Card>
+    </ThemeProvider>
+  )
+}

Data/src/popup.tsx

@@ -0,0 +1,73 @@
+import { Alert, Skeleton } from "@mantine/core"
+import { useEffect, useState } from "react"
+import { AlertCircle } from "tabler-icons-react"
+import { useStorage } from "@plasmohq/storage/hook"
+import { AliasTable } from "~Components/AliasTable"
+import { ThemeProvider } from "~theme"
+import { type Alias, type Settings, fetchAliases, generateHash } from "~utils"
+
+export default function IndexPopup() {
+  //TODO: rename because its no longer a hash
+  const [siteHash, setSiteHash] = useState<string>()
+  const [aliases, setAliases] = useState<Alias[]>([])
+  const [loading, setLoading] = useState(true)
+
+  // initialize as loading and then set to the actual value
+  const [settings] = useStorage<Settings | "loading">("settings", "loading")
+
+  // fetch the window data of current tab
+  chrome.tabs.query(
+    { active: true, windowId: chrome.windows.WINDOW_ID_CURRENT },
+    async (t) =>
+
+      setSiteHash(new URL(t[0].url!).hostname)
+  )
+
+  const configured =
+    settings !== "loading" &&
+    settings.host &&
+    settings.apiKey &&
+    settings.forwardAddress &&
+    settings.aliasDomain
+
+  useEffect(() => {
+    if (!configured) {
+      setLoading(false)
+      return
+    }
+
+    ; (async () => {
+      await new Promise((r) => setTimeout(r, 1000))
+      setAliases(await fetchAliases(settings as Required<Settings>))
+      setLoading(false)
+    })()
+  }, [configured])
+
+  return (
+    <ThemeProvider>
+      <Skeleton
+        visible={settings === "loading" || loading}
+        sx={{ minWidth: "600px", minHeight: "300px" }}>
+        {configured ? (
+          <AliasTable
+            settings={settings}
+            aliases={aliases}
+            setAliases={setAliases}
+          />
+        ) : (
+          <Alert
+            icon={<AlertCircle size={16} />}
+            title="Warning"
+            color="yellow">
+            Initial setup is missing to begin using this extension. Please visit
+            the{" "}
+            <a href="/options.html" target="_blank">
+              options
+            </a>{" "}
+            page and configure your Mailcow instance.
+          </Alert>
+        )}
+      </Skeleton>
+    </ThemeProvider>
+  )
+}

Data/src/theme.tsx

@@ -0,0 +1,38 @@
+import { MantineProvider } from "@mantine/core"
+import type { EmotionCache } from "@mantine/core"
+import { Notifications } from "@mantine/notifications"
+import type { PropsWithChildren } from "react"
+
+interface Props extends PropsWithChildren {
+  emotionCache?: EmotionCache
+}
+
+export function ThemeProvider({ emotionCache, children }: Props) {
+  return (
+    <MantineProvider
+      withGlobalStyles
+      withNormalizeCSS
+      theme={{
+        colorScheme: "dark",
+        colors: {
+          moo: [
+            "#fffcde",
+            "#fbf5b2",
+            "#f8ef85",
+            "#f6e956",
+            "#f3e228",
+            "#dac912",
+            "#a99c09",
+            "#797004",
+            "#494300",
+            "#191600"
+          ]
+        },
+        primaryColor: "moo"
+      }}
+      emotionCache={emotionCache}>
+      <Notifications />
+      {children}
+    </MantineProvider>
+  )
+}

Data/src/utils.ts

@@ -0,0 +1,251 @@
+import { randAlphaNumeric, randEmail } from "@ngneat/falso"
+
+// import { createHash } from "crypto";
+
+// change the number depending on the version of the extension, this is to prevent conflicts with breaking changes
+const PREFIX = "aliasaddon_2"
+
+export interface Alias {
+  // id that mailcow assigns alias
+  id: number
+  // domain of alias
+  domain: string
+  targetAddress: string
+  address: string
+  active: boolean
+  created: number
+  // modified: Date
+  // hash of site
+  siteHash: string
+}
+
+enum GenerationMethod {
+  RandomCharacters = 0,
+  RandomName = 1
+  // WebsiteURL = 2
+}
+
+export interface Settings {
+  host?: string
+  apiKey?: string
+  forwardAddress?: string
+  aliasDomain: string | null
+  generationMethod: GenerationMethod
+}
+
+interface FetchAliasData {
+  id: number
+  domain: string
+  // private comment includes the site hash and will start with aliasextension_ if it was generated by this extension
+  private_comment: string | null
+  // target address
+  goto: string
+  // alias address
+  address: string
+  active: number
+  active_int: number
+  created: string
+  // modified will be null if the alias has never been modified
+  modified: string | null
+}
+
+export async function fetchDomains(
+  settings: Required<Settings>
+): Promise<string[]> {
+  const controller = new AbortController()
+  const id = setTimeout(() => controller.abort(), 5000)
+
+  const data: {
+    domain_name: string
+    aliases_left: number
+    active: number
+    active_int: number
+  }[] = await (
+    await fetch(`${settings.host}/api/v1/get/domain/all`, {
+      headers: {
+        "X-API-Key": settings.apiKey
+      },
+      signal: controller.signal
+    })
+  ).json()
+  clearTimeout(id)
+
+  return data
+    .filter((domain) => domain.active === 1 && domain.aliases_left > 0)
+    .map((domain) => domain.domain_name)
+}
+
+export async function fetchAliases(
+  settings: Required<Settings>
+): Promise<Alias[]> {
+  const data: FetchAliasData[] = await (
+    await fetch(`${settings.host}/api/v1/get/alias/all`, {
+      headers: {
+        "X-API-Key": settings.apiKey
+      }
+    })
+  ).json()
+
+  return data
+    .filter(
+      // make sure alias is active and was generated by this extension
+      (alias) =>
+        alias.private_comment && alias.private_comment.startsWith(PREFIX)
+    )
+    .map((alias) => {
+      // format: prefix, version, hash, timestamp
+      const info = alias.private_comment!.split("_")
+
+      return {
+        id: alias.id,
+        domain: alias.domain,
+        targetAddress: alias.goto,
+        address: alias.address,
+        active: alias.active === 1,
+        created: parseInt(info[3]),
+        // modified: alias.modified ? new Date(`${alias.modified}.000Z`) : null,
+        siteHash: info[2]
+      }
+    })
+}
+
+export async function generateAlias(
+  settings: Required<Settings>,
+  hostname?: string
+): Promise<Alias> {
+  const address = generateEmail(settings, hostname)
+  // const hash = await generateHash(hostname ?? "no")
+  const hash = hostname ?? "nohostname"
+  // although mailcow has its own date, the format they use sucks
+  const createdAt = Date.now()
+
+  const controller = new AbortController()
+  const timeoutId = setTimeout(() => controller.abort(), 5000)
+
+  // first in msg array should be "alias_added", second is the address, third is the id as a string
+  const data = await (
+    await fetch(`${settings.host}/api/v1/add/alias`, {
+      headers: {
+        "Content-Type": "application/json",
+        "X-API-Key": settings.apiKey
+      },
+      method: "POST",
+      body: JSON.stringify({
+        address,
+        goto: settings.forwardAddress,
+        active: "1",
+        private_comment: `${PREFIX}_${hash}_${createdAt}`
+      }),
+      signal: controller.signal
+    })
+  ).json()
+  clearTimeout(timeoutId)
+
+  if (data[0].type !== "success") {
+    throw new Error("Failed to generate alias")
+  }
+
+  return {
+    id: parseInt(data[0].msg[2]),
+    domain: settings.aliasDomain!,
+    targetAddress: settings.apiKey,
+    address,
+    active: true,
+    // mailcow returns dates in weird format so not using them (https://github.com/mailcow/mailcow-dockerized/issues/4876)
+    created: createdAt,
+    // modified: null,
+    siteHash: hash
+  }
+}
+
+export async function updateAlias(
+  id: number,
+  settings: Settings,
+  active: 0 | 1
+): Promise<boolean> {
+  const controller = new AbortController()
+  const timeoutId = setTimeout(() => controller.abort(), 5000)
+
+  const data = await (
+    await fetch(`${settings.host}/api/v1/edit/alias/${id}`, {
+      headers: {
+        "Content-Type": "application/json",
+        "X-API-Key": settings.apiKey!
+      },
+      method: "POST",
+      body: JSON.stringify({
+        attr: { active: active.toString() },
+        items: [id]
+      }),
+      signal: controller.signal
+    })
+  ).json()
+  clearTimeout(timeoutId)
+
+  return data[0].type === "success"
+}
+
+export async function deleteAlias(
+  id: number,
+  settings: Settings
+): Promise<boolean> {
+  const controller = new AbortController()
+  const timeoutId = setTimeout(() => controller.abort(), 5000)
+
+  const data = await (
+    await fetch(`${settings.host}/api/v1/delete/alias`, {
+      headers: {
+        "Content-Type": "application/json",
+        "X-API-Key": settings.apiKey!
+      },
+      method: "POST",
+      body: JSON.stringify([id]),
+      signal: controller.signal
+    })
+  ).json()
+  clearTimeout(timeoutId)
+
+  return data[0].type === "success"
+}
+
+// export function generateHash(data: string) {
+// 	return createHash("sha256").update(data).digest("hex");
+// }
+
+export async function generateHash(data: string) {
+  return Array.from(
+    new Uint8Array(
+      await crypto.subtle.digest("SHA-256", new TextEncoder().encode(data))
+    )
+  )
+    .map((bytes) => bytes.toString(16).padStart(2, "0"))
+    .join("")
+}
+
+export function generateEmail(
+  settings: Required<Settings>,
+  hostname?: string
+): string {
+  switch (settings.generationMethod) {
+    case GenerationMethod.RandomCharacters:
+      return `${randAlphaNumeric({ length: 16 }).join("")}@${
+        settings.aliasDomain
+      }`
+
+    case GenerationMethod.RandomName:
+      console.log(settings)
+      if (!settings.aliasDomain) {
+        return randEmail({ provider: "example", suffix: "com" })
+      }
+      const domain = settings.aliasDomain.split(".")
+      const suffix = domain.pop()
+      const provider = domain.join(".")
+
+      return randEmail({ provider, suffix })
+
+    // case GenerationMethod.WebsiteURL:
+    //   return `${hostname.replace(".", "_")}_${faker.random.numeric(3)}@${
+    //     settings.aliasDomain
+    //   }`
+  }
+}

Data/tests/utils.test.ts

@@ -0,0 +1,51 @@
+import "dotenv/config"
+
+import { describe, expect, it } from "@jest/globals"
+
+import {
+  type Settings,
+  fetchAliases,
+  generateAlias,
+  generateEmail,
+  generateHash
+} from "~utils"
+
+describe("util tests", () => {
+  const settings: Settings = {
+    host: process.env.TEST_MAILCOW_HOST!,
+    apiKey: process.env.TEST_APIKEY!,
+    forwardAddress: process.env.TEST_FORWARD_ADDRESS!,
+    aliasDomain: process.env.TEST_ALIAS_DOMAIN!,
+    generationMethod: 0
+  }
+
+  // it("should generate a hash for example.com", () => {
+  // 	const hash = generateHash("example.com");
+  // 	expect(hash).toBe(
+  // 		"a379a6f6eeafb9a55e378c118034e2751e682fab9f2d30ab13d2125586ce1947",
+  // 	);
+  // });
+
+  it("should generate an email for example.com", () => {
+    const email = generateEmail(settings, "example.com")
+
+    expect(
+      email.endsWith(process.env.TEST_ALIAS_DOMAIN!.split("@").pop())
+    ).toBe(true)
+  })
+
+  it("should create an alias", async () => {
+    const alias = await generateAlias(settings, "example.com")
+    console.log(alias)
+    expect(
+      alias.targetAddress.endsWith(
+        process.env.TEST_ALIAS_DOMAIN!.split("@").pop()
+      )
+    ).toBe(true)
+  })
+
+  it("should fetch aliases", async () => {
+    const aliases = fetchAliases(settings)
+    console.log(aliases)
+  })
+})

Data/tsconfig.json

@@ -0,0 +1,34 @@
+// {
+//   "extends": "plasmo/templates/tsconfig.base",
+//   "exclude": ["node_modules"],
+//   "include": [".plasmo/index.d.ts", "./**/*.ts", "./**/*.tsx"],
+//   "compilerOptions": {
+//     "jsx": "react",
+//     "paths": {
+//       "~*": ["./src/*"]
+//     },
+//     "baseUrl": ".",
+//     "strictNullChecks": true,
+//     "ignoreDeprecations": "5.0"
+//   }
+// }
+
+{
+  "extends": "plasmo/templates/tsconfig.base",
+  "exclude": [
+    "node_modules"
+  ],
+  "include": [
+    ".plasmo/index.d.ts",
+    "./**/*.ts",
+    "./**/*.tsx"
+  ],
+  "compilerOptions": {
+    "paths": {
+      "~*": [
+        "./*"
+      ]
+    },
+    "baseUrl": "."
+  }
+}