refactor: Remove unused code and improve manifest for mv3 and mv2

- Also add --fontFamilyDefault as a fallback if the --fontFamily fails

Author: itsmartashub

components/CustomizationSettings.vue

@@ -73,7 +73,7 @@ onBeforeUnmount(() => {
 	border: 1px solid hsla(var(--accent-hsl) / 0.18);
 	box-shadow: var(--shadow-values) var(--shadow-color);
 	overflow: clip scroll;
-	font-family: var(--fontFamily);
+	font-family: var(--fontFamily), var(--fontFamilyDefault);
 	font-size: 1.2rem;
 	z-index: 5;
 
@@ -109,7 +109,7 @@ onBeforeUnmount(() => {
 			flex-wrap: wrap;
 			padding: calc(var(--p-btn) * 0.65);
 			font-weight: bold;
-			font-family: var(--fontFamily);
+			font-family: var(--fontFamily), var(--fontFamilyDefault);
 			font-size: 0.8em;
 			text-align: center;
 			background: none;

components/ThemeManager.vue

@@ -101,6 +101,7 @@ const THEME_OPTIONS = [
 		align-items: center;
 		gap: 0.5rem;
 		width: var(--roller-size);
+
 		padding: 0.2rem;
 		background-image: var(--c-bg-gradient);
 		backdrop-filter: blur(1rem);
@@ -115,6 +116,7 @@ const THEME_OPTIONS = [
 			position: relative;
 			aspect-ratio: 1 / 1;
 			cursor: pointer;
+			font-family: var(--fontFamily), var(--fontFamilyDefault);
 			line-height: 1;
 			background-color: transparent;
 			color: currentColor;

entrypoints/content.js

@@ -1,49 +1,4 @@
 // import '@/styles/index.scss'
-
-// import { createApp } from 'vue'
-// import ThemeManager from '@/components/ThemeManager.vue'
-// import { useThemeManager } from '@/composables/useThemeManager'
-// // import FloatingBtn from '@/components/FloatingBtn.vue'
-// // import Theme from '@/components/Theme.vue'
-
-// export default defineContentScript({
-// 	matches: ['*://chat.deepseek.com/*'],
-// 	async main(ctx) {
-// 		console.log('Hello content.js')
-
-// 		// Force theme initialization before the UI mounts.
-// 		// This uses your wxt/storage calls—if they’re async, wait for them.
-// 		const { init } = useThemeManager()
-// 		await init() // the document.body gets the right classes here
-
-// 		// Use the integrated UI API provided by wxt-dev
-// 		const ui = createIntegratedUi(ctx, {
-// 			position: 'inline',
-// 			anchor: 'body',
-// 			onMount: (container) => {
-// 				// Create and mount the Vue 3 app with the FloatingButton component
-// 				console.log(container)
-
-// 				const app = createApp(ThemeManager)
-// 				app.mount(container)
-
-// 				return app
-// 			},
-// 			onRemove: (app) => {
-// 				// Cleanly unmount the Vue app when the UI is removed
-// 				app.unmount()
-// 			},
-// 		})
-
-// 		// Finally, add the UI to the page
-// 		ui.mount()
-// 	},
-// })
-
-// ___________________________________________
-
-// entrypoints/content.js
-// import '@/styles/index.scss'
 import { createApp } from 'vue'
 import ThemeManager from '@/components/ThemeManager.vue'
 import { useThemeManager } from '@/composables/useThemeManager'
@@ -53,24 +8,25 @@ export default defineContentScript({
 	css: ['src/styles/index.scss'], // 👈 Use the same index.scss for content scripts
 
 	async main(ctx) {
-		// Simply call useThemeManager() so that the reactive syncing is set up.
-		// (No need to call an explicit init—our watchers run immediately.)
+		// Force theme initialization before the UI mounts.
 		useThemeManager()
 
 		// Use the integrated UI API provided by wxt-dev
 		const ui = createIntegratedUi(ctx, {
 			position: 'inline',
 			anchor: 'body',
 			onMount: (container) => {
+				// Create and mount the Vue 3 app with the ThemeManager component
 				const app = createApp(ThemeManager)
 				app.mount(container)
 				return app
 			},
 			onRemove: (app) => {
+				// Cleanly unmount the Vue app when the UI is removed
 				app.unmount()
 			},
 		})
-
+		// Finally, add the UI to the page
 		ui.mount()
 	},
 })

package.json

@@ -1,16 +1,71 @@
 {
 	"name": "deepstyled",
-	"description": "Transform DeepSeek's user interface with customizable accent colors, modern designs, and chat bubbles",
-	"private": true,
 	"version": "2.0.0",
+	"displayName": "DeepStyled - Deepseek Customization",
+	"description": "Transform DeepSeek's user interface with customisable accent colours, modern designs and chat bubbles.",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/itsmartashub/deepstyled.git"
+	},
+	"bugs": {
+		"url": "https://github.com/itsmartashub/deepstyled/issues"
+	},
+	"homepage": "https://github.com/itsmartashub/deepstyled/",
+	"author": "itsmarta",
 	"type": "module",
+	"keywords": [
+		"ai",
+		"chat",
+		"deepseek",
+		"chat bubbles",
+		"deepseek conversation",
+		"themes",
+		"deepseek themes",
+		"custom accent colours",
+		"custom design",
+		"custom fonts",
+		"custom theming",
+		"custom css",
+		"theme enhancement",
+		"ui customization",
+		"style",
+		"style deepseek",
+		"deepseek themes",
+		"deepseek enhancement",
+		"modern themes",
+		"minimalistic",
+		"deepstyled",
+		"modern ui",
+		"visual experience",
+		"user interface makeover",
+		"personalization",
+		"customization",
+		"stylish design",
+		"refreshed appearance",
+		"visual upgrade",
+		"user-friendly",
+		"css injection",
+		"web design makeover",
+		"plugin",
+		"addon",
+		"extension",
+		"browser extension",
+		"chrome",
+		"chrome extension",
+		"chrome web store",
+		"firefox",
+		"firefox addons",
+		"foss",
+		"opensource"
+	],
 	"scripts": {
 		"dev": "wxt",
 		"dev:firefox": "wxt -b firefox --mv2",
 		"build": "wxt build",
 		"build:firefox": "wxt build -b firefox --mv2",
 		"zip": "wxt zip",
 		"zip:firefox": "wxt zip -b firefox --mv2",
+		"zip:all": "pnpm zip && pnpm zip:firefox",
 		"compile": "vue-tsc --noEmit",
 		"postinstall": "wxt prepare"
 	},

styles/components/_icons.scss

@@ -55,8 +55,12 @@
 
 }
 
-/* .ds-loading - loading spinner */
-.e7920f9e {
+/*
+- ._772e792 -  .ds-loading - loading spinner icon
+- ._8a9564e - .ds-icon - sidebar icon when sidebar expanded on mobile
+*/
+._772e792,
+._8a9564e {
     color: var(--c-accent) !important;
 }