fix: chrome extension layout, version sync across all platforms (#13)

* fix chrome layout
* add script for version sync across all platforms

Author: gammabowl

extension/background.ts

@@ -6,10 +6,24 @@ chrome.action.onClicked.addListener(async () => {
   const url = chrome.runtime.getURL("extension/index.html");
   const tabs = await chrome.tabs.query({ url });
 
-  if (tabs.length > 0 && tabs[0].id) {
+  if (tabs.length > 0 && tabs[0].id && tabs[0].windowId !== undefined) {
+    await chrome.windows.update(tabs[0].windowId, { focused: true });
     await chrome.tabs.update(tabs[0].id, { active: true });
     return;
   }
 
-  await chrome.tabs.create({ url });
+  const currentWindow = await chrome.windows.getCurrent();
+  const fallbackWidth = 1200;
+  const fallbackHeight = 800;
+  const width = Math.max(fallbackWidth, currentWindow.width ?? fallbackWidth);
+  const height = Math.max(fallbackHeight, currentWindow.height ?? fallbackHeight);
+
+  await chrome.windows.create({
+    url,
+    type: "popup",
+    width,
+    height,
+    left: currentWindow.left,
+    top: currentWindow.top,
+  });
 });

extension/manifest.json

@@ -2,7 +2,7 @@
   "manifest_version": 3,
   "name": "TryDevUtils",
   "description": "Essential developer utilities",
-  "version": "0.1.0",
+  "version": "0.1.4",
   "homepage_url": "https://www.trydevutils.com",
   "action": {
     "default_title": "TryDevUtils"

index.html

@@ -29,18 +29,18 @@
       })();
     </script>
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>TryDevUtils - Essential Developer Utilities | Web & Desktop App</title>
+    <title>TryDevUtils - Essential Developer Utilities | Web, Desktop App & Chrome Extension</title>
     <meta name="description" content="Free open source developer utilities for JWT decoding, encoding, JSON formatting, validation, and UUID generation, Base64 converter, Timestamp/date converter, Text diff, Cron parser, Colour converter, Hash generator, Yaml validator. Available as a web app and desktop app for macOS, Windows, and Linux. All processing happens locally — no data leaves your device." />
     <meta name="author" content="TryDevUtils" />
     <meta name="keywords" content="developer tools, dev utilities, JWT decoder, JSON formatter, Base64 converter, UUID generator, hash generator, cron parser, desktop app, macOS, Windows, Linux, open source, privacy, offline" />
 
-    <meta property="og:title" content="TryDevUtils - Essential Developer Utilities | Web & Desktop App" />
+    <meta property="og:title" content="TryDevUtils - Essential Developer Utilities | Web, Desktop App & Chrome Extension" />
     <meta property="og:description" content="Free open source developer utilities for JWT decoding, encoding, JSON formatting, validation, and UUID generation, Base64 converter, Timestamp/date converter, Text diff, Cron parser, Colour converter, Hash generator, Yaml validator. Available as a web app and desktop app for macOS, Windows, and Linux. All processing happens locally — no data leaves your device." />
     <meta property="og:type" content="website" />
     <meta property="og:image" content="/og_trydevutils.png" />
 
     <meta name="twitter:card" content="summary_large_image" />
-    <meta property="twitter:title" content="TryDevUtils - Essential Developer Utilities | Web & Desktop App" />
+    <meta property="twitter:title" content="TryDevUtils - Essential Developer Utilities | Web, Desktop App & Chrome Extension" />
     <meta name="twitter:description" content="Free open source developer utilities for JWT decoding, encoding, JSON formatting, validation, and UUID generation, Base64 converter, Timestamp/date converter, Text diff, Cron parser, Colour converter, Hash generator, Yaml validator. Available as a web app and desktop app for macOS, Windows, and Linux. All processing happens locally — no data leaves your device." />
     <meta name="twitter:image" content="/og_trydevutils.png" />
 

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "trydevutils-app",
   "private": true,
-  "version": "0.0.0",
+  "version": "0.1.4",
   "license": "MIT",
   "type": "module",
   "scripts": {
@@ -11,16 +11,17 @@
     "build:frontend": "vite build",
     "build:ci": "vite build && npm run test:ci",
     "tauri": "tauri",
-    "tauri:dev": "tauri dev",
-    "tauri:build": "tauri build",
+    "tauri:dev": "npm run sync:version && tauri dev",
+    "tauri:build": "npm run sync:version && tauri build",
     "test": "vite preview --port 3000 --host & sleep 5 && npx playwright test",
     "test:ci": "npx playwright install --with-deps chromium && vite preview --port 3000 --host & sleep 5 && npx playwright test --reporter=line",
     "check": "tsc && vite build",
     "build:dev": "vite build --mode development",
     "lint": "eslint .",
     "preview": "npm run build && vite preview",
-    "build:extension": "vite build --mode extension",
-    "extension:prepare": "vite build --mode extension && cp extension/manifest.json dist-extension/ && cp -r extension/icons dist-extension/ && rm -f dist-extension/_redirects"
+    "build:extension": "npm run sync:version && vite build --mode extension",
+    "extension:prepare": "npm run sync:version && vite build --mode extension && cp extension/manifest.json dist-extension/ && cp -r extension/icons dist-extension/ && rm -f dist-extension/_redirects",
+    "sync:version": "node scripts/sync-version.mjs"
   },
   "dependencies": {
     "@hookform/resolvers": "^3.9.0",
@@ -103,6 +104,7 @@
     "@playwright/test": "^1.58.1",
     "@tailwindcss/typography": "^0.5.16",
     "@tauri-apps/cli": "^2.10.0",
+    "@types/chrome": "^0.0.268",
     "@types/node": "^22.5.5",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",

package.json

@@ -0,0 +1,39 @@
+import fs from "node:fs";
+import path from "node:path";
+
+const projectRoot = process.cwd();
+
+const files = [
+  "extension/manifest.json",
+  "src-tauri/tauri.conf.json",
+  "dist-extension/manifest.json",
+];
+
+const packageJsonPath = path.join(projectRoot, "package.json");
+const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, "utf8"));
+const { version } = packageJson;
+
+if (!version) {
+  console.error("package.json has no version field.");
+  process.exit(1);
+}
+
+const updateJsonVersion = (relativePath) => {
+  const fullPath = path.join(projectRoot, relativePath);
+  if (!fs.existsSync(fullPath)) {
+    return;
+  }
+
+  const json = JSON.parse(fs.readFileSync(fullPath, "utf8"));
+  if (json.version === version) {
+    return;
+  }
+
+  json.version = version;
+  fs.writeFileSync(fullPath, JSON.stringify(json, null, 2) + "\n");
+  console.log(`Updated ${relativePath} to version ${version}`);
+};
+
+for (const file of files) {
+  updateJsonVersion(file);
+}

