Skip to content

Commit 1e9b3ba

Browse files
authored
fix: chrome extension layout, version sync across all platforms (#13)
* fix chrome layout * add script for version sync across all platforms
1 parent eea6417 commit 1e9b3ba

12 files changed

Lines changed: 157 additions & 19 deletions

File tree

extension/background.ts

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,24 @@ chrome.action.onClicked.addListener(async () => {
66
const url = chrome.runtime.getURL("extension/index.html");
77
const tabs = await chrome.tabs.query({ url });
88

9-
if (tabs.length > 0 && tabs[0].id) {
9+
if (tabs.length > 0 && tabs[0].id && tabs[0].windowId !== undefined) {
10+
await chrome.windows.update(tabs[0].windowId, { focused: true });
1011
await chrome.tabs.update(tabs[0].id, { active: true });
1112
return;
1213
}
1314

14-
await chrome.tabs.create({ url });
15+
const currentWindow = await chrome.windows.getCurrent();
16+
const fallbackWidth = 1200;
17+
const fallbackHeight = 800;
18+
const width = Math.max(fallbackWidth, currentWindow.width ?? fallbackWidth);
19+
const height = Math.max(fallbackHeight, currentWindow.height ?? fallbackHeight);
20+
21+
await chrome.windows.create({
22+
url,
23+
type: "popup",
24+
width,
25+
height,
26+
left: currentWindow.left,
27+
top: currentWindow.top,
28+
});
1529
});

extension/manifest.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"manifest_version": 3,
33
"name": "TryDevUtils",
44
"description": "Essential developer utilities",
5-
"version": "0.1.0",
5+
"version": "0.1.4",
66
"homepage_url": "https://www.trydevutils.com",
77
"action": {
88
"default_title": "TryDevUtils"

index.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -29,18 +29,18 @@
2929
})();
3030
</script>
3131
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
32-
<title>TryDevUtils - Essential Developer Utilities | Web & Desktop App</title>
32+
<title>TryDevUtils - Essential Developer Utilities | Web, Desktop App & Chrome Extension</title>
3333
<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." />
3434
<meta name="author" content="TryDevUtils" />
3535
<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" />
3636

37-
<meta property="og:title" content="TryDevUtils - Essential Developer Utilities | Web & Desktop App" />
37+
<meta property="og:title" content="TryDevUtils - Essential Developer Utilities | Web, Desktop App & Chrome Extension" />
3838
<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." />
3939
<meta property="og:type" content="website" />
4040
<meta property="og:image" content="/og_trydevutils.png" />
4141

4242
<meta name="twitter:card" content="summary_large_image" />
43-
<meta property="twitter:title" content="TryDevUtils - Essential Developer Utilities | Web & Desktop App" />
43+
<meta property="twitter:title" content="TryDevUtils - Essential Developer Utilities | Web, Desktop App & Chrome Extension" />
4444
<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." />
4545
<meta name="twitter:image" content="/og_trydevutils.png" />
4646

package-lock.json

Lines changed: 38 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

package.json

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "trydevutils-app",
33
"private": true,
4-
"version": "0.0.0",
4+
"version": "0.1.4",
55
"license": "MIT",
66
"type": "module",
77
"scripts": {
@@ -11,16 +11,17 @@
1111
"build:frontend": "vite build",
1212
"build:ci": "vite build && npm run test:ci",
1313
"tauri": "tauri",
14-
"tauri:dev": "tauri dev",
15-
"tauri:build": "tauri build",
14+
"tauri:dev": "npm run sync:version && tauri dev",
15+
"tauri:build": "npm run sync:version && tauri build",
1616
"test": "vite preview --port 3000 --host & sleep 5 && npx playwright test",
1717
"test:ci": "npx playwright install --with-deps chromium && vite preview --port 3000 --host & sleep 5 && npx playwright test --reporter=line",
1818
"check": "tsc && vite build",
1919
"build:dev": "vite build --mode development",
2020
"lint": "eslint .",
2121
"preview": "npm run build && vite preview",
22-
"build:extension": "vite build --mode extension",
23-
"extension:prepare": "vite build --mode extension && cp extension/manifest.json dist-extension/ && cp -r extension/icons dist-extension/ && rm -f dist-extension/_redirects"
22+
"build:extension": "npm run sync:version && vite build --mode extension",
23+
"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",
24+
"sync:version": "node scripts/sync-version.mjs"
2425
},
2526
"dependencies": {
2627
"@hookform/resolvers": "^3.9.0",
@@ -103,6 +104,7 @@
103104
"@playwright/test": "^1.58.1",
104105
"@tailwindcss/typography": "^0.5.16",
105106
"@tauri-apps/cli": "^2.10.0",
107+
"@types/chrome": "^0.0.268",
106108
"@types/node": "^22.5.5",
107109
"@types/react": "^18.3.3",
108110
"@types/react-dom": "^18.3.0",

scripts/sync-version.mjs

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import fs from "node:fs";
2+
import path from "node:path";
3+
4+
const projectRoot = process.cwd();
5+
6+
const files = [
7+
"extension/manifest.json",
8+
"src-tauri/tauri.conf.json",
9+
"dist-extension/manifest.json",
10+
];
11+
12+
const packageJsonPath = path.join(projectRoot, "package.json");
13+
const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, "utf8"));
14+
const { version } = packageJson;
15+
16+
if (!version) {
17+
console.error("package.json has no version field.");
18+
process.exit(1);
19+
}
20+
21+
const updateJsonVersion = (relativePath) => {
22+
const fullPath = path.join(projectRoot, relativePath);
23+
if (!fs.existsSync(fullPath)) {
24+
return;
25+
}
26+
27+
const json = JSON.parse(fs.readFileSync(fullPath, "utf8"));
28+
if (json.version === version) {
29+
return;
30+
}
31+
32+
json.version = version;
33+
fs.writeFileSync(fullPath, JSON.stringify(json, null, 2) + "\n");
34+
console.log(`Updated ${relativePath} to version ${version}`);
35+
};
36+
37+
for (const file of files) {
38+
updateJsonVersion(file);
39+
}

