Pin extention - fixes #175 Sticky extensions (#185)

hankxdev · web-flow · commit 1f875cb47c74 · 2025-10-18T13:14:20.000+08:00
add pin feature
diff --git a/source/_locales/de/messages.json b/source/_locales/de/messages.json
@@ -31,5 +31,11 @@
 	},
 	"uninstall": {
 		"message": "Erweiterung entfernen…"
+	},
+	"pinText": {
+		"message": "An oberer Position anheften"
+	},
+	"unpinText": {
+		"message": "Von oberer Position lösen"
 	}
 }
diff --git a/source/_locales/en/messages.json b/source/_locales/en/messages.json
@@ -31,5 +31,11 @@
 	},
 	"uninstall": {
 		"message": "Remove from Chrome"
+	},
+	"pinText": {
+		"message": "Pin to top"
+	},
+	"unpinText": {
+		"message": "Unpin from top"
 	}
 }
diff --git a/source/_locales/es/messages.json b/source/_locales/es/messages.json
@@ -31,5 +31,11 @@
 	},
 	"uninstall": {
 		"message": "Eliminar"
+	},
+	"pinText": {
+		"message": "Fijar arriba"
+	},
+	"unpinText": {
+		"message": "Desfijar de arriba"
 	}
 }
diff --git a/source/_locales/fr/messages.json b/source/_locales/fr/messages.json
@@ -42,5 +42,11 @@
 	"uninstall": {
 		"message": "Désinstaller",
 		"hash": "6c51642469a9fec1b394358b0a2ada5b"
+	},
+	"pinText": {
+		"message": "Épingler en haut"
+	},
+	"unpinText": {
+		"message": "Désépingler du haut"
 	}
 }
diff --git a/source/_locales/he/messages.json b/source/_locales/he/messages.json
@@ -31,5 +31,11 @@
 	},
 	"uninstall": {
 		"message": "להסיר את התוסף"
+	},
+	"pinText": {
+		"message": "להצמיד למעלה"
+	},
+	"unpinText": {
+		"message": "לבטל הצמדה מלמעלה"
 	}
 }
diff --git a/source/_locales/it/messages.json b/source/_locales/it/messages.json
@@ -42,5 +42,11 @@
 	"uninstall": {
 		"message": "Rimuovi",
 		"hash": "6c51642469a9fec1b394358b0a2ada5b"
+	},
+	"pinText": {
+		"message": "Fissa in alto"
+	},
+	"unpinText": {
+		"message": "Rimuovi dalla parte superiore"
 	}
 }
diff --git a/source/_locales/ja/messages.json b/source/_locales/ja/messages.json
@@ -19,5 +19,11 @@
 	},
 	"uninstall": {
 		"message": "この拡張機能をアンインストールする"
+	},
+	"pinText": {
+		"message": "上部に固定"
+	},
+	"unpinText": {
+		"message": "上部から固定解除"
 	}
 }
diff --git a/source/_locales/ko/messages.json b/source/_locales/ko/messages.json
@@ -19,5 +19,11 @@
 	},
 	"uninstall": {
 		"message": "이 확장 기능을 제거하십시오"
+	},
+	"pinText": {
+		"message": "상단에 고정"
+	},
+	"unpinText": {
+		"message": "상단에서 고정 해제"
 	}
 }
diff --git a/source/_locales/lv/messages.json b/source/_locales/lv/messages.json
@@ -43,6 +43,12 @@
 		"message": "Noņemt šo paplašinājumu",
 		"hash": "a04a561e0b5c8b0210a17382781cabd1"
 	},
+	"pinText": {
+		"message": "Piespraust augšā"
+	},
+	"unpinText": {
+		"message": "Atspraust no augšas"
+	},
 
 	"__WET_LOCALE__": {"message": "lv"}
 }
diff --git a/source/_locales/nl/messages.json b/source/_locales/nl/messages.json
@@ -43,6 +43,12 @@
 		"message": "Verwijderen uit Chrome",
 		"hash": "a04a561e0b5c8b0210a17382781cabd1"
 	},
+	"pinText": {
+		"message": "Vastmaken aan bovenkant"
+	},
+	"unpinText": {
+		"message": "Losmaken van bovenkant"
+	},
 
 	"__WET_LOCALE__": {"message": "nl"}
 }
diff --git a/source/_locales/pl/messages.json b/source/_locales/pl/messages.json
@@ -43,6 +43,12 @@
 		"message": "Usuń z Chrome",
 		"hash": "a04a561e0b5c8b0210a17382781cabd1"
 	},
+	"pinText": {
+		"message": "Przypnij na górze"
+	},
+	"unpinText": {
+		"message": "Odepnij od góry"
+	},
 
 	"__WET_LOCALE__": {"message": "pl"}
 }
diff --git a/source/_locales/ru/messages.json b/source/_locales/ru/messages.json
@@ -19,5 +19,11 @@
 	},
 	"uninstall": {
 		"message": "Удалить это расширение"
+	},
+	"pinText": {
+		"message": "Закрепить сверху"
+	},
+	"unpinText": {
+		"message": "Открепить сверху"
 	}
 }
