diff --git a/source/content-scripts/setup.tsx b/source/content-scripts/setup.tsx index 94d0909..a5235da 100644 --- a/source/content-scripts/setup.tsx +++ b/source/content-scripts/setup.tsx @@ -1,6 +1,7 @@ import {type JSX, render} from "preact"; import { extractGroups, + extractThemes, initializeGlobals, log, userIsLoggedIn, @@ -43,6 +44,13 @@ async function initialize() { // them without having to change the hardcoded values. const usesKnownGroups = new Set([Feature.Autocomplete]); const knownGroups = await fromStorage(Data.KnownGroups); + + // Similarly to the known groups, any features that use the list of themes + // should be added here. + const usesThemesList = new Set([]); + const themesList = await fromStorage(Data.ThemesList); + const themesListUpdatedDate = await fromStorage(Data.ThemesListUpdatedDate); + const userLabels = await fromStorage(Feature.UserLabels); const isLoggedIn = userIsLoggedIn(); @@ -64,6 +72,24 @@ async function initialize() { } } + // Only update the list of themes when it has been more than 24 hours since we + // last updated and any of the features that use it are enabled. + if ( + Date.now() - themesListUpdatedDate.value.getTime() > 24 * 60 * 60 * 1000 && + Array.from(usesThemesList).some((feature) => + enabledFeatures.value.has(feature), + ) + ) { + const themes = extractThemes(); + if (themes !== undefined) { + themesList.value = themes; + await themesList.save(); + themesListUpdatedDate.value = new Date(); + await themesListUpdatedDate.save(); + log("Updated locally saved themes list."); + } + } + const anonymizeUsernamesEnabled = enabledFeatures.value.has( Feature.AnonymizeUsernames, ); diff --git a/source/storage/enums.ts b/source/storage/enums.ts index 3a30774..b3822bd 100644 --- a/source/storage/enums.ts +++ b/source/storage/enums.ts @@ -39,5 +39,7 @@ export enum Data { MiscellaneousEnabledFeatures = "miscellaneous-enabled-features", OnSiteNewLabel = "on-site-new-label", RandomizeUsernameColors = "randomize-username-colors", + ThemesList = "themes-list", + ThemesListUpdatedDate = "themes-list-updated-date", Version = "data-version", } diff --git a/source/storage/exports.ts b/source/storage/exports.ts index 3e409a9..3cdd655 100644 --- a/source/storage/exports.ts +++ b/source/storage/exports.ts @@ -86,6 +86,32 @@ export const storageValues = { value: false, storage: browser.storage.sync, }), + [Data.ThemesList]: createValue>({ + deserialize: (input) => JSON.parse(input) as Array<[string, string]>, + serialize: (input) => JSON.stringify(input), + key: Data.ThemesList, + value: [ + ["white", "White"], + ["solarized-light", "Solarized Light"], + ["solarized-dark", "Solarized Dark"], + ["dracula", "Dracula"], + ["atom-one-dark", "Atom One Dark"], + ["black", "Black"], + ["zenburn", "Zenburn"], + ["gruvbox-light", "Gruvbox Light"], + ["gruvbox-dark", "Gruvbox Dark"], + ["love-dark", "Love Dark"], + ["love-light", "Love Light"], + ], + storage: browser.storage.local, + }), + [Data.ThemesListUpdatedDate]: createValue({ + deserialize: (input) => new Date(input), + serialize: (input) => input.toISOString(), + key: Data.ThemesListUpdatedDate, + value: new Date("2023-01-01"), + storage: browser.storage.local, + }), [Feature.AnonymizeUsernames]: createValue({ deserialize: (input) => JSON.parse(input) as AnonymizeUsernamesData, serialize: (input) => JSON.stringify(input), diff --git a/source/utilities/exports.ts b/source/utilities/exports.ts index 72bd8a6..a836eb5 100644 --- a/source/utilities/exports.ts +++ b/source/utilities/exports.ts @@ -9,5 +9,6 @@ export * from "./query-selectors.js"; export * from "./report-a-bug.js"; export * from "./sleep.js"; export * from "./text.js"; +export * from "./themes.js"; export * from "./user.js"; export * from "./validators.js"; diff --git a/source/utilities/themes.ts b/source/utilities/themes.ts new file mode 100644 index 0000000..a1df835 --- /dev/null +++ b/source/utilities/themes.ts @@ -0,0 +1,19 @@ +/** + * Try to extract the list of themes from a theme selector on the page. This + * will return undefined when no theme selector is available. The returned array + * will be tuples where the first item is the theme value from the `