rename observe to effectively add or remove the listener

scripts/GUI/builder/windowman.js

@@ -3,7 +3,7 @@ Window and window content management */
 
 import texts from "/scripts/mapping/read.js";
 import Tabs from "/scripts/GUI/tabs.js";
-import {global, observe} from "/scripts/secretariat.js";
+import {global, background} from "/scripts/secretariat.js";
 import {URLs} from "/scripts/utils/URLs.js";
 import wait from "/scripts/utils/wait.js";
 import UI from "/scripts/GUI/builder/windowman.extras.js";
@@ -75,7 +75,7 @@ export default class windowman {
 		this[`headers`] = headers(((this[`options`] && (typeof this[`options`]).includes(`obj`)) ? this[`options`][`headers`] : false) ? this[`options`][`headers`] : null);
 		
 		if (((this[`options`] && (typeof this[`options`]).includes(`obj`)) ? Object.hasOwn(this[`options`], `automatic`) : false) ? this[`options`][`automatic`] : true) {
-		this.design();
+			this.design();
 		};
 	}
 
@@ -348,6 +348,7 @@ export default class windowman {
 	/* Run this function if you would like to synchronize with data. */
 	async sync() {
 		// Prepare flags. 
+		this[`storage`] = {}
 		this[`state`] = {};
 		this[`state`][`read/write`] = 0;
 
@@ -522,11 +523,11 @@ export default class windowman {
 		
 		fill();
 		write();
-		extras();
 		
 		// Update the input elements.
-		observe((what) => {
-			fill();
+		this[`storage`][`background`] = () => {fill();}
+		new background((DATA) => {
+			this[`storage`][`background`]();
 		});
 	}
 }

scripts/GUI/entrypoints/iconindicator.js

@@ -1,7 +1,7 @@
 import BrowserIcon from '/scripts/GUI/browsericon.js';
 import Tabs from '/scripts/GUI/tabs.js';
 import texts from "/scripts/mapping/read.js";
-import {global, observe} from "/scripts/secretariat.js";
+import {global, background} from "/scripts/secretariat.js";
 import {URLs} from "/scripts/utils/URLs.js";
 
 const CONFIG = chrome.runtime.getURL("styles/colors/icon.json");
@@ -63,7 +63,7 @@ class IconIndicator {
 						}, {"tabId": TAB.id});
 		
 					showDetails(LOCATION, TAB.id);
-					observe((changes) => {
+					new background((changes) => {
 						showDetails(LOCATION, TAB.id);
 					});
 				})

scripts/background/fc.js

@@ -2,7 +2,7 @@
 This script provides installation run scripts.
 */
 
-import { template, global, observe } from "../secretariat.js";
+import { template, global, background} from "../secretariat.js";
 import filters from "../filters.js";
 import pointer from "../data/pointer.js";
 let config = chrome.runtime.getURL("config/config.json");
@@ -96,7 +96,6 @@ export default class fc {
 				let UPDATER = updater_set();
 
 				let updater_interval = async () => {
-					
 					if ((await global.read([`settings`, `sync`, `duration`])) ? (await global.read([`settings`, `sync`, `duration`] * (60 ** 2) * 1000 != DURATION_PREFERENCES[`duration`])) : false) {
 						DURATION_PREFERENCES[`duration`] = await global.global.read([`settings`, `sync`, `duration`]) * (60 ** 2) * 1000;
 
@@ -106,7 +105,7 @@ export default class fc {
 					}
 				};
 
-				observe(updater_cancel);
+				new background(updater_cancel);
 			};
 		})
 

scripts/external/processor.js

@@ -4,7 +4,7 @@ Process the information on the website and display it on screen.
 
 import scraper from "/scripts/external/scraper.js";
 import product from "/scripts/data/product.js";
-import {global, observe} from "/scripts/secretariat.js";
+import {global, background} from "/scripts/secretariat.js";
 import logging from "/scripts/logging.js";
 import texts from "/scripts/mapping/read.js";
 import {URLs} from "/scripts/utils/URLs.js";
@@ -92,17 +92,16 @@ export default class processor {
 		const wait = async () => {
 			let RUN = false;
 			if (await global.read([`settings`,`analysis`,`api`,`key`])) {
-				console.log(`run`);
 				await main();
 				RUN = true;
 			} else {
-				new logging(texts.localized(`AIkey_message_waiting_title`), texts.localized(`AIkey_message_waiting_body`))
-				observe(async () => {
+				new logging(texts.localized(`AIkey_message_waiting_title`), texts.localized(`AIkey_message_waiting_body`));
+				new background(async () => {
 					if ((!RUN) ? (await global.read([`settings`,`analysis`,`api`,`key`])) : false) {
 						await main();
 						RUN = true;
 					}
-				})
+				});
 			}
 		}
 

scripts/pages/error.js

@@ -5,7 +5,7 @@ Display the error screen details.
 import Page from "/scripts/pages/page.js";
 import Tabs from "/scripts/GUI/tabs.js";
 
-import {global, observe} from "/scripts/secretariat.js";
+import {global, background} from "/scripts/secretariat.js";
 import pointer from "/scripts/data/pointer.js";
 import texts from "/scripts/mapping/read.js";
 
@@ -23,7 +23,7 @@ class Page_Error extends Page {
 
 	async background() {
 		// Wait until a change in the session storage.
-		observe(async (changes) => {
+		new background(async (changes) => {
 			await this.update();
 			this.fill();
 		});

scripts/pages/popup.js

@@ -3,7 +3,7 @@
 */
 
 // Import modules.
-import {global, observe} from "/scripts/secretariat.js";
+import {global, background} from "/scripts/secretariat.js";
 import Window from "/scripts/GUI/window.js";
 import Page from "/scripts/pages/page.js";
 import Loader from "/scripts/GUI/loader.js";
@@ -20,7 +20,7 @@ class Page_Popup extends Page {
 
 	async background() {
 		// Wait until a change in the session storage.
-		observe((changes) => {
+		new background((changes) => {
 			this.update();
 			this.switch();
 		});

scripts/pages/results.js

@@ -4,7 +4,7 @@ Results.js
 Fills the page with the results of the analysis.
 */
 
-import {global, observe} from "/scripts/secretariat.js";
+import {global, background} from "/scripts/secretariat.js";
 import Page from "/scripts/pages/page.js";
 import nested from "../utils/nested.js";
 
@@ -18,7 +18,7 @@ class Page_Results extends Page {
 
      async background() {
 		// Wait until a change in the session storage.
-		observe((changes) => {
+		new background((changes) => {
                this.update();
 			this.content();
 			// First, update site data but retain the URL. 

scripts/secretariat.js

@@ -505,14 +505,52 @@ class managed {
 }
 
 /*
-Run a script when the browser storage has been changed.
-
-@param {object} reaction the function to run
+Background data execution
 */
-export function observe(reaction) {
-	chrome.storage.onChanged.addListener((changes, namespace) => {
-		reaction(changes, namespace);
-	});
+class background {
+	/*
+	Add or prepare a listener. 
+
+	@param {function} callback the function to run
+	@param {object} options the options
+	*/
+	constructor (callback, options) {
+		// Set the listener. 
+		this.callback = callback;
+
+		// Run the listener if necessary.
+		((options ? Object.hasOwn(options, `run`) : false) ? options[`run`] : true) ? this.run() : false;
+	};
+
+	/*
+	Set the listener. 
+	*/
+	run () {
+		return(chrome.storage.onChanged.addListener((changes, namespace) => {
+			this.callback({"changes": changes, "namespace": namespace});
+		}));
+	};
+
+	/*
+	Cancel the listener. 
+	*/
+	cancel () {
+		// Cancel the listener. 
+		return(chrome.storage.onChanged.removeListener((changes, namespace) => {
+			this.callback({"changes": changes, "namespace": namespace});
+		}))
+	};
 }
 
-export {global, session, template, managed};
+/*
+Run a script when the browser storage has been changed.
+
+@param {function} callback the function to run
+*/
+export function observe(callback) {
+	return(chrome.storage.onChanged.addListener((changes, namespace) => {
+		callback({"changes": changes, "namespace": namespace});
+	}));
+}
+
+export {global, session, template, managed, background};