feat: add extension packing script and update build script

.gitignore

@@ -27,3 +27,9 @@ dev-dist
 extension-release.zip
 *.zip
 tools-app-extension-*.zip
+tools-app-extension-*.crx
+
+# Extension keys and builds
+*.pem
+*.crx
+scripts/*.pub

README.md

@@ -27,7 +27,7 @@ Clean tracking parameters and clutter from URLs.
 - **Customizable:** Manage exceptions to keep specific parameters.
 - **Smart:** "Direct Clean" mode for quick single-URL cleaning.
 
-###  QR Generator
+### ⬛ QR Generator
 Create custom QR codes instantly.
 - **Customizable:** Adjustable error correction level and size.
 - **Download:** Save as PNG (raster) or SVG (vector) for high-quality printing.

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "tools-app",
-  "version": "0.6.12",
+  "version": "0.6.16",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "tools-app",
-      "version": "0.6.12",
+      "version": "0.6.16",
       "hasInstallScript": true,
       "dependencies": {
         "barcode-detector": "^3.1.0",

package.json

@@ -1,12 +1,13 @@
 {
   "name": "tools-app",
   "private": true,
-  "version": "0.6.12",
+  "version": "0.6.17",
   "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview",
+    "pack-extension": "node scripts/pack_crx.js",
     "postinstall": "mkdir -p public/wasm && cp node_modules/zxing-wasm/dist/reader/zxing_reader.wasm public/wasm/"
   },
   "dependencies": {

scripts/build_extension.py

@@ -6,9 +6,14 @@ import zipfile
 # Configuration
 SOURCE_DIR = "extension"
 BUILD_DIR = "dist-extension"
-OUTPUT_ZIP = "extension-release.zip"
 MANIFEST_FILE = "manifest.json"
 
+# Read version to create dynamic zip name
+with open(os.path.join(SOURCE_DIR, MANIFEST_FILE), "r") as f:
+    source_manifest = json.load(f)
+version = source_manifest.get("version", "unknown")
+OUTPUT_ZIP = f"tools-app-extension-v{version}.zip"
+
 # Remove build directory if exists
 if os.path.exists(BUILD_DIR):
     shutil.rmtree(BUILD_DIR)

scripts/pack_crx.js

@@ -0,0 +1,110 @@
+import { execSync } from 'child_process';
+import fs from 'fs';
+import path from 'path';
+
+function findKey() {
+  // 1. Check if key provided via CLI
+  if (process.argv[3]) return process.argv[3];
+
+  // 2. Check local project directory (gitignored)
+  const localKey = path.join(process.cwd(), 'scripts', 'key.pem');
+  if (fs.existsSync(localKey)) return localKey;
+
+  // 3. Check common SSH key locations in ~/.ssh
+  const sshDir = path.join(process.env.HOME, '.ssh');
+  const commonKeys = ['id_rsa', 'id_ecdsa', 'id_ed25519'];
+
+  for (const keyName of commonKeys) {
+    const fullPath = path.join(sshDir, keyName);
+    if (fs.existsSync(fullPath)) return fullPath;
+  }
+
+  return null;
+}
+
+const KEY_PATH = findKey();
+const INPUT_SOURCE = process.argv[2] || path.join(process.cwd(), 'extension');
+const TEMP_DIR = path.join(process.cwd(), 'temp_extension_build');
+
+function pack() {
+  console.log('📦 Packing extension to CRX...');
+
+  if (!KEY_PATH) {
+    console.error('❌ Error: No private key found.');
+    console.log('Tried local scripts/key.pem and common ~/.ssh/id_* keys.');
+    console.log('You can provide a path manually: npm run pack-extension <source> <path/to/key>');
+    process.exit(1);
+  }
+
+  let extensionDir = INPUT_SOURCE;
+  let isTemp = false;
+
+  try {
+    // If input is a zip file, unzip it first
+    if (INPUT_SOURCE.endsWith('.zip')) {
+      console.log('🤐 Unzipping extension...');
+      if (fs.existsSync(TEMP_DIR)) fs.rmSync(TEMP_DIR, { recursive: true, force: true });
+      fs.mkdirSync(TEMP_DIR);
+      execSync(`unzip -o "${INPUT_SOURCE}" -d "${TEMP_DIR}"`, { stdio: 'pipe' });
+      extensionDir = TEMP_DIR;
+      isTemp = true;
+    }
+
+    // Resolve actual extension directory (handle subdirs in zip)
+    if (!fs.existsSync(path.join(extensionDir, 'manifest.json'))) {
+      const subdirs = fs.readdirSync(extensionDir).filter(f => fs.statSync(path.join(extensionDir, f)).isDirectory());
+      if (subdirs.length === 1 && fs.existsSync(path.join(extensionDir, subdirs[0], 'manifest.json'))) {
+        extensionDir = path.join(extensionDir, subdirs[0]);
+        console.log(`📂 Found manifest in subdirectory: ${extensionDir}`);
+      } else {
+        console.error(`❌ Error: manifest.json not found in ${extensionDir}`);
+        process.exit(1);
+      }
+    }
+
+    // Determine output filename
+    let outputName;
+    if (INPUT_SOURCE.endsWith('.zip')) {
+      outputName = path.basename(INPUT_SOURCE).replace('.zip', '.crx');
+    } else {
+      const manifest = JSON.parse(fs.readFileSync(path.join(extensionDir, 'manifest.json'), 'utf8'));
+      outputName = `tools-app-extension-v${manifest.version}.crx`;
+    }
+    const outputFull = path.join(process.cwd(), outputName);
+
+    // Get version for logging
+    const manifest = JSON.parse(fs.readFileSync(path.join(extensionDir, 'manifest.json'), 'utf8'));
+    const version = manifest.version;
+
+    console.log(`🔑 Using key: ${KEY_PATH}`);
+    console.log(`📂 Source: ${extensionDir} (v${version})`);
+    console.log(`🚀 Running crx3 via npx...`);
+
+    // Command: npx -y crx3 --key <key> --crx <output> <dir>
+    execSync(`npx -y crx3 --key "${KEY_PATH}" --crx "${outputFull}" "${extensionDir}"`, {
+      stdio: 'inherit'
+    });
+
+    // Cleanup any file that crx3 might have created automatically based on temp dir name
+    const unintendedFile = extensionDir + '.crx';
+    if (fs.existsSync(unintendedFile) && unintendedFile !== outputFull) {
+      fs.unlinkSync(unintendedFile);
+    }
+
+    console.log(`\n✅ Success! Extension packed to: ${outputFull}`);
+  } catch (error) {
+    console.error('\n❌ Failed to pack extension.');
+    if (error.message.includes('algorithm')) {
+      console.error('⚠️  Note: Chrome CRX format requires RSA or ECDSA (P-256) keys.');
+    } else {
+      console.error('Error details:', error.message);
+    }
+    process.exit(1);
+  } finally {
+    if (isTemp && fs.existsSync(TEMP_DIR)) {
+      fs.rmSync(TEMP_DIR, { recursive: true, force: true });
+    }
+  }
+}
+
+pack();

src/components/Header.vue

@@ -44,7 +44,7 @@ onMounted(() => {
             <line x1="3" y1="18" x2="21" y2="18"></line>
           </svg>
         </button>
-        <h1 class="app-title">Tools App</h1>
+        <router-link to="/" class="app-title">Tools App</router-link>
       </div>
 
       <button
@@ -115,10 +115,11 @@ onMounted(() => {
 .app-title {
   margin: 0;
   font-size: 1.5rem;
-  font-weight: 600;
   background: var(--title-gradient);
   -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
   background-clip: text;
+  color: transparent;
+  text-decoration: none;
+  font-weight: bold;
 }
 </style>

src/components/InstallPrompt.vue

@@ -51,12 +51,20 @@ const dismissPrompt = () => {
   deferredPrompt = null
 }
 
+const handleKeydown = (e) => {
+  if (e.key === 'Escape' && showInstallPrompt.value) {
+    dismissPrompt()
+  }
+}
+
 onMounted(() => {
   window.addEventListener('beforeinstallprompt', handleBeforeInstallPrompt)
+  window.addEventListener('keydown', handleKeydown)
 })
 
 onBeforeUnmount(() => {
   window.removeEventListener('beforeinstallprompt', handleBeforeInstallPrompt)
+  window.removeEventListener('keydown', handleKeydown)
 })
 </script>
 

src/components/tools/QrScanner.vue

@@ -377,11 +377,18 @@ watch(scannedCodes, (newVal) => {
   localStorage.setItem('qr-history', JSON.stringify(newVal))
 }, { deep: true })
 
+const handleKeydown = (e) => {
+  if (e.key === 'Escape' && isFullscreen.value) {
+    toggleFullscreen()
+  }
+}
+
 onMounted(() => {
   checkCameras()
   loadHistory()
   window.addEventListener('resize', updateVideoAspect)
   window.addEventListener('resize', startBackgroundLoop)
+  window.addEventListener('keydown', handleKeydown)
   watch(isFullscreen, (fs) => {
     if (fs) {
       startBackgroundLoop()
@@ -396,6 +403,7 @@ onMounted(() => {
 onUnmounted(() => {
   window.removeEventListener('resize', updateVideoAspect)
   window.removeEventListener('resize', startBackgroundLoop)
+  window.removeEventListener('keydown', handleKeydown)
   stopScan()
 })
 

src/components/tools/UrlCleanerExceptionsModal.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed } from 'vue'
+import { ref, computed, watch, onUnmounted } from 'vue'
 import { X, Plus, Trash2, RotateCcw } from 'lucide-vue-next'
 
 const props = defineProps({
@@ -10,6 +10,24 @@ const props = defineProps({
 
 const emit = defineEmits(['close', 'update:exceptions'])
 
+const handleKeydown = (e) => {
+  if (e.key === 'Escape') {
+    emit('close')
+  }
+}
+
+watch(() => props.isOpen, (isOpen) => {
+  if (isOpen) {
+    window.addEventListener('keydown', handleKeydown)
+  } else {
+    window.removeEventListener('keydown', handleKeydown)
+  }
+})
+
+onUnmounted(() => {
+  window.removeEventListener('keydown', handleKeydown)
+})
+
 const newRule = ref({
   domainPattern: '',
   keepParams: '',

src/components/tools/common/ExtensionStatus.vue

@@ -5,7 +5,7 @@ export default {
 </script>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, watch, onUnmounted } from 'vue'
 import { Plug, Plus, X } from 'lucide-vue-next'
 
 const props = defineProps({
@@ -13,6 +13,24 @@ const props = defineProps({
 })
 
 const showModal = ref(false)
+
+const handleKeydown = (e) => {
+  if (e.key === 'Escape' && showModal.value) {
+    showModal.value = false
+  }
+}
+
+watch(showModal, (isOpen) => {
+  if (isOpen) {
+    window.addEventListener('keydown', handleKeydown)
+  } else {
+    window.removeEventListener('keydown', handleKeydown)
+  }
+})
+
+onUnmounted(() => {
+  window.removeEventListener('keydown', handleKeydown)
+})
 </script>
 
 <template>
@@ -38,7 +56,14 @@ const showModal = ref(false)
             With the extension, you can capture and process content even when you're working in other apps.
           </p>
           <div class="modal-actions">
-            <a href="#" class="btn-neon" @click.prevent>Extension Coming Soon</a>
+            <a
+              href="https://chromewebstore.google.com/detail/tools-app-extension/bhcpbmfncohogehbhebiffcgjcndnneg"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="btn-neon"
+            >
+              Install Extension
+            </a>
           </div>
         </div>