Enhance CRX viewer with theme toggle and file search

Refactor viewer.js to improve functionality and add theme toggle.

Signed-off-by: canvrs <ngde@web.de>

Author: UnboundedHQ

viewer.js

@@ -1,65 +1,84 @@
 // viewer.js
-// Requires JSZip to handle CRX extraction
-// Include JSZip via CDN
-const script = document.createElement('script');
-script.src = "https://cdnjs.cloudflare.com/ajax/libs/jszip/3.11.0/jszip.min.js";
-document.head.appendChild(script);
+let zip, fileMap = {};
+const treeRoot = document.getElementById('treeRoot');
+const viewer = document.getElementById('viewer');
+const crxInput = document.getElementById('crxInput');
+const processBtn = document.getElementById('processBtn');
+const searchBox = document.getElementById('searchBox');
+const themeToggle = document.getElementById('themeToggle');
+const exportBtn = document.getElementById('exportBtn');
 
-script.onload = () => {
-    const crxInput = document.getElementById('crxInput');
-    const fileList = document.getElementById('fileList');
-    const fileContent = document.getElementById('fileContent');
+let currentTheme = 'dark';
 
-    crxInput.addEventListener('change', async (e) => {
-        const file = e.target.files[0];
-        if (!file) return;
-
-        fileList.innerHTML = "Loading CRX...";
-
-        const buffer = await file.arrayBuffer();
-
-        // CRX Header parsing (CRXv2/v3)
-        // Skip the header and extract zip portion
-        let zipStart = 0;
-        const magic = new Uint8Array(buffer.slice(0, 4));
-        if (magic[0] !== 67 || magic[1] !== 82 || magic[2] !== 67 || magic[3] !== 0x21) {
-            alert("Not a valid CRX file");
-            return;
-        }
+// THEME TOGGLE
+themeToggle.onclick = () => {
+  if(currentTheme==='dark'){ document.body.classList.add('light'); currentTheme='light'; }
+  else { document.body.classList.remove('light'); currentTheme='dark'; }
+};
 
-        // CRX v2 header size: 16 + public key length + signature length
-        const dv = new DataView(buffer);
-        const version = dv.getUint32(4, true);
-        if (version === 2) {
-            const publicKeyLength = dv.getUint32(8, true);
-            const signatureLength = dv.getUint32(12, true);
-            zipStart = 16 + publicKeyLength + signatureLength;
-        } else if (version === 3) {
-            // CRXv3 uses a header size field at 8
-            const headerSize = dv.getUint32(8, true);
-            zipStart = 12 + headerSize;
-        } else {
-            alert("Unsupported CRX version: " + version);
-            return;
-        }
+// PROCESS FILE
+processBtn.onclick = async () => {
+  if (!crxInput.files[0]) return alert('Please select a CRX file!');
+  const arrayBuffer = await crxInput.files[0].arrayBuffer();
+  zip = await JSZip.loadAsync(arrayBuffer);
+  fileMap = {}; // clear previous
+  treeRoot.innerHTML = '';
+  buildTree(zip, treeRoot, '');
+};
 
-        const zipData = buffer.slice(zipStart);
+// BUILD TREE
+async function buildTree(folder, parent, path) {
+  for(const name in folder.files){
+    const f = folder.files[name];
+    const displayName = name.split('/').pop();
+    if(f.dir){
+      const li = document.createElement('li');
+      li.textContent = displayName+'/';
+      const ul = document.createElement('ul');
+      li.appendChild(ul);
+      parent.appendChild(li);
+      buildTree(f, ul, name);
+    } else {
+      const li = document.createElement('li');
+      li.textContent = displayName;
+      li.onclick = async () => showFile(name, li);
+      parent.appendChild(li);
+      fileMap[name] = f;
+    }
+  }
+}
 
-        const zip = await JSZip.loadAsync(zipData);
-        fileList.innerHTML = "";
+// SHOW FILE CONTENT
+async function showFile(name, li){
+  const content = await zip.file(name).async('string');
+  viewer.textContent = content;
+  Prism.highlightElement(viewer);
+  document.querySelectorAll('#fileTree li').forEach(i=>i.classList.remove('selected'));
+  li.classList.add('selected');
+}
 
-        // Populate file list
-        Object.keys(zip.files).forEach(filename => {
-            const item = document.createElement('div');
-            item.textContent = filename;
-            item.className = 'file-item';
-            item.addEventListener('click', async () => {
-                const content = await zip.files[filename].async('string');
-                fileContent.textContent = content;
-            });
-            fileList.appendChild(item);
-        });
+// SEARCH FILES
+searchBox.oninput = ()=>{
+  const q = searchBox.value.toLowerCase();
+  document.querySelectorAll('#fileTree li').forEach(li=>{
+    if(li.textContent.toLowerCase().includes(q)) li.style.display='block';
+    else li.style.display='none';
+  });
+}
 
-        fileContent.textContent = "Select a file to view its content...";
-    });
-};
+// EXPORT SELECTED FILES
+exportBtn.onclick = async ()=>{
+  if(!zip) return alert('No CRX loaded!');
+  const exportZip = new JSZip();
+  for(const path in fileMap){
+    const content = await zip.file(path).async('arraybuffer');
+    exportZip.file(path, content);
+  }
+  const blob = await exportZip.generateAsync({type:'blob'});
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = 'extracted_extension.zip';
+  a.click();
+  URL.revokeObjectURL(url);
+}