Add scripts and secrets screenshots

README.md

@@ -4,7 +4,9 @@ A lightweight, modern script manager built for Chrome Manifest V3 with the nativ
 
 **[Install from Chrome Web Store](https://chromewebstore.google.com/detail/openscript/dkelmgdchndagjemmodhkphdikhpnfol)**
 
-![OpenScript](public/screenshot1.png)
+| Empty state | Scripts | Secrets |
+| :---: | :---: | :---: |
+| ![OpenScript empty state](public/screenshot1.png) | ![OpenScript scripts](public/scripts.png) | ![OpenScript secrets](public/secrets.png) |
 
 ## Prerequisites
 

scripts/build-zip.js

@@ -12,8 +12,11 @@ execFileSync(process.execPath, ['node_modules/vite/bin/vite.js', 'build'], { std
   'dist/icons/OpenScript_v2.png',
   'dist/icons/logo.png',
   'dist/screenshot1.png',
+  'dist/scripts.png',
+  'dist/secrets.png',
   'dist/store-screenshot-1280x800.png',
-  'dist/store-screenshot-640x400.png'
+  'dist/store-scripts-1280x800.png',
+  'dist/store-secrets-1280x800.png'
 ].forEach(f => {
   if (fs.existsSync(f)) fs.unlinkSync(f);
 });

scripts/make-screenshot.js

@@ -1,33 +1,9 @@
 import sharp from 'sharp';
-import fs from 'fs';
 
 async function generate() {
-  const popupSrc = 'public/screenshot1.png';
-  const meta = await sharp(popupSrc).metadata();
-
   const canvasW = 1280;
   const canvasH = 800;
 
-  // Scale popup card to 690px height
-  const targetH = 690;
-  const targetW = Math.round((meta.width / meta.height) * targetH);
-  const rx = 14;
-
-  const maskSvg = Buffer.from(`
-    <svg width="${targetW}" height="${targetH}">
-      <rect x="0" y="0" width="${targetW}" height="${targetH}" rx="${rx}" ry="${rx}" fill="#fff" />
-    </svg>
-  `);
-
-  const roundedPopup = await sharp(popupSrc)
-    .resize(targetW, targetH, { fit: 'fill' })
-    .composite([{ input: maskSvg, blend: 'dest-in' }])
-    .png()
-    .toBuffer();
-
-  const x = Math.round((canvasW - targetW) / 2);
-  const y = Math.round((canvasH - targetH) / 2);
-
   // Rounded icon badge for top-left
   const iconRx = 8;
   const iconMask = Buffer.from(`
@@ -42,6 +18,30 @@ async function generate() {
     .png()
     .toBuffer();
 
+  const screenshots = [
+    ['public/screenshot1.png', 'public/store-screenshot-1280x800.png'],
+    ['public/scripts.png', 'public/store-scripts-1280x800.png'],
+    ['public/secrets.png', 'public/store-secrets-1280x800.png']
+  ];
+
+  for (const [popupSrc, output] of screenshots) {
+    const { width, height } = await sharp(popupSrc).metadata();
+    const targetH = 690;
+    const targetW = Math.round((width / height) * targetH);
+    const rx = 14;
+    const x = Math.round((canvasW - targetW) / 2);
+    const y = Math.round((canvasH - targetH) / 2);
+    const maskSvg = Buffer.from(`
+      <svg width="${targetW}" height="${targetH}">
+        <rect width="${targetW}" height="${targetH}" rx="${rx}" fill="#fff" />
+      </svg>
+    `);
+    const roundedPopup = await sharp(popupSrc)
+      .resize(targetW, targetH, { fit: 'fill' })
+      .composite([{ input: maskSvg, blend: 'dest-in' }])
+      .png()
+      .toBuffer();
+
     const bgSvg = Buffer.from(`
     <svg width="${canvasW}" height="${canvasH}" xmlns="http://www.w3.org/2000/svg">
       <defs>
@@ -116,23 +116,16 @@ async function generate() {
     </svg>
   `);
 
-  const final1280 = await sharp(bgSvg)
+    await sharp(bgSvg)
       .composite([
         { input: logoBuf, top: 40, left: 56 },
         { input: roundedPopup, top: y, left: x },
         { input: borderSvg, top: y, left: x }
       ])
       .png()
-    .toBuffer();
-
-  await sharp(final1280).toFile('public/store-screenshot-1280x800.png');
-  console.log('✓ Generated public/store-screenshot-1280x800.png (1280x800)');
-
-  await sharp(final1280)
-    .resize(640, 400)
-    .png()
-    .toFile('public/store-screenshot-640x400.png');
-  console.log('✓ Generated public/store-screenshot-640x400.png (640x400)');
+      .toFile(output);
+    console.log(`✓ Generated ${output} (1280x800)`);
+  }
 }
 
 generate();