Re-sort the list when it loses focus (#162)

Author: fregante

package-lock.json

@@ -15,8 +15,7 @@
 	},
 	"dependencies": {
 		"webext-base-css": "^1.4.4",
-		"webext-options-sync": "^4.2.4",
-		"webext-polyfill-kinda": "^1.0.2"
+		"webext-options-sync": "^4.2.4"
 	},
 	"devDependencies": {
 		"@antfu/eslint-config": "^3.7.1",

package.json

@@ -1,15 +1,14 @@
 <script>
 	import {onMount} from 'svelte';
-	import chromeP from 'webext-polyfill-kinda';
 	import Extension from './extension.svelte';
 	import {focusNext, focusPrevious} from './lib/focus-next.js';
+	import prepareExtensionList from './lib/prepare-extension-list.js';
 	import UndoStack from './lib/undo-stack.js';
 	import optionsStorage from './options-storage.js';
 
 	const getI18N = chrome.i18n.getMessage;
 	const undoStack = new UndoStack(window);
 
-	const myid = getI18N('@@extension_id');
 	let extensions = [];
 	let searchValue = '';
 
@@ -41,12 +40,6 @@
 		extensions = extensions;
 	}
 
-	function fillInTheBlanks(extension) {
-		extension.shown = true;
-		extension.indexedName = extension.name.toLowerCase();
-		return extension;
-	}
-
 	function hideInfoMessage() {
 		localStorage.setItem('undo-info-message', 1);
 		showInfoMessage = false;
@@ -88,39 +81,50 @@
 		});
 	}
 
+	function handleUninstalled(deleted) {
+		extensions = extensions.filter(({id}) => id !== deleted);
+	}
+
+	async function handleInstalled(installed) {
+		if (installed.type === 'extension') {
+			extensions = prepareExtensionList(await chrome.management.getAll());
+		}
+	}
+
+	function handleEnabled(updated) {
+		const extension = extensions.find(({id}) => id === updated.id);
+		extension.enabled = true;
+		extensions = extensions;
+	}
+
+	function handleDisabled(updated) {
+		const extension = extensions.find(({id}) => id === updated.id);
+		extension.enabled = false;
+		extensions = extensions;
+	}
+
+	async function prepare() {
+		extensions = prepareExtensionList(await chrome.management.getAll());
+	}
+
 	onMount(async () => {
-		const allExtensions = await chromeP.management.getAll();
-		extensions = allExtensions
-			.filter(({type, id}) => type === 'extension' && id !== myid)
-			.sort((a, b) => {
-				if (a.enabled === b.enabled) {
-					return a.name.localeCompare(b.name); // Sort by name
-				}
-
-				return a.enabled < b.enabled ? 1 : -1; // Sort by state
-			})
-			.map(extension => fillInTheBlanks(extension));
-
-		// Update list on global events
-		chrome.management.onUninstalled.addListener(deleted => {
-			extensions = extensions.filter(({id}) => id !== deleted);
-		});
-		chrome.management.onInstalled.addListener(installed => {
-			if (installed.type === 'extension') {
-				// Place new extension at the top
-				extensions = [fillInTheBlanks(installed), ...extensions];
-			}
-		});
-		chrome.management.onEnabled.addListener(updated => {
-			const extension = extensions.find(({id}) => id === updated.id);
-			extension.enabled = true;
-			extensions = extensions;
-		});
-		chrome.management.onDisabled.addListener(updated => {
-			const extension = extensions.find(({id}) => id === updated.id);
-			extension.enabled = false;
-			extensions = extensions;
-		});
+		await prepare();
+
+		// Add listeners
+		chrome.management.onUninstalled.addListener(handleUninstalled);
+		chrome.management.onInstalled.addListener(handleInstalled);
+		chrome.management.onEnabled.addListener(handleEnabled);
+		chrome.management.onDisabled.addListener(handleDisabled);
+		window.addEventListener('blur', prepare);
+
+		// Cleanup function
+		return () => {
+			chrome.management.onUninstalled.removeListener(handleUninstalled);
+			chrome.management.onInstalled.removeListener(handleInstalled);
+			chrome.management.onEnabled.removeListener(handleEnabled);
+			chrome.management.onDisabled.removeListener(handleDisabled);
+			window.removeEventListener('blur', prepare);
+		};
 	});
 
 	// Toggle extra buttons on right click on the name

source/app.svelte

@@ -0,0 +1,18 @@
+function fillInTheBlanks(extension) {
+	extension.shown = true;
+	extension.indexedName = extension.name.toLowerCase();
+	return extension;
+}
+
+export default function prepareExtensionList(extensions) {
+	return extensions
+		.filter(({type, id}) => type === 'extension' && id !== chrome.runtime.id)
+		.sort((a, b) => {
+			if (a.enabled === b.enabled) {
+				return a.name.localeCompare(b.name); // Sort by name
+			}
+
+			return a.enabled < b.enabled ? 1 : -1; // Sort by state
+		})
+		.map(extension => fillInTheBlanks(extension));
+}