Manifest v3

package.json

@@ -18,11 +18,12 @@
 	"devDependencies": {
 		"@intlify/unplugin-vue-i18n": "^5.0.0",
 		"@vitejs/plugin-vue": "^5.0.5",
-		"stylus": "^0.63.0",
+		"stylus": "^0.64.0",
 		"stylus-loader": "^8.1.0",
 		"vite": "^5.4.6"
 	},
 	"browserslist": [
 		"Firefox ESR"
-	]
+	],
+	"type": "module"
 }

public/js/background.js

@@ -1,10 +1,11 @@
 // this script holds all background activity not related to stats building
 
-function main() {
+const main = async () => {
   // add icon to spaces toolbar
-  if (messenger.spacesToolbar) {
-    messenger.spacesToolbar.addButton(
+  if (messenger.spaces) {
+    await messenger.spaces.create(
       'third_stats',
+      '../index.stats.html',
       {
         badgeBackgroundColor: '#e64db9',
         badgeText: '',
@@ -22,10 +23,9 @@ function main() {
           }
         ],
         title: 'ThirdStats',
-        url: '../index.stats.html'
       }
     );
   }
-}
+};
 
 main();

public/manifest.json

@@ -1,41 +1,44 @@
 {
 	"name": "ThirdStats",
 	"version": "1.10.0",
-	"manifest_version": 2,
+	"manifest_version": 3,
 	"description": "__MSG_extensionDescription__",
 	"author": "Andreas Müller",
 	"homepage_url": "https://github.com/devmount/third-stats",
 	"default_locale": "en",
-	"applications": {
+	"browser_specific_settings": {
 		"gecko": {
 			"id": "thirdstats@devmount.de",
-			"strict_min_version": "91.0"
+			"strict_min_version": "128.0"
 		}
 	},
-	"browser_action": {
+	"action": {
 		"default_popup": "index.popup.html",
 		"default_title": "ThirdStats",
-		"default_icon": "./icon.svg"
+		"default_icon": "icon.svg"
 	},
 	"background": {
 		"scripts": [
-			"./js/background.js"
+			"js/background.js"
 		]
 	},
 	"options_ui": {
-		"page": "./index.options.html",
-		"open_in_tab": false,
-		"browser_style": true
+		"page": "index.options.html",
+		"open_in_tab": false
 	},
 	"permissions": [
 		"accountsRead",
 		"messagesRead",
 		"storage",
-		"downloads"
+		"downloads",
+		"messagesTagsList"
 	],
 	"icons": {
-		"64": "./icon.svg",
-		"32": "./icon.svg",
-		"16": "./icon.svg"
+		"64": "icon.svg",
+		"32": "icon.svg",
+		"16": "icon.svg"
+	},
+	"content_security_policy": {
+		"extension_pages": "default-src 'self'"
 	}
 }

src/Popup.vue

@@ -33,20 +33,22 @@
 			<!-- list of all accounts -->
 			<section class="accounts">
 				<div
+					v-for="a in accounts"
+					:key="a.id"
 					class="background-hover-accent2 text-hover-highlight cursor-pointer shadow position-relative"
 					:class="{
 						'background-gray': options.dark,
 						'background-highlight-contrast': !options.dark,
 					}"
-					v-for="a in accounts"
-					:key="a.id"
 					@click.prevent="openTab('index.stats.html', a.id)"
 				>
 					<div class="position-relative z-5">
 						<h4>{{ a.name }}</h4>
 						<div class="text-small text-secondary">
-							{{ t("popup.nFolders", a.folderCount, [a.folderCount]) }}
-							<div v-if="a.hasOwnProperty('messageCount')">{{ t("popup.nMessages", a.messageCount, [a.messageCount]) }}</div>
+							<div>{{ t("popup.nFolders", [a.folderCount], a.folderCount) }}</div>
+							<div v-if="a.hasOwnProperty('messageCount')">
+								{{ t("popup.nMessages", [a.messageCount], a.messageCount) }}
+							</div>
 						</div>
 					</div>
 					<LineChart
@@ -113,7 +115,7 @@ const getAccounts = async () => {
 	// expand account object with additional data
 	await Promise.all(accountList.map(async a => {
 		// calculate folder count and append to account object
-		const folders = traverseAccount(a);
+		const folders = await traverseAccount(a);
 		a.folderCount = folders.length;
 		// get overall message count when cache is enabled
 		if (options.cache) {
@@ -148,10 +150,13 @@ const getAccounts = async () => {
 onMounted(async () => {
 	// start loading indication
 	loading.value = true;
+
 	// get stored options
 	await getOptions();
+
 	// start account processing
 	await getAccounts();
+
 	// stop loading indication
 	loading.value = false;
 });

src/Stats.vue

@@ -1122,7 +1122,7 @@ const getOptions = async () => {
 // retrieve list of tags that can be set on messages
 // their human-friendly name, color, and sort order
 const getTags = async () => {
-	tags.value = await messenger.messages.listTags();
+	tags.value = await messenger.messages.tags.list();
 };
 
 // retrieve accounts and identities list
@@ -1303,7 +1303,7 @@ const analyzeMessage = (data, m, identityList) => {
 // store results in <data> object
 const processMessages = async (data, folder, identityList) => {
 	if (folder) {
-		for await (let m of queryMessages(folder, active.period.start, active.period.end)) {
+		for await (let m of queryMessages(folder.id, active.period.start, active.period.end)) {
 			analyzeMessage(data, m, identityList);
 		}
 	}
@@ -1315,7 +1315,7 @@ const processAccount = async (a) => {
 	// get identities from account, or from preferences if it's a local account
 	const identities = a.type != "none" ? a.identities.map(i => i.email.toLowerCase()) : options.addresses;
 	// get all folders and subfolders from given account or selected folder of active account (filter field)
-	const foldersList = active.folder ? [JSON.parse(JSON.stringify(active.folder))] : traverseAccount(a);
+	const foldersList = active.folder ? [JSON.parse(JSON.stringify(active.folder))] : await traverseAccount(a);
 	// build folder list for filter selection, if not already present
 	if (!folders.value.length) {
 		folders.value = foldersList;
@@ -1402,7 +1402,7 @@ const loadAccount = async (id, refresh, auto=false) => {
 		let accountsData = [];
 		// init progress indicator
 		progress.current = 1;
-		progress.max = activeAccounts.reduce((p,c) => p+traverseAccount(c).length, 0);
+		progress.max = activeAccounts.reduce(async (p,c) => p + (await traverseAccount(c).length), 0);
 		// when auto processing remember displayed account key and disable live counts
 		let displayedAccountKey = null;
 		let liveCountUpDisabled = false;
@@ -1539,7 +1539,7 @@ const loadAccount = async (id, refresh, auto=false) => {
 		// set tab title
 		document.title = "ThirdStats: " + account.name;
 		// (re)calculate list of folders
-		folders.value = traverseAccount(account);
+		folders.value = await traverseAccount(account);
 		// only check storage if no refresh was requested cache is enabled
 		const result = options.cache ? await messenger.storage.local.get("stats-" + id) : null;
 		if (!refresh && result && result["stats-" + id]) {

src/assets/global.styl

@@ -3,12 +3,12 @@ mode = {
 	dark: {
 		accent1:    #e64db9
 		accent2:    #0a84ff
-		back:       #1c1b22
-		back2:      #23222b
+		back:       #18181b
+		back2:      #27272a
 		front:      #f9f9fa
 		gray1:      #8a8a97
 		gray2:      #38383d
-		gray3:      #23222b
+		gray3:      #27272a
 		highlight:  #ffffff
 		secondary1: #cdcdd3
 		secondary2: #000000
@@ -21,12 +21,12 @@ mode = {
 		accent2:    #0a84ff
 		back:       #f9f9fa
 		back2:      #f9f9fa
-		front:      #1c1b22
+		front:      #18181b
 		gray1:      #58585d
 		gray2:      #aaaab7
-		gray3:      #ededf3
+		gray3:      #e2e2e2
 		highlight:  #000000
-		secondary1: #23222b
+		secondary1: #27272a
 		secondary2: #ffffff
 		shade:      #6d6d6f
 		icon:       #607d8b

src/utils.js

@@ -107,14 +107,14 @@ const isSelfMessage = (message, identities) => {
 };
 
 // generator to query messages of given folder
-const queryMessages = async function* (folder, fromDate, toDate) {
+const queryMessages = async function* (folderId, fromDate, toDate) {
 	// handle date filter
 	const dateFilterActive = fromDate && toDate;
 	const from = new Date(fromDate);
 	const to = new Date(toDate);
 	try {
 		// paginate messages
-		let page = await messenger.messages.list(folder);
+		let page = await messenger.messages.list(folderId);
 		for (let message of page.messages) {
 			const messagesOutsideDateFilter = message.date < from || message.date > to;
 			if (!(dateFilterActive && messagesOutsideDateFilter)) {
@@ -137,18 +137,22 @@ const queryMessages = async function* (folder, fromDate, toDate) {
 };
 
 // flatten folder hierarchie of given account
-const traverseAccount = (account) => {
-	let arrayOfFolders = [];
-	// recursive function to traverse all subfolders
+const traverseAccount = async (account) => {
+	const foldersList = [];
+	// Recursive function to traverse all subfolders
 	function traverse(folders) {
-		if (!folders) return;
-		for (let f of folders) {
-			arrayOfFolders.push(f);
+		if (!folders?.length) return;
+		folders.forEach(f => {
+			if (!f.isRoot) foldersList.push(f);
 			traverse(f.subFolders);
-		}
+		});
 	}
-	traverse(account.folders);
-	return arrayOfFolders;
+
+	// Start with root
+	const rootFolder = await messenger.folders.get(account.rootFolder.id, true);
+	traverse([rootFolder]);
+
+	return foldersList;
 };
 
 // extract an email address from a given string