src-tauri/tauri.conf.json

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"$schema": "https://raw.githubusercontent.com/tauri-apps/tauri/dev/crates/tauri-utils/schema.json",
33
"productName": "TryDevUtils",
4-
"version": "0.1.0",
4+
"version": "0.1.4",
55
"identifier": "com.trydevutils.desktop",
66
"build": {
77
"frontendDist": "../dist",
@@ -62,5 +62,4 @@
6262
}
6363
},
6464
"plugins": {}
65-
6665
}

src/components/DesktopLayout.tsx

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import { ScrollArea } from "@/components/ui/scroll-area";
1010
import { Input } from "@/components/ui/input";
1111
import { Button } from "@/components/ui/button";
1212
import { cn } from "@/lib/utils";
13+
import { getVersion } from "@tauri-apps/api/app";
1314

1415
const FAVORITES_STORAGE_KEY = "try-devutils-favourites";
1516

@@ -35,6 +36,7 @@ export function DesktopLayout() {
3536
const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
3637
const [sidebarFilter, setSidebarFilter] = useState("");
3738
const [favourites, setFavourites] = useState<string[]>(getFavorites());
39+
const [appVersion, setAppVersion] = useState<string | null>(null);
3840
const filterInputRef = useRef<HTMLInputElement>(null);
3941
const platform = getPlatformSync();
4042
const modKey = getModifierKey();
@@ -47,6 +49,14 @@ export function DesktopLayout() {
4749
return () => window.removeEventListener("storage", handleStorage);
4850
}, []);
4951

52+
useEffect(() => {
53+
getVersion()
54+
.then((version) => setAppVersion(version))
55+
.catch(() => {
56+
// Best effort; keep footer readable even if version fetch fails.
57+
});
58+
}, []);
59+
5060
// Active util
5161
const activeUtilId = location.pathname.replace("/", "") || null;
5262

@@ -271,7 +281,7 @@ export function DesktopLayout() {
271281
{/* Sidebar footer */}
272282
{!sidebarCollapsed && (
273283
<div className="border-t border-border/30 p-2 text-[10px] text-muted-foreground/50 text-center shrink-0">
274-
v0.1.3 · Desktop
284+
{appVersion ? `v${appVersion} · Desktop` : "Desktop"}
275285
</div>
276286
)}
277287
</aside>

src/index.css

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -164,6 +164,24 @@ All colors MUST be HSL.
164164
background: hsl(var(--background));
165165
}
166166

167+
/* Chrome extension popup sizing */
168+
html.extension,
169+
body.extension {
170+
width: 100%;
171+
height: 100%;
172+
min-width: 1200px;
173+
min-height: 800px;
174+
}
175+
176+
body.extension {
177+
overflow: auto;
178+
}
179+
180+
#root {
181+
min-height: 100%;
182+
width: 100%;
183+
}
184+
167185
/* Improved typography scale for Roboto */
168186
h1, h2, h3, h4, h5, h6 {
169187
font-weight: 600;

src/main.tsx

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,12 @@ import { createRoot } from 'react-dom/client'
22
import App from './App.tsx'
33
import './index.css'
44
import { ThemeProvider } from './components/theme-provider'
5+
import { isExtension } from './lib/platform'
6+
7+
if (isExtension()) {
8+
document.documentElement.classList.add("extension");
9+
document.body.classList.add("extension");
10+
}
511

612
createRoot(document.getElementById("root")!).render(
713
<ThemeProvider defaultTheme="system" storageKey="trydevutils-theme">

0 commit comments

Comments
 (0)