feat: add basic sort

manifest.json

@@ -9,10 +9,17 @@
 		"48": "images/icon-48.png",
 		"128": "images/icon-128.png"
 	},
+	"action": {
+		"default_title": "Sort items by score"
+	},
 	"content_scripts": [
 		{
-			"js": ["index.js"],
+			"js": ["main.js"],
 			"matches": ["https://www.vinmonopolet.no/*"]
 		}
-	]
+	],
+	"permissions": ["activeTab", "scripting"],
+	"background": {
+		"service_worker": "background.js"
+	}
 }

rollup.config.ts

@@ -3,7 +3,7 @@ import type { RollupOptions } from 'rollup'
 import copy from 'rollup-plugin-copy'
 
 const config: RollupOptions = {
-	input: 'src/index.ts',
+	input: ['src/main.ts', 'src/background.ts', 'src/sort.ts'],
 	output: {
 		sourcemap: true,
 		dir: 'dist',

src/background.ts

@@ -0,0 +1,10 @@
+chrome.action.onClicked.addListener(tab => {
+	if (tab.id) {
+		chrome.scripting.executeScript({
+			target: { tabId: tab.id },
+			files: ['sort.js']
+		})
+	} else {
+		console.error(`No tab id for tab window ${tab.windowId}`, tab)
+	}
+})

src/index.ts → src/main.ts

@@ -27,6 +27,7 @@ function updateRatingElement(product: Product) {
 }
 
 const wines = new Map<string, Product>()
+window.wines = wines
 
 async function onProductListChange() {
 	const items: HTMLElement[] = Array.from(document.querySelectorAll('.product-item'))

src/sort.ts

@@ -0,0 +1,17 @@
+function sortElements() {
+	// wines may already be defined in the global scope / context due how chrome extensions work
+	const wineList = Array.from(wines?.values() ?? window.wines?.values() ?? []).sort(
+		(a, b) => (b.stats?.score ?? 0) - (a.stats?.score ?? 0)
+	)
+
+	const listElement = document.querySelector('.product-list')
+
+	if (listElement) {
+		for (const wine of wineList) {
+			if (wine.element) {
+				listElement.appendChild(wine.element)
+			}
+		}
+	}
+}
+sortElements()

src/types/globals.d.ts

@@ -0,0 +1,8 @@
+import type { Product } from './products'
+
+declare global {
+	const wines: Map<string, Product> | undefined
+	export interface Window {
+		wines?: Map<string, Product> | undefined
+	}
+}