diff --git a/source/_locales/tr/messages.json b/source/_locales/tr/messages.json
@@ -42,5 +42,11 @@
 	"uninstall": {
 		"message": "Kaldır",
 		"hash": "6c51642469a9fec1b394358b0a2ada5b"
+	},
+	"pinText": {
+		"message": "Üste sabitle"
+	},
+	"unpinText": {
+		"message": "Üstten çıkar"
 	}
 }
diff --git a/source/_locales/zh_CN/messages.json b/source/_locales/zh_CN/messages.json
@@ -31,5 +31,11 @@
 	},
 	"openUrl": {
 		"message": "打开此扩展的主页或应用商店链接"
+	},
+	"pinText": {
+		"message": "置顶"
+	},
+	"unpinText": {
+		"message": "取消置顶"
 	}
 }
diff --git a/source/_locales/zh_TW/messages.json b/source/_locales/zh_TW/messages.json
@@ -42,5 +42,11 @@
 	"uninstall": {
 		"message": "卸載這個擴展",
 		"hash": "6c51642469a9fec1b394358b0a2ada5b"
+	},
+	"pinText": {
+		"message": "釘選到頂部"
+	},
+	"unpinText": {
+		"message": "從頂部取消釘選"
 	}
 }
diff --git a/source/app.svelte b/source/app.svelte
@@ -4,13 +4,17 @@
 	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';
+	import optionsStorage, {
+		getPinnedExtensions,
+		togglePin,
+	} from './options-storage.js';
 
 	const getI18N = chrome.i18n.getMessage;
 	const undoStack = new UndoStack(window);
 
 	let extensions = [];
 	let searchValue = '';
+	let pinnedExtensions = [];
 
 	const options = optionsStorage.getAll();
 	let showExtras = false;
@@ -87,7 +91,11 @@
 
 	async function handleInstalled(installed) {
 		if (installed.type === 'extension') {
-			extensions = prepareExtensionList(await chrome.management.getAll());
+			pinnedExtensions = await getPinnedExtensions();
+			extensions = prepareExtensionList(
+				await chrome.management.getAll(),
+				pinnedExtensions,
+			);
 		}
 	}
 