scripts/sync-version.mjs

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/tauri-apps/tauri/dev/crates/tauri-utils/schema.json",
   "productName": "TryDevUtils",
-  "version": "0.1.0",
+  "version": "0.1.4",
   "identifier": "com.trydevutils.desktop",
   "build": {
     "frontendDist": "../dist",
@@ -62,5 +62,4 @@
     }
   },
   "plugins": {}
-
 }

src-tauri/tauri.conf.json

@@ -10,6 +10,7 @@ import { ScrollArea } from "@/components/ui/scroll-area";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
+import { getVersion } from "@tauri-apps/api/app";
 
 const FAVORITES_STORAGE_KEY = "try-devutils-favourites";
 
@@ -35,6 +36,7 @@ export function DesktopLayout() {
   const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
   const [sidebarFilter, setSidebarFilter] = useState("");
   const [favourites, setFavourites] = useState<string[]>(getFavorites());
+  const [appVersion, setAppVersion] = useState<string | null>(null);
   const filterInputRef = useRef<HTMLInputElement>(null);
   const platform = getPlatformSync();
   const modKey = getModifierKey();
@@ -47,6 +49,14 @@ export function DesktopLayout() {
     return () => window.removeEventListener("storage", handleStorage);
   }, []);
 
+  useEffect(() => {
+    getVersion()
+      .then((version) => setAppVersion(version))
+      .catch(() => {
+        // Best effort; keep footer readable even if version fetch fails.
+      });
+  }, []);
+
   // Active util
   const activeUtilId = location.pathname.replace("/", "") || null;
 
@@ -271,7 +281,7 @@ export function DesktopLayout() {
           {/* Sidebar footer */}
           {!sidebarCollapsed && (
             <div className="border-t border-border/30 p-2 text-[10px] text-muted-foreground/50 text-center shrink-0">
-              v0.1.3 · Desktop
+              {appVersion ? `v${appVersion} · Desktop` : "Desktop"}
             </div>
           )}
         </aside>

src/components/DesktopLayout.tsx

@@ -164,6 +164,24 @@ All colors MUST be HSL.
     background: hsl(var(--background));
   }
 
+  /* Chrome extension popup sizing */
+  html.extension,
+  body.extension {
+    width: 100%;
+    height: 100%;
+    min-width: 1200px;
+    min-height: 800px;
+  }
+
+  body.extension {
+    overflow: auto;
+  }
+
+  #root {
+    min-height: 100%;
+    width: 100%;
+  }
+
   /* Improved typography scale for Roboto */
   h1, h2, h3, h4, h5, h6 {
     font-weight: 600;

src/index.css

@@ -2,6 +2,12 @@ import { createRoot } from 'react-dom/client'
 import App from './App.tsx'
 import './index.css'
 import { ThemeProvider } from './components/theme-provider'
+import { isExtension } from './lib/platform'
+
+if (isExtension()) {
+  document.documentElement.classList.add("extension");
+  document.body.classList.add("extension");
+}
 
 createRoot(document.getElementById("root")!).render(
   <ThemeProvider defaultTheme="system" storageKey="trydevutils-theme">