Fix linting issues and move some things around.

source/content-scripts/features/username-colors.ts

@@ -1,12 +1,21 @@
-import { log, querySelectorAll, getColorFromStringHash, isColorBright } from "../../utilities/exports.js";
-import { type UsernameColorsData } from "../../storage/exports.js";
+import {type UsernameColorsData} from "../../storage/exports.js";
+import {
+  log,
+  querySelectorAll,
+  getColorFromStringHash,
+  isColorBright,
+} from "../../utilities/exports.js";
 
 export async function runUsernameColorsFeature(
   data: UsernameColorsData,
   anonymizeUsernamesEnabled: boolean,
   randomizeUsernameColorsEnabled: boolean,
 ) {
-  const count = await usernameColors(data, anonymizeUsernamesEnabled, randomizeUsernameColorsEnabled);
+  const count = await usernameColors(
+    data,
+    anonymizeUsernamesEnabled,
+    randomizeUsernameColorsEnabled,
+  );
   log(`Username Colors: Applied ${count} colors.`);
 }
 
@@ -17,7 +26,7 @@ async function usernameColors(
 ): Promise<number> {
   const usernameColors = new Map<string, string>();
   for (const {
-    value: { color, username: usernames },
+    value: {color, username: usernames},
   } of data) {
     for (const username of usernames.split(",")) {
       usernameColors.set(username.trim().toLowerCase(), color);
@@ -42,18 +51,21 @@ async function usernameColors(
     }
 
     element.classList.add("trx-username-colors");
-    let color = usernameColors.get(target);
-    if (color) {
+    const color = usernameColors.get(target);
+    if (color !== undefined) {
       element.style.color = color;
     } else if (randomizeUsernameColorsEnabled) {
+      element.classList.add("trx-random-username-color");
       const randomColor = await getColorFromStringHash(target);
-      const fontColor = isColorBright(randomColor) ? "#000" : "#FFF"
+      const fontColor = isColorBright(randomColor) ? "#000" : "#FFF";
       element.style.setProperty("--background-color", randomColor);
-      element.style.setProperty("--text-color", fontColor);
-      element.classList.add("trx-colored-username")
+      // Specifically use "--link-color" here so Tildes's link color doesn't
+      // override ours.
+      element.style.setProperty("--link-color", fontColor);
     } else {
       continue;
     }
+
     count += 1;
   }
 

source/content-scripts/setup.tsx

@@ -95,8 +95,14 @@ async function initialize() {
   if (enabledFeatures.value.has(Feature.UsernameColors)) {
     observerFeatures.push(async () => {
       const data = await fromStorage(Feature.UsernameColors);
-      const randomizeUsernameColors = await fromStorage(Data.RandomizeUsernameColors);
-      runUsernameColorsFeature(data, anonymizeUsernamesEnabled, randomizeUsernameColors.value);
+      const randomizeUsernameColors = await fromStorage(
+        Data.RandomizeUsernameColors,
+      );
+      await runUsernameColorsFeature(
+        data,
+        anonymizeUsernamesEnabled,
+        randomizeUsernameColors.value,
+      );
     });
   }
 

source/options/components/username-colors.tsx

@@ -1,3 +1,4 @@
+import {type Value} from "@holllo/webextension-storage";
 import {Component} from "preact";
 import {log} from "../../utilities/exports.js";
 import {
@@ -9,7 +10,6 @@ import {
   fromStorage,
 } from "../../storage/exports.js";
 import {Setting, type SettingProps} from "./index.js";
-import { Value } from "@holllo/webextension-storage";
 
 type State = {
   previewChecked: "off" | "foreground" | "background";
@@ -31,7 +31,10 @@ export class UsernameColorsSetting extends Component<SettingProps, State> {
   }
 
   async componentDidMount() {
-    this.setState({usernameColors: await fromStorage(Feature.UsernameColors), randomizeChecked: await fromStorage(Data.RandomizeUsernameColors)});
+    this.setState({
+      randomizeChecked: await fromStorage(Data.RandomizeUsernameColors),
+      usernameColors: await fromStorage(Feature.UsernameColors),
+    });
   }
 
   addNewColor = async () => {
@@ -104,12 +107,12 @@ export class UsernameColorsSetting extends Component<SettingProps, State> {
     this.setState({previewChecked});
   };
 
-  toggleRandomized = () => {
+  toggleRandomized = async () => {
     const randomizeChecked = this.state.randomizeChecked;
     randomizeChecked.value = !randomizeChecked.value;
-    void randomizeChecked.save();
-    this.setState({randomizeChecked})
-  }
+    await randomizeChecked.save();
+    this.setState({randomizeChecked});
+  };
 
   onInput = (event: Event, id: number, key: "color" | "username") => {
     const colorIndex = this.state.usernameColors.findIndex(
@@ -174,7 +177,6 @@ export class UsernameColorsSetting extends Component<SettingProps, State> {
       );
     });
 
-
     return (
       <Setting {...this.props}>
         <p class="info">
@@ -183,8 +185,9 @@ export class UsernameColorsSetting extends Component<SettingProps, State> {
           You can enter multiple usernames separated by a comma if you want them
           to use the same color.
           <br />
-          If randomize is selected then all usernames will be given a random background color. 
-          This will not override colors you have manually assigned.
+          If randomize is selected then all usernames will be given a random
+          background color. This will not override colors you have manually
+          assigned.
         </p>
 
         <div class="username-colors-controls">

source/scss/_shared.scss

@@ -2,10 +2,3 @@
   /* stylelint-disable-next-line declaration-no-important */
   display: none !important;
 }
-
-.trx-colored-username {
-  background-color: var(--background-color);
-  border-radius: 3px;
-  color: var(--text-color);
-  padding: 2px 3px;
-}

source/scss/content-scripts.scss

@@ -5,6 +5,7 @@
 @import "scripts/jump-to-new-comment";
 @import "scripts/markdown-toolbar";
 @import "scripts/user-labels";
+@import "scripts/username-colors";
 
 // Miscellaneous
 @import "shared";

source/scss/scripts/_username-colors.scss

@@ -0,0 +1,6 @@
+.trx-random-username-color {
+  background-color: var(--background-color);
+  border-radius: 3px;
+  color: var(--link-color);
+  padding: 2px 3px;
+}

source/utilities/color.ts

@@ -1,3 +1,12 @@
+import {hashSha256} from "./text.js";
+
+/** Return a hex color based on a hash of the input string. */
+export async function getColorFromStringHash(input: string): Promise<string> {
+  const hash = Number.parseInt(await hashSha256(input), 16);
+  const color = Math.abs(hash % 0xff_ff_ff).toString(16);
+  return `#${color}`.padEnd(7, "0");
+}
+
 /** Returns whether a hex color is "bright". */
 export function isColorBright(color: string): boolean {
   if (color.startsWith("#")) {

source/utilities/text.ts

@@ -17,21 +17,11 @@ export function pluralize(
   return plural ?? singular + "s";
 }
 
-/** Return a hash for a given username */
-export async function hashString(str: string): Promise<string> {
-  const encoder = new TextEncoder();
-  const data = encoder.encode(str)
-  const hashBuffer = await crypto.subtle.digest("SHA-256", data);
-  const hashArray = Array.from(new Uint8Array(hashBuffer));
-  const hashString = hashArray
-    .map((b) => b.toString())
+/** Return the SHA-256 hash for a given string. */
+export async function hashSha256(input: string): Promise<string> {
+  const uint8Input = new window.TextEncoder().encode(input);
+  const digest = await window.crypto.subtle.digest("SHA-256", uint8Input);
+  return Array.from(new window.Uint8Array(digest))
+    .map((byte) => byte.toString(16).padStart(2, "0"))
     .join("");
-  return hashString;
-}
-
-/** Return a color hex code based on hash of username string */
-export async function getColorFromStringHash(username: string): Promise<string> {
-  const usernameHash = parseInt(await hashString(username));
-  const color = Math.abs(usernameHash % parseInt("0xFFFFFF")).toString(16)
-  return `#${color}`.padEnd(7, "0")
 }