First draft version with Svelte for popup and additional build steps

src/lib/extension/EntitiesController.js

@@ -0,0 +1,93 @@
+import StorageHelper from "$lib/chrome/StorageHelper.js";
+
+export default class EntitiesController {
+  static #storageHelper = new StorageHelper(chrome.storage.local);
+
+  /**
+   * Read all entities of the given type from the storage. Build the entities from the raw data and return them.
+   *
+   * @template EntityClass
+   *
+   * @param {string} entityName Name of the entity to read.
+   * @param {EntityClass} entityClass Class of the entity to read. Must have a constructor that accepts the ID and the
+   * settings object.
+   *
+   * @return {Promise<InstanceType<EntityClass>[]>} List of entities of the given type.
+   */
+  static async readAllEntities(entityName, entityClass) {
+    const rawEntities = await this.#storageHelper.read(entityName, {});
+
+    if (!rawEntities || Object.keys(rawEntities).length === 0) {
+      return [];
+    }
+
+    return Object
+      .entries(rawEntities)
+      .map(([id, settings]) => new entityClass(id, settings));
+  }
+
+  /**
+   * Update the single entity in the storage. If the entity with the given ID already exists, it will be overwritten.
+   *
+   * @param {string} entityName Name of the entity to update.
+   * @param {StorageEntity} entity Entity to update.
+   *
+   * @return {Promise<void>}
+   */
+  static async updateEntity(entityName, entity) {
+    await this.#storageHelper.write(
+      entityName,
+      Object.assign(
+        await this.#storageHelper.read(
+          entityName, {}
+        ),
+        {
+          [entity.id]: entity.settings
+        }
+      )
+    );
+  }
+
+  /**
+   * Delete the entity with the given ID.
+   *
+   * @param {string} entityName Name of the entity to delete.
+   * @param {string} entityId ID of the entity to delete.
+   *
+   * @return {Promise<void>}
+   */
+  static async deleteEntity(entityName, entityId) {
+    const entities = await this.#storageHelper.read(entityName, {});
+    delete entities[entityId];
+    await this.#storageHelper.write(entityName, entities);
+  }
+
+  /**
+   * Subscribe to all changes made to the storage.
+   *
+   * @template EntityClass
+   *
+   * @param {string} entityName Name of the entity to subscribe to.
+   * @param {EntityClass} entityClass Class of the entity to subscribe to.
+   * @param {function(InstanceType<EntityClass>[]): any} callback Callback to call when the storage changes.
+   * @return {function(): void} Unsubscribe function.
+   */
+  static subscribeToEntity(entityName, entityClass, callback) {
+    /**
+     * Watch the changes made to the storage and call the callback when the entity changes.
+     * @param {Object<string, StorageChange>} changes Changes made to the storage.
+     */
+    const storageChangesSubscriber = changes => {
+      if (!changes[entityName]) {
+        return;
+      }
+
+      this.readAllEntities(entityName, entityClass)
+        .then(callback);
+    }
+
+    this.#storageHelper.subscribe(storageChangesSubscriber);
+
+    return () => this.#storageHelper.unsubscribe(storageChangesSubscriber);
+  }
+}

src/lib/extension/base/StorageEntity.js

@@ -0,0 +1,56 @@
+import EntitiesController from "$lib/extension/EntitiesController.js";
+
+class StorageEntity {
+  /**
+   * @type {string}
+   */
+  #id;
+
+  /**
+   * @type {Object}
+   */
+  #settings;
+
+  /**
+   * @param {string} id
+   * @param {Object} settings
+   */
+  constructor(id, settings = {}) {
+    this.#id = id;
+    this.#settings = settings;
+  }
+
+  /**
+   * @return {string}
+   */
+  get id() {
+    return this.#id;
+  }
+
+  /**
+   * @return {Object}
+   */
+  get settings() {
+    return this.#settings;
+  }
+
+  static _entityName = "entity";
+
+  async save() {
+    await EntitiesController.updateEntity(this.constructor._entityName, this);
+  }
+
+  async delete() {
+    await EntitiesController.deleteEntity(this.constructor._entityName, this.id);
+  }
+
+  /**
+   * Static function to read all entities of this type from the storage. Must be implemented in the child class.
+   * @return {Promise<array>}
+   */
+  static async readAll() {
+    throw new Error("Not implemented");
+  }
+}
+
+export default StorageEntity;

src/lib/extension/entities/MaintenanceProfile.js

@@ -0,0 +1,63 @@
+import StorageEntity from "$lib/extension/base/StorageEntity.js";
+import EntitiesController from "$lib/extension/EntitiesController.js";
+
+/**
+ * @typedef {Object} MaintenanceProfileSettings
+ * @property {string} name
+ * @property {string[]} tags
+ */
+
+/**
+ * Class representing the maintenance profile entity.
+ */
+class MaintenanceProfile extends StorageEntity {
+  /**
+   * @param {string} id ID of the entity.
+   * @param {Partial<MaintenanceProfileSettings>} settings Maintenance profile settings object.
+   */
+  constructor(id, settings) {
+    super(id, {
+      name: settings.name || '',
+      tags: settings.tags || []
+    });
+  }
+
+  /**
+   * @return {MaintenanceProfileSettings}
+   */
+  get settings() {
+    return super.settings;
+  }
+
+  static _entityName = "profiles";
+
+  /**
+   * Read all maintenance profiles from the storage.
+   *
+   * @return {Promise<InstanceType<MaintenanceProfile>[]>}
+   */
+  static async readAll() {
+    return await EntitiesController.readAllEntities(
+      this._entityName,
+      MaintenanceProfile
+    );
+  }
+
+  /**
+   * Subscribe to the changes and receive the new list of profiles when they change.
+   *
+   * @param {function(MaintenanceProfile[]): void} callback Callback to call when the profiles change. The new list of
+   * profiles is passed as an argument.
+   *
+   * @return {function(): void} Unsubscribe function.
+   */
+  static subscribe(callback) {
+    return EntitiesController.subscribeToEntity(
+      this._entityName,
+      MaintenanceProfile,
+      callback
+    );
+  }
+}
+
+export default MaintenanceProfile;