@@ -104,7 +112,17 @@
 	}
 
 	async function prepare() {
-		extensions = prepareExtensionList(await chrome.management.getAll());
+		pinnedExtensions = await getPinnedExtensions();
+		extensions = prepareExtensionList(
+			await chrome.management.getAll(),
+			pinnedExtensions,
+		);
+	}
+
+	async function handlePin(extensionId) {
+		const wasPinned = await togglePin(extensionId);
+		await prepare(); // Refresh the list to show new order
+		return wasPinned;
 	}
 
 	onMount(async () => {
@@ -202,6 +220,7 @@
 					bind:enabled={extension.enabled}
 					bind:showExtras
 					on:contextmenu|once={onContextMenu}
+					on:pin={() => handlePin(extension.id)}
 					{undoStack}
 				/>
 			{/if}
diff --git a/source/extension.svelte b/source/extension.svelte
@@ -3,9 +3,10 @@
 	// eslint-disable-next-line no-unused-expressions
 	$$restProps;
 
+	import {createEventDispatcher} from 'svelte';
+	import pickBestIcon from './lib/icons.js';
 	import openInTab from './lib/open-in-tab.js';
 	import trimName from './lib/trim-name.js';
-	import pickBestIcon from './libs/icons.js';
 
 	export let id;
 	export let name;
@@ -18,6 +19,7 @@
 	export let icons = undefined; // eslint-disable-line no-undef-init -- Optional svelte property
 	export let showExtras;
 	export let undoStack;
+	export let isPinned = false;
 
 	const getI18N = chrome.i18n.getMessage;
 	const chromeWebStoreUrl = `https://chrome.google.com/webstore/detail/${id}`;
@@ -36,7 +38,15 @@
 			: chromeWebStoreUrl;
 	}
 
-	function toggleExtension() {
+	const dispatch = createEventDispatcher();
+
+	function toggleExtension(event) {
+		// Check if Ctrl/Cmd is held down for pinning
+		if (event.ctrlKey || event.metaKey) {
+			dispatch('pin');
+			return;
+		}
+
 		const wasEnabled = enabled;
 
 		undoStack.do(toggle => {
@@ -49,12 +59,19 @@
 	}
 </script>
 
-<li class:disabled={!enabled} class="ext type-{installType}">
+<li
+	class:disabled={!enabled}
+	class:pinned={isPinned}
+	class="ext type-{installType}"
+>
 	<button
 		type="button"
 		class="ext-name"
 		on:click={toggleExtension}
 		on:contextmenu
+		title={isPinned
+			? `${getI18N('unpinText') || 'Unpin'} (Ctrl/Cmd+Click)`
+			: `${getI18N('pinText') || 'Pin'} (Ctrl/Cmd+Click)`}
 	>
 		<img alt="" src={pickBestIcon(icons, 16)} />{realName}
 	</button>
diff --git a/source/lib/icons.js b/source/lib/icons.js
diff --git a/source/lib/icons.test.js b/source/lib/icons.test.js
diff --git a/source/lib/prepare-extension-list.js b/source/lib/prepare-extension-list.js
@@ -1,18 +1,33 @@
-function fillInTheBlanks(extension) {
+function fillInTheBlanks(extension, isPinned = false) {
 	extension.shown = true;
 	extension.indexedName = extension.name.toLowerCase();
+	extension.isPinned = isPinned;
 	return extension;
 }
 
-export default function prepareExtensionList(extensions) {
+export default function prepareExtensionList(
+	extensions,
+	pinnedExtensions = [],
+) {
 	return extensions
 		.filter(({type, id}) => type === 'extension' && id !== chrome.runtime.id)
 		.sort((a, b) => {
+			const aPinned = pinnedExtensions.includes(a.id);
+			const bPinned = pinnedExtensions.includes(b.id);
+
+			// First sort by pinned status
+			if (aPinned !== bPinned) {
+				return bPinned ? 1 : -1; // Pinned extensions come first
+			}
+
+			// If both are pinned or both are not pinned, sort by enabled status
 			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));
+		.map(extension =>
+			fillInTheBlanks(extension, pinnedExtensions.includes(extension.id)),
+		);
 }
diff --git a/source/options-storage.js b/source/options-storage.js
@@ -5,6 +5,7 @@ const optionsStorage = new OptionsSync({
 		position: 'popup',
 		showButtons: 'on-demand', // Or 'always'
 		width: '',
+		pinnedExtensions: [], // Array of pinned extension IDs
 	},
 	migrations: [
 		options => {
@@ -19,11 +20,45 @@ const optionsStorage = new OptionsSync({
 
 			options.width = Number.isNaN(width) ? '' : width;
 		},
+		// Migration to add pinnedExtensions if it doesn't exist
+		options => {
+			if (!options.pinnedExtensions) {
+				options.pinnedExtensions = [];
+			}
+		},
 	],
 });
 
 export default optionsStorage;
 
+// Helper functions for managing pinned extensions
+export async function togglePin(extensionId) {
+	const options = await optionsStorage.getAll();
+	const pinnedExtensions = [...options.pinnedExtensions];
+	const index = pinnedExtensions.indexOf(extensionId);
+
+	if (index > -1) {
+		// Unpin
+		pinnedExtensions.splice(index, 1);
+	} else {
+		// Pin
+		pinnedExtensions.push(extensionId);
+	}
+
+	await optionsStorage.set({pinnedExtensions});
+	return index === -1; // Return true if pinned, false if unpinned
+}
+
+export async function isPinned(extensionId) {
+	const options = await optionsStorage.getAll();
+	return options.pinnedExtensions.includes(extensionId);
+}
+
+export async function getPinnedExtensions() {
+	const options = await optionsStorage.getAll();
+	return options.pinnedExtensions;
+}
+
 const defaultPopup = chrome.runtime.getManifest().action.default_popup;
 
 export async function matchOptions() {
diff --git a/source/style.css b/source/style.css

Original file line number	Diff line number	Diff line change
`@@ -31,5 +31,11 @@`
`31`	`31`	`},`
`32`	`32`	`"uninstall": {`
`33`	`33`	`"message": "Erweiterung entfernen…"`
	`34`	`+ },`
	`35`	`+ "pinText": {`
	`36`	`+ "message": "An oberer Position anheften"`
	`37`	`+ },`
	`38`	`+ "unpinText": {`
	`39`	`+ "message": "Von oberer Position lösen"`
`34`	`40`	`}`
`35`	`41`	`}`
Original file line number	Diff line number	Diff line change
`@@ -42,5 +42,11 @@`
`42`	`42`	`"uninstall": {`
`43`	`43`	`"message": "Désinstaller",`
`44`	`44`	`"hash": "6c51642469a9fec1b394358b0a2ada5b"`
	`45`	`+ },`
	`46`	`+ "pinText": {`
	`47`	`+ "message": "Épingler en haut"`
	`48`	`+ },`
	`49`	`+ "unpinText": {`
	`50`	`+ "message": "Désépingler du haut"`
`45`	`51`	`}`
`46`	`52`	`}`
Original file line number	Diff line number	Diff line change
`@@ -19,5 +19,11 @@`
`19`	`19`	`},`
`20`	`20`	`"uninstall": {`
`21`	`21`	`"message": "この拡張機能をアンインストールする"`
	`22`	`+ },`
	`23`	`+ "pinText": {`
	`24`	`+ "message": "上部に固定"`
	`25`	`+ },`
	`26`	`+ "unpinText": {`
	`27`	`+ "message": "上部から固定解除"`
`22`	`28`	`}`
`23`	`29`	`}`