Emulator navigation now shows on all pages

no more exiting the instance just to constantly reupload your extension to see if it works.
write many times, test once. :)

.gitignore

@@ -1,3 +1,4 @@
 /node_modules
 /dist
 .env
+/public/banner.png

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "waifu-board",
-  "version": "v1.2.0",
+  "version": "v1.6.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "waifu-board",
-      "version": "v1.2.0",
+      "version": "v1.6.2",
       "license": "ISC",
       "dependencies": {
         "@ryuziii/discord-rpc": "^1.0.1-rc.1",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "waifu-board",
-  "version": "v1.6.2",
+  "version": "v1.6.3",
   "description": "An image board app to store and browse your favorite waifus!",
   "main": "main.js",
   "scripts": {

src/emulator/emulator.js

@@ -0,0 +1,306 @@
+const CheerioShim = {
+    load: (html) => {
+        const parser = new DOMParser();
+        const doc = parser.parseFromString(html, 'text/html');
+
+        const $ = (selector, context) => {
+            let elements;
+            if (selector && selector.nodeType) {
+                elements = [selector];
+            } else if (Array.isArray(selector)) {
+                elements = selector;
+            } else {
+                const root = (context && context[0]) ? context[0] : (context || doc);
+                elements = Array.from(root.querySelectorAll ? root.querySelectorAll(selector) : []);
+            }
+            return createWrapper(elements);
+        };
+
+        function createWrapper(elements) {
+            elements.forEach((el, i) => elements[i] = el);
+            
+            elements.attr = (name) => {
+                if (elements.length === 0) return undefined;
+                return elements[0].getAttribute ? elements[0].getAttribute(name) : null;
+            };
+
+            elements.text = () => {
+                return elements.map(el => el.textContent).join('');
+            };
+
+            elements.find = (selector) => {
+                let found = [];
+                elements.forEach(el => {
+                    if (el.querySelectorAll) {
+                        found = found.concat(Array.from(el.querySelectorAll(selector)));
+                    }
+                });
+                return createWrapper(found);
+            };
+
+            elements.each = (callback) => {
+                elements.forEach((el, i) => {
+                    callback(i, el);
+                });
+                return elements;
+            };
+
+            elements.map = (callback) => {
+                const results = elements.map((el, i) => callback(i, el));
+                return createWrapper(results.filter(r => r !== null && r !== undefined));
+            };
+
+            elements.get = () => Array.from(elements);
+
+            elements.filter = (selectorOrFn) => {
+                if (typeof selectorOrFn === 'function') {
+                    return createWrapper(elements.filter(selectorOrFn));
+                }
+                return createWrapper(elements.filter(el => el.matches && el.matches(selectorOrFn)));
+            };
+
+            elements.first = () => createWrapper(elements.length ? [elements[0]] : []);
+            elements.last = () => createWrapper(elements.length ? [elements[elements.length - 1]] : []);
+            elements.eq = (i) => createWrapper(elements.length > i ? [elements[i]] : []);
+
+            return elements;
+        }
+
+        return $;
+    }
+};
+
+window.require = (moduleName) => {
+    if (moduleName === 'cheerio') return CheerioShim;
+    
+    if (moduleName === 'node-fetch' || moduleName === 'fetch') return window.fetch.bind(window);
+    
+    return {}; 
+};
+
+window.module = { exports: {} };
+
+class MockBrowser {
+    constructor() {
+    }
+
+    async scrape(url, pageFn, options = {}) {
+        emulatorLog(`[Browser] Scraping: ${url}`, 'info');
+        
+        try {
+            const response = await fetch(url);
+            if (!response.ok) throw new Error(`HTTP ${response.status}`);
+            const html = await response.text();
+
+            const parser = new DOMParser();
+            const doc = parser.parseFromString(html, "text/html");
+
+            return await this.executePageFn(pageFn, doc);
+
+        } catch (error) {
+            emulatorLog(`[Browser] Error: ${error.message}`, 'error');
+            if (error.name === 'TypeError' && error.message.includes('Failed to fetch')) {
+                emulatorLog('Tip: This looks like a CORS error. Ensure you have a "Allow CORS" extension enabled in your browser for testing.', 'warn');
+            }
+            throw error;
+        }
+    }
+
+    async executePageFn(pageFn, virtualDoc) {
+        const fnString = pageFn.toString();
+        const wrapper = new Function("document", `return (${fnString})();`);
+        return wrapper(virtualDoc);
+    }
+}
+
+const codeInput = document.getElementById('code-input');
+const runBtn = document.getElementById('run-btn');
+const outputVisual = document.getElementById('visual-container');
+const outputJson = document.getElementById('json-content');
+const outputConsole = document.getElementById('console-content');
+
+const originalConsoleLog = console.log;
+const originalConsoleError = console.error;
+const originalConsoleWarn = console.warn;
+
+function captureLogs() {
+    console.log = (...args) => {
+        originalConsoleLog(...args);
+        emulatorLog(args.map(a => typeof a === 'object' ? JSON.stringify(a) : String(a)).join(' '), 'info');
+    };
+    console.error = (...args) => {
+        originalConsoleError(...args);
+        emulatorLog(args.map(a => typeof a === 'object' ? JSON.stringify(a) : String(a)).join(' '), 'error');
+    };
+    console.warn = (...args) => {
+        originalConsoleWarn(...args);
+        emulatorLog(args.map(a => typeof a === 'object' ? JSON.stringify(a) : String(a)).join(' '), 'warn');
+    };
+}
+
+function emulatorLog(msg, type = 'info') {
+    const div = document.createElement('div');
+    div.className = `log-entry log-${type}`;
+    div.textContent = `[${new Date().toLocaleTimeString()}] ${msg}`;
+    outputConsole.appendChild(div);
+    outputConsole.scrollTop = outputConsole.scrollHeight;
+}
+
+window.switchTab = (tabName) => {
+    ['visual', 'json', 'console'].forEach(t => {
+        document.getElementById(`output-${t}`).classList.add('hidden');
+    });
+    document.getElementById(`output-${tabName}`).classList.remove('hidden');
+    
+    document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));
+    if (event && event.target) event.target.classList.add('active');
+};
+
+runBtn.addEventListener('click', async () => {
+    outputVisual.innerHTML = '';
+    outputJson.textContent = '';
+    outputConsole.innerHTML = '';
+    window.module.exports = {}; 
+    captureLogs();  
+
+    const code = codeInput.value;
+    const functionName = document.getElementById('func-select').value;
+    const argInput = document.getElementById('arg-input').value;
+    const pageInput = parseInt(document.getElementById('page-input').value) || 1;
+
+    if (!code.trim()) {
+        alert("Please paste extension code first.");
+        return;
+    }
+
+    emulatorLog("--- Starting Execution ---");
+
+    try {
+        try {
+            new Function(code)();
+        } catch (e) {
+            throw new Error(`Syntax/Runtime Error in Extension Code: ${e.message}`);
+        }
+
+        const exports = window.module.exports;
+        const keys = Object.keys(exports);
+        if (keys.length === 0) throw new Error("No class found in module.exports. Did you add 'module.exports = { ClassName };'?");
+        
+        const ExtensionClass = exports[keys[0]];
+        emulatorLog(`Loaded Class: ${keys[0]}`, 'info');
+
+        const browserInstance = new MockBrowser();
+        const extension = new ExtensionClass('node-fetch', 'cheerio', browserInstance);
+
+        if (typeof extension[functionName] !== 'function') {
+            throw new Error(`Function '${functionName}' not found in class '${keys[0]}'.`);
+        }
+
+        emulatorLog(`Calling ${functionName}('${argInput}', ${pageInput})...`);
+        
+        document.querySelector('.loading-state').classList.remove('hidden');
+        
+        let result;
+        if (functionName === 'fetchSearchResult') {
+            result = await extension.fetchSearchResult(argInput, pageInput);
+        } else if (functionName === 'fetchInfo') {
+            result = await extension.fetchInfo(argInput);
+        } else if (functionName === 'findChapters') {
+            result = await extension.findChapters(argInput);
+        } else if (functionName === 'findChapterPages') {
+            result = await extension.findChapterPages(argInput);
+        }
+
+        document.querySelector('.loading-state').classList.add('hidden');
+
+        emulatorLog("Data received. Rendering...", 'info');
+        renderJson(result);
+        renderVisuals(result, functionName);
+        
+        if (result) switchTab('visual');
+
+    } catch (err) {
+        document.querySelector('.loading-state').classList.add('hidden');
+        emulatorLog(err.message, 'error');
+        console.error(err); 
+    }
+});
+
+function renderJson(data) {
+    outputJson.textContent = JSON.stringify(data, null, 2);
+}
+
+function renderVisuals(data, type) {
+    outputVisual.innerHTML = '';
+
+    if (!data) {
+        outputVisual.innerHTML = '<div style="padding:1rem; color: #a1a1aa;">No data returned (null/undefined). Check Console for errors.</div>';
+        return;
+    }
+
+    if (type === 'fetchSearchResult') {
+        if (data.results && Array.isArray(data.results) && data.results.length > 0) {
+            data.results.forEach(item => {
+                const card = document.createElement('div');
+                card.className = 'visual-card';
+                
+                const imgSrc = item.image || item.cover || item.sampleImageUrl || '';
+                
+                card.innerHTML = `
+                    <img src="${imgSrc}" onerror="this.onerror=null;this.src='https://via.placeholder.com/150?text=Error';">
+                    <div class="title" title="${item.title || item.id}">
+                        ${item.title || ('ID: ' + item.id)}
+                    </div>
+                `;
+                outputVisual.appendChild(card);
+            });
+        } else {
+            outputVisual.innerHTML = '<div style="padding:1rem">No results found in "results" array.</div>';
+        }
+    }
+    else if (type === 'findChapters') {
+         if (data.chapters && Array.isArray(data.chapters)) {
+            const list = document.createElement('div');
+            list.style.cssText = 'display: flex; flex-direction: column; width: 100%; gap: 5px;';
+            
+            data.chapters.forEach(chap => {
+                const row = document.createElement('div');
+                row.className = 'visual-chapter';
+                row.style.cssText = 'padding: 10px; background: var(--bg-surface); border-radius: 4px;';
+                row.innerHTML = `<span style="color: var(--accent);">Ch. ${chap.chapter}</span> - ${chap.title} <br><small style="color:#666">${chap.id}</small>`;
+                list.appendChild(row);
+            });
+            outputVisual.appendChild(list);
+         } else {
+             outputVisual.innerHTML = '<div>No chapters found. Check JSON.</div>';
+         }
+    }
+    else if (type === 'findChapterPages') {
+        if (Array.isArray(data)) {
+            data.forEach(page => {
+                if(page.type === 'text') {
+                     const div = document.createElement('div');
+                     div.innerHTML = page.content;
+                     div.style.cssText = 'background: #fff; color: #000; padding: 20px; border-radius: 8px; margin-bottom: 20px;';
+                     outputVisual.appendChild(div);
+                } else {
+                    const img = document.createElement('img');
+                    img.src = page.url;
+                    img.style.cssText = 'max-width: 100%; margin-bottom: 10px; border-radius: 4px;';
+                    outputVisual.appendChild(img);
+                }
+            });
+        } else {
+            outputVisual.innerHTML = '<div>No pages array returned.</div>';
+        }
+    }
+    else if (type === 'fetchInfo') {
+        const container = document.createElement('div');
+        container.style.padding = '1rem';
+        if (data.fullImage) {
+            container.innerHTML += `<img src="${data.fullImage}" style="max-height: 300px; display: block; margin-bottom: 1rem;">`;
+        }
+        container.innerHTML += `<pre>${JSON.stringify(data, null, 2)}</pre>`;
+        outputVisual.appendChild(container);
+    }
+}

src/ipc/db-handlers.js

@@ -19,7 +19,7 @@ module.exports = function (db) {
           'INSERT INTO favorites (id, title, image_url, thumbnail_url, tags) VALUES (?, ?, ?, ?, ?)';
         db.run(
           stmt,
-          [fav.id, fav.title, fav.imageUrl, fav.thumbnailUrl, fav.tags],
+          [fav.id, fav.title, fav.image_url, fav.thumbnail_url, fav.tags],
           function (err) {
             if (err) {
               if (err.code.includes('SQLITE_CONSTRAINT')) {

src/marketplace.js

@@ -1,24 +1,25 @@
+const GITEA_INSTANCE = 'https://git.waifuboard.app';
 const REPO_OWNER = 'ItsSkaiya';
 const REPO_NAME = 'WaifuBoard-Extensions';
-const API_URL = `https://api.github.com/repos/${REPO_OWNER}/${REPO_NAME}/contents/extensions?ref=main`;
+
+let DETECTED_BRANCH = 'main'; 
+
+const API_URL_BASE = `${GITEA_INSTANCE}/api/v1/repos/${REPO_OWNER}/${REPO_NAME}/contents`;
 
 document.addEventListener('DOMContentLoaded', async () => {
     const browseGrid = document.getElementById('marketplace-grid');
     const installedGrid = document.getElementById('installed-grid');
-
     const statTotal = document.getElementById('stat-total');
     const statInstalled = document.getElementById('stat-installed');
-
     const tabBrowse = document.getElementById('tab-browse');
     const tabInstalled = document.getElementById('tab-installed');
     const viewBrowse = document.getElementById('view-browse');
     const viewInstalled = document.getElementById('view-installed');
+    const messageBar = document.getElementById('message-bar');
 
     let allRemoteExtensions = [];
     let installedExtensionsList = []; 
 
-    const messageBar = document.getElementById('message-bar');
-
     function showMessage(msg, type = 'success') {
         if (!messageBar) return;
         messageBar.textContent = msg;
@@ -34,56 +35,17 @@ document.addEventListener('DOMContentLoaded', async () => {
 
     function showRestartToast() {
         if (document.getElementById('restart-toast')) return;
-
         const toast = document.createElement('div');
         toast.id = 'restart-toast';
-        toast.style.cssText = `
+        toast.style.cssText = `position: fixed; bottom: 20px; right: 20px; background: #1f2937; border: 1px solid var(--accent); border-radius: 12px; padding: 1rem 1.5rem; display: flex; align-items: center; gap: 1rem; box-shadow: 0 10px 30px rgba(0,0,0,0.5); z-index: 2000; animation: slideUp 0.3s ease-out;`;
-            position: fixed;
+        toast.innerHTML = `<div style="display:flex; flex-direction:column;"><span style="color:#fff; font-weight:600;">Restart Required</span><span style="color:#9ca3af; font-size:0.8rem;">Changes will apply after restart.</span></div><button id="btn-restart-now" style="background: var(--accent); color: white; border: none; padding: 0.5rem 1rem; border-radius: 8px; cursor: pointer; font-weight: 700; font-size: 0.85rem; transition: 0.2s;">Restart Now</button>`;
-            bottom: 20px;
-            right: 20px;
-            background: #1f2937;
-            border: 1px solid var(--accent);
-            border-radius: 12px;
-            padding: 1rem 1.5rem;
-            display: flex;
-            align-items: center;
-            gap: 1rem;
-            box-shadow: 0 10px 30px rgba(0,0,0,0.5);
-            z-index: 2000;
-            animation: slideUp 0.3s ease-out;
-        `;
-
-        toast.innerHTML = `
-            <div style="display:flex; flex-direction:column;">
-                <span style="color:#fff; font-weight:600;">Restart Required</span>
-                <span style="color:#9ca3af; font-size:0.8rem;">Changes will apply after restart.</span>
-            </div>
-            <button id="btn-restart-now" style="
-                background: var(--accent);
-                color: white;
-                border: none;
-                padding: 0.5rem 1rem;
-                border-radius: 8px;
-                cursor: pointer;
-                font-weight: 700;
-                font-size: 0.85rem;
-                transition: 0.2s;
-            ">Restart Now</button>
-        `;
-
         document.body.appendChild(toast);
-
         const btn = document.getElementById('btn-restart-now');
         btn.onmouseover = () => btn.style.opacity = '0.9';
         btn.onmouseout = () => btn.style.opacity = '1';
-
         btn.onclick = () => {
-            if (window.api && typeof window.api.restartApp === 'function') {
+            if (window.api && typeof window.api.restartApp === 'function') window.api.restartApp();
-                window.api.restartApp();
+            else alert("Please close and reopen the application manually.");
-            } else {
-                console.error("Restart API not found in window.api");
-                alert("Please close and reopen the application manually.");
-            }
         };
     }
 
@@ -117,44 +79,67 @@ document.addEventListener('DOMContentLoaded', async () => {
 
     async function fetchRemoteExtensions() {
         try {
-            const res = await fetch(API_URL);
+            let res = await fetch(API_URL_BASE);
-            if (!res.ok) throw new Error(`GitHub API Error: ${res.status}`);
+            
+            if (res.status === 404) {
+                console.warn("Default branch failed, trying 'main'...");
+                DETECTED_BRANCH = 'main';
+                res = await fetch(`${API_URL_BASE}?ref=main`);
+            }
+            if (res.status === 404) {
+                console.warn("Main branch failed, trying 'master'...");
+                DETECTED_BRANCH = 'master';
+                res = await fetch(`${API_URL_BASE}?ref=master`);
+            }
+
+            if (!res.ok) throw new Error(`Gitea API Error: ${res.status}`);
+
             const data = await res.json();
             
+            if (Array.isArray(data)) {
                 allRemoteExtensions = data.filter(item => item.name.endsWith('.js'));
                 renderBrowseGrid(allRemoteExtensions);
                 updateStats();
+            } else {
+                throw new Error("Invalid API response format");
+            }
+
         } catch (e) {
+            console.error(e);
             if(browseGrid) browseGrid.innerHTML = `<div class="loading-state"><p style="color:#ef4444">Failed to load marketplace.<br>${e.message}</p></div>`;
         }
     }
 
+    function getRawUrl(filename) {
+        return `${GITEA_INSTANCE}/${REPO_OWNER}/${REPO_NAME}/raw/branch/main/${filename}`;
+    }
+
     async function getExtensionDetails(url) {
         try {
             const res = await fetch(url);
+            if (!res.ok) throw new Error(`Fetch failed: ${res.status}`);
             const text = await res.text();
             
-            const baseUrlMatch = text.match(/baseUrl\s*=\s*["']([^"']+)["']/);
+            const regex = /(?:this\.|const\s+|let\s+|var\s+)?baseUrl\s*=\s*(["'`])(.*?)\1/i;
-            let baseUrl = baseUrlMatch ? baseUrlMatch[1] : null;
+            const match = text.match(regex);
             
-            if (baseUrl) {
+            let finalHostname = null;
+            if (match && match[2]) {
+                let rawUrl = match[2].trim();
+                if (!rawUrl.startsWith('http')) rawUrl = 'https://' + rawUrl;
                 try {
-                    const urlObj = new URL(baseUrl);
+                    const urlObj = new URL(rawUrl);
-                    baseUrl = urlObj.hostname;
+                    finalHostname = urlObj.hostname;
-                } catch(e) {
+                } catch(e) {}
-                    console.warn("Invalid URL in extension:", baseUrl);
-                }
             }
 
             const classMatch = text.match(/class\s+(\w+)/);
             const name = classMatch ? classMatch[1] : null;
 
             let type = 'Image';
-            if (text.includes('type = "book-board"') || text.includes("type = 'book-board'")) {
+            if (text.includes('type = "book-board"') || text.includes("type = 'book-board'")) type = 'Book';
-                type = 'Book';
-            }
 
-            return { baseUrl, name, type };
+            return { baseUrl: finalHostname, name, type };
         } catch (e) {
             return { baseUrl: null, name: null, type: 'Unknown' };
         }
@@ -163,29 +148,32 @@ document.addEventListener('DOMContentLoaded', async () => {
     async function createCard(item, isLocalOnly = false) {
         const isInstalled = installedExtensionsList.includes(item.name);
         
-        const downloadUrl = item.download_url || null; 
+        const downloadUrl = getRawUrl(item.name);
-        let sizeKB = item.size ? (item.size / 1024).toFixed(1) + ' KB' : 'Local';
 
+        let sizeKB = item.size ? (item.size / 1024).toFixed(1) + ' KB' : 'Local';
         let iconUrl = '';
         let displayName = item.name.replace('.js', '');
         let typeLabel = 'Extension';
         let typeClass = 'type-image';
         
-        if (downloadUrl) {
+        const fallbackIcon = `data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22gray%22 stroke-width=%222%22><rect x=%223%22 y=%223%22 width=%2218%22 height=%2218%22 rx=%222%22/></svg>`;
+
+        if (!isLocalOnly) {
             const details = await getExtensionDetails(downloadUrl);
             displayName = details.name || displayName;
-            const domain = details.baseUrl || 'github.com';
+            
-            iconUrl = `https://www.google.com/s2/favicons?domain=${domain}&sz=128`;
+            if (details.baseUrl) {
+                iconUrl = `https://www.google.com/s2/favicons?domain=${details.baseUrl}&sz=128`;
+            } else {
+                iconUrl = `https://ui-avatars.com/api/?name=${displayName}&background=1f2937&color=fff&length=1`;
+            }
 
             if (details.type === 'Book') {
                 typeLabel = 'Book Board';
                 typeClass = 'type-book';
-            } else {
-                typeLabel = 'Image Board';
-                typeClass = 'type-image';
             }
         } else {
-            iconUrl = `https://ui-avatars.com/api/?name=${displayName}&background=18181b&color=fff&length=1`;
+            iconUrl = `https://ui-avatars.com/api/?name=${displayName}&background=1f2937&color=fff&length=1`;
         }
 
         const card = document.createElement('div');
@@ -199,16 +187,14 @@ document.addEventListener('DOMContentLoaded', async () => {
         const renderInner = (installed) => `
             <div class="card-header-row">
                 <div class="ext-icon-box">
-                    <img src="${iconUrl}" class="ext-icon" onerror="this.src='data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22gray%22 stroke-width=%222%22><rect x=%223%22 y=%223%22 width=%2218%22 height=%2218%22 rx=%222%22/></svg>'">
+                    <img src="${iconUrl}" class="ext-icon" onerror="this.onerror=null; this.src='${fallbackIcon}'">
                 </div>
                 <span class="type-badge ${typeClass}">${typeLabel}</span>
             </div>
-
             <div class="ext-info">
                 <h3 class="ext-name">${displayName}</h3>
                 <div class="ext-filename">${item.name}</div>
             </div>
-            
             <div class="card-footer">
                 <div class="ext-status-group">${installed ? `<span class="status-badge status-installed">${checkIcon} Installed</span>` : ''}
                     <span class="ext-size-badge">${sizeKB}</span>
@@ -233,12 +219,9 @@ document.addEventListener('DOMContentLoaded', async () => {
                     installedExtensionsList = installedExtensionsList.filter(n => n !== item.name);
                     card.innerHTML = renderInner(false);
                     updateStats();
-                    
                     if (tabInstalled.classList.contains('active')) {
                         card.remove();
-                        if (installedGrid.children.length === 0) {
+                        if (installedGrid.children.length === 0) installedGrid.innerHTML = '<div class="loading-state"><p>No extensions installed.</p></div>';
-                            installedGrid.innerHTML = '<div class="loading-state"><p>No extensions installed.</p></div>';
-                        }
                     }
                     showRestartToast();
                 } else {
@@ -250,6 +233,7 @@ document.addEventListener('DOMContentLoaded', async () => {
                 btn.innerHTML = '<svg class="spinner" viewBox="0 0 50 50"><circle cx="25" cy="25" r="20" fill="none" stroke="currentColor" stroke-width="5"></circle></svg>';
                 
                 const success = await window.api.installExtension(item.name, downloadUrl);
+                
                 if (success) {
                     installedExtensionsList.push(item.name);
                     card.innerHTML = renderInner(true);
@@ -258,6 +242,7 @@ document.addEventListener('DOMContentLoaded', async () => {
                     showRestartToast();
                 } else {
                     showMessage('Failed to install', 'error');
+                    console.error("Install failed for URL:", downloadUrl);
                     btn.innerHTML = originalHTML;
                 }
             }
@@ -284,7 +269,6 @@ document.addEventListener('DOMContentLoaded', async () => {
             installedGrid.innerHTML = '<div class="loading-state"><p>No extensions installed.</p></div>';
             return;
         }
-
         for (const filename of installedExtensionsList) {
             const remoteData = allRemoteExtensions.find(r => r.name === filename);
             const item = remoteData || { name: filename, download_url: null, size: 0 };

src/renderer.js

@@ -137,7 +137,7 @@ document.addEventListener('DOMContentLoaded', async () => {
 
       try {
           const response = await window.api.getChapters(currentSource, id);
-          currentChapters = response.success ? response.data : [];
+          currentChapters = response.success ? response.data.chapters : [];
           currentChapterPage = 1;
           
           if (!highResCover && response.extra && response.extra.cover) {

src/updateNotification.js

@@ -1,6 +1,6 @@
-const GITHUB_OWNER = 'ItsSkaiya'; 
+const Gitea_OWNER = 'ItsSkaiya'; 
-const GITHUB_REPO = 'WaifuBoard'; 
+const Gitea_REPO = 'WaifuBoard'; 
-const CURRENT_VERSION = 'v1.6.2'; 
+const CURRENT_VERSION = 'v1.6.3'; 
 const UPDATE_CHECK_INTERVAL = 5 * 60 * 1000; 
 
 let currentVersionDisplay;
@@ -58,20 +58,36 @@ function isVersionOutdated(versionA, versionB) {
 }
 
 async function checkForUpdates() {
-    console.log(`Checking for updates for ${GITHUB_OWNER}/${GITHUB_REPO}...`);
+    console.log(`Checking for updates for ${Gitea_OWNER}/${Gitea_REPO}...`);
-    const apiUrl = `https://api.github.com/repos/${GITHUB_OWNER}/${GITHUB_REPO}/releases/latest`;
+    
+    const apiUrl = `https://git.waifuboard.app/api/v1/repos/${Gitea_OWNER}/${Gitea_REPO}/releases/latest`;
 
     try {
-        const response = await fetch(apiUrl);
+        const response = await fetch(apiUrl, {
+            method: 'GET',
+            headers: {
+                'Accept': 'application/json'
+            }
+        });
 
         if (!response.ok) {
-            throw new Error(`GitHub API error: ${response.statusText}`);
+            if (response.status === 404) {
+                console.info('No releases found for this repository.');
+                return;
+            }
+            throw new Error(`Gitea API error: ${response.status} ${response.statusText}`);
         }
 
         const data = await response.json();
         
         const latestVersion = data.tag_name; 
-        console.log(`Latest GitHub Release: ${latestVersion}`);
+        
+        if (!latestVersion) {
+            console.warn("Release found but no tag_name present");
+            return;
+        }
+
+        console.log(`Latest Gitea Release: ${latestVersion}`);
 
         if (isVersionOutdated(CURRENT_VERSION, latestVersion)) {
             console.warn('Update available!');
@@ -82,6 +98,6 @@ async function checkForUpdates() {
         }
 
     } catch (error) {
-        console.error('Failed to fetch GitHub release:', error);
+        console.error('Failed to fetch Gitea release:', error);
     }
 }

views/books.html

@@ -40,6 +40,10 @@
         </nav>
 
         <nav style="display: flex; flex-direction: column; gap: 0.5rem; margin-top: auto;">
+            <a href="emulator.html" class="nav-button" title="Emulator">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-code-xml-icon lucide-code-xml"><path d="m18 16 4-4-4-4"/><path d="m6 8-4 4 4 4"/><path d="m14.5 4-5 16"/></svg>
+                <span>Emulator</span>
+            </a>
             <a href="marketplace.html" class="nav-button" title="Marketplace">
                 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-puzzle-icon lucide-puzzle"><path d="M15.39 4.39a1 1 0 0 0 1.68-.474 2.5 2.5 0 1 1 3.014 3.015 1 1 0 0 0-.474 1.68l1.683 1.682a2.414 2.414 0 0 1 0 3.414L19.61 15.39a1 1 0 0 1-1.68-.474 2.5 2.5 0 1 0-3.014 3.015 1 1 0 0 1 .474 1.68l-1.683 1.682a2.414 2.414 0 0 1-3.414 0L8.61 19.61a1 1 0 0 0-1.68.474 2.5 2.5 0 1 1-3.014-3.015 1 1 0 0 0 .474-1.68l-1.683-1.682a2.414 2.414 0 0 1 0-3.414L4.39 8.61a1 1 0 0 1 1.68.474 2.5 2.5 0 1 0 3.014-3.015 1 1 0 0 1-.474-1.68l1.683-1.682a2.414 2.414 0 0 1 3.414 0z"/></svg>
                 <span>Marketplace</span>

views/emulator.html

@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>WaifuBoard Extension Emulator</title>
+    <link rel="stylesheet" href="styles/home.css">
+    <link rel="stylesheet" href="styles/emulator.css">
+</head>
+
+<body>
+
+    <aside class="sidebar">
+        <a href="index.html" class="nav-button" title="Image Boards">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <rect x="3" y="3" width="7" height="7"></rect>
+                <rect x="14" y="3" width="7" height="7"></rect>
+                <rect x="14" y="14" width="7" height="7"></rect>
+                <rect x="3" y="14" width="7" height="7"></rect>
+            </svg>
+            <span>Back To Home</span>
+        </a>
+
+        <button class="nav-button active" title="Emulator">
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-code-xml-icon lucide-code-xml"><path d="m18 16 4-4-4-4"/><path d="m6 8-4 4 4 4"/><path d="m14.5 4-5 16"/></svg>
+            <span>Emulator</span>
+        </button>
+        <button class="nav-button" title="Reset" onclick="window.location.reload()">
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trash2-icon lucide-trash-2"><path d="M10 11v6"/><path d="M14 11v6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/><path d="M3 6h18"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
+            <span>Reset</span>
+        </button>
+    </aside>
+
+    <div class="main-wrapper">
+        <header class="top-header">
+            <h3>Extension Emulator</h3>
+        </header>
+
+        <div class="emulator-container">
+            <div class="editor-pane">
+                <div class="control-bar" style="background: transparent; border: none; padding: 0;">
+                    <h4 style="margin:0">Extension Code</h4>
+                    <span style="font-size: 0.8rem; color: var(--text-tertiary); margin-left: auto;">Paste your .js file
+                        here</span>
+                </div>
+                <textarea id="code-input" class="code-editor" spellcheck="false"
+                    placeholder="// Paste your extension class here..."></textarea>
+            </div>
+
+            <div class="preview-pane">
+                <div class="control-bar">
+                    <div class="control-group">
+                        <label>Function</label>
+                        <select id="func-select" class="control-input">
+                            <option value="fetchSearchResult">fetchSearchResult (Search)</option>
+                            <option value="fetchInfo">fetchInfo (Image Details)</option>
+                            <option value="findChapters">findChapters (Manga/Novel)</option>
+                            <option value="findChapterPages">findChapterPages (Read)</option>
+                        </select>
+                    </div>
+
+                    <div class="control-group">
+                        <label>Query / ID / URL</label>
+                        <input type="text" id="arg-input" class="control-input" value=""
+                            placeholder="Search query or ID">
+                    </div>
+
+                    <div class="control-group" style="max-width: 80px;">
+                        <label>Page</label>
+                        <input type="number" id="page-input" class="control-input" value="1" min="1">
+                    </div>
+
+                    <button class="btn-run" id="run-btn">Run</button>
+                </div>
+
+                <div style="display: flex; flex-direction: column; flex: 1; overflow: hidden; position: relative;">
+                    <div class="tabs">
+                        <button class="tab-btn active" onclick="switchTab('visual')">Visual</button>
+                        <button class="tab-btn" onclick="switchTab('json')">JSON</button>
+                        <button class="tab-btn" onclick="switchTab('console')">Console</button>
+                    </div>
+
+                    <div id="output-visual" class="output-area">
+                        <div class="loading-state hidden">Loading...</div>
+                        <div id="visual-container"></div>
+                    </div>
+                    <div id="output-json" class="output-area hidden">
+                        <pre id="json-content"></pre>
+                    </div>
+                    <div id="output-console" class="output-area hidden">
+                        <div id="console-content"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script src="../src/emulator/emulator.js"></script>
+</body>
+
+</html>

views/favorites.html

@@ -39,6 +39,10 @@
         </nav>
 
         <nav style="display: flex; flex-direction: column; gap: 0.5rem; margin-top: auto;">
+            <a href="emulator.html" class="nav-button" title="Emulator">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-code-xml-icon lucide-code-xml"><path d="m18 16 4-4-4-4"/><path d="m6 8-4 4 4 4"/><path d="m14.5 4-5 16"/></svg>
+                <span>Emulator</span>
+            </a>
             <a href="marketplace.html" class="nav-button" title="Marketplace">
                 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-puzzle-icon lucide-puzzle"><path d="M15.39 4.39a1 1 0 0 0 1.68-.474 2.5 2.5 0 1 1 3.014 3.015 1 1 0 0 0-.474 1.68l1.683 1.682a2.414 2.414 0 0 1 0 3.414L19.61 15.39a1 1 0 0 1-1.68-.474 2.5 2.5 0 1 0-3.014 3.015 1 1 0 0 1 .474 1.68l-1.683 1.682a2.414 2.414 0 0 1-3.414 0L8.61 19.61a1 1 0 0 0-1.68.474 2.5 2.5 0 1 1-3.014-3.015 1 1 0 0 0 .474-1.68l-1.683-1.682a2.414 2.414 0 0 1 0-3.414L4.39 8.61a1 1 0 0 1 1.68.474 2.5 2.5 0 1 0 3.014-3.015 1 1 0 0 1-.474-1.68l1.683-1.682a2.414 2.414 0 0 1 3.414 0z"/></svg>
                 <span>Marketplace</span>

views/index.html

@@ -43,6 +43,10 @@
         </nav>
 
         <nav style="display: flex; flex-direction: column; gap: 0.5rem; margin-top: auto;">
+            <a href="emulator.html" class="nav-button" title="Emulator">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-code-xml-icon lucide-code-xml"><path d="m18 16 4-4-4-4"/><path d="m6 8-4 4 4 4"/><path d="m14.5 4-5 16"/></svg>
+                <span>Emulator</span>
+            </a>
             <a href="marketplace.html" class="nav-button" title="Marketplace">
                 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-puzzle-icon lucide-puzzle"><path d="M15.39 4.39a1 1 0 0 0 1.68-.474 2.5 2.5 0 1 1 3.014 3.015 1 1 0 0 0-.474 1.68l1.683 1.682a2.414 2.414 0 0 1 0 3.414L19.61 15.39a1 1 0 0 1-1.68-.474 2.5 2.5 0 1 0-3.014 3.015 1 1 0 0 1 .474 1.68l-1.683 1.682a2.414 2.414 0 0 1-3.414 0L8.61 19.61a1 1 0 0 0-1.68.474 2.5 2.5 0 1 1-3.014-3.015 1 1 0 0 0 .474-1.68l-1.683-1.682a2.414 2.414 0 0 1 0-3.414L4.39 8.61a1 1 0 0 1 1.68.474 2.5 2.5 0 1 0 3.014-3.015 1 1 0 0 1-.474-1.68l1.683-1.682a2.414 2.414 0 0 1 3.414 0z"/></svg>
                 <span>Marketplace</span>

views/marketplace.html

@@ -40,6 +40,10 @@
         </nav>
 
         <nav style="display: flex; flex-direction: column; gap: 0.5rem; margin-top: auto;">
+            <a href="emulator.html" class="nav-button" title="Emulator">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-code-xml-icon lucide-code-xml"><path d="m18 16 4-4-4-4"/><path d="m6 8-4 4 4 4"/><path d="m14.5 4-5 16"/></svg>
+                <span>Emulator</span>
+            </a>
             <a href="marketplace.html" class="nav-button active" title="Marketplace">
                 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-puzzle-icon lucide-puzzle"><path d="M15.39 4.39a1 1 0 0 0 1.68-.474 2.5 2.5 0 1 1 3.014 3.015 1 1 0 0 0-.474 1.68l1.683 1.682a2.414 2.414 0 0 1 0 3.414L19.61 15.39a1 1 0 0 1-1.68-.474 2.5 2.5 0 1 0-3.014 3.015 1 1 0 0 1 .474 1.68l-1.683 1.682a2.414 2.414 0 0 1-3.414 0L8.61 19.61a1 1 0 0 0-1.68.474 2.5 2.5 0 1 1-3.014-3.015 1 1 0 0 0 .474-1.68l-1.683-1.682a2.414 2.414 0 0 1 0-3.414L4.39 8.61a1 1 0 0 1 1.68.474 2.5 2.5 0 1 0 3.014-3.015 1 1 0 0 1-.474-1.68l1.683-1.682a2.414 2.414 0 0 1 3.414 0z"/></svg>
                 <span>Marketplace</span>

views/settings.html

@@ -39,6 +39,10 @@
         </nav>
 
         <nav style="display: flex; flex-direction: column; gap: 0.5rem; margin-top: auto;">
+            <a href="emulator.html" class="nav-button" title="Emulator">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-code-xml-icon lucide-code-xml"><path d="m18 16 4-4-4-4"/><path d="m6 8-4 4 4 4"/><path d="m14.5 4-5 16"/></svg>
+                <span>Emulator</span>
+            </a>
             <a href="marketplace.html" class="nav-button" title="Marketplace">
                 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-puzzle-icon lucide-puzzle"><path d="M15.39 4.39a1 1 0 0 0 1.68-.474 2.5 2.5 0 1 1 3.014 3.015 1 1 0 0 0-.474 1.68l1.683 1.682a2.414 2.414 0 0 1 0 3.414L19.61 15.39a1 1 0 0 1-1.68-.474 2.5 2.5 0 1 0-3.014 3.015 1 1 0 0 1 .474 1.68l-1.683 1.682a2.414 2.414 0 0 1-3.414 0L8.61 19.61a1 1 0 0 0-1.68.474 2.5 2.5 0 1 1-3.014-3.015 1 1 0 0 0 .474-1.68l-1.683-1.682a2.414 2.414 0 0 1 0-3.414L4.39 8.61a1 1 0 0 1 1.68.474 2.5 2.5 0 1 0 3.014-3.015 1 1 0 0 1-.474-1.68l1.683-1.682a2.414 2.414 0 0 1 3.414 0z"/></svg>
                 <span>Marketplace</span>

views/styles/emulator.css

@@ -0,0 +1,196 @@
+.emulator-container {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1.5rem;
+    height: calc(100vh - var(--header-height));
+    padding: 1rem 2rem 2rem 2rem;
+    overflow: hidden;
+}
+
+.editor-pane,
+.preview-pane {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    height: 100%;
+    overflow: hidden;
+}
+
+.code-editor {
+    flex: 1;
+    background: var(--bg-sidebar);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-md);
+    color: #d4d4d8;
+    font-family: 'Consolas', 'Monaco', monospace;
+    font-size: 14px;
+    padding: 1rem;
+    resize: none;
+    line-height: 1.5;
+    tab-size: 4;
+}
+
+.code-editor:focus {
+    border-color: var(--accent);
+    box-shadow: 0 0 0 1px var(--accent-glow);
+}
+
+.control-bar {
+    display: flex;
+    gap: 0.5rem;
+    background: var(--bg-surface);
+    padding: 1rem;
+    border-radius: var(--radius-md);
+    border: 1px solid var(--border);
+    align-items: center;
+    flex-wrap: wrap;
+}
+
+.control-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    flex: 1;
+}
+
+.control-group label {
+    font-size: 0.75rem;
+    color: var(--text-secondary);
+    border: none;
+    padding: 0;
+    margin: 0;
+}
+
+.control-input {
+    background: var(--bg-base);
+    border: 1px solid var(--border);
+    color: var(--text-primary);
+    padding: 0.5rem;
+    border-radius: var(--radius-md);
+    font-size: 0.9rem;
+    width: 100%;
+}
+
+.btn-run {
+    background: var(--accent);
+    color: white;
+    border: none;
+    padding: 0.6rem 1.5rem;
+    border-radius: var(--radius-md);
+    font-weight: 600;
+    cursor: pointer;
+    height: 40px;
+    align-self: flex-end;
+    transition: 0.2s;
+}
+
+.btn-run:hover {
+    opacity: 0.9;
+    transform: translateY(-1px);
+}
+
+.tabs {
+    display: flex;
+    gap: 0.5rem;
+    border-bottom: 1px solid var(--border);
+    margin-bottom: 0.5rem;
+}
+
+.tab-btn {
+    background: transparent;
+    border: none;
+    color: var(--text-secondary);
+    padding: 0.5rem 1rem;
+    cursor: pointer;
+    border-bottom: 2px solid transparent;
+    font-weight: 500;
+}
+
+.tab-btn.active {
+    color: var(--accent);
+    border-bottom-color: var(--accent);
+}
+
+.output-area {
+    flex: 1;
+    background: var(--bg-sidebar);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-md);
+    overflow: auto;
+    padding: 1rem;
+    position: relative;
+}
+
+pre {
+    margin: 0;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    color: #a5b4fc;
+}
+
+.visual-card {
+    display: inline-flex;
+    flex-direction: column;
+    width: 150px;
+    margin: 0.5rem;
+    background: var(--bg-surface);
+    border-radius: var(--radius-md);
+    overflow: hidden;
+    border: 1px solid var(--border);
+    vertical-align: top;
+}
+
+.visual-card img {
+    width: 100%;
+    height: 200px;
+    object-fit: cover;
+    background: #27272a;
+}
+
+.visual-card .title {
+    padding: 0.5rem;
+    font-size: 0.8rem;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.visual-chapter {
+    padding: 0.5rem;
+    border-bottom: 1px solid var(--border);
+    cursor: pointer;
+}
+
+.visual-chapter:hover {
+    background: var(--bg-surface-hover);
+}
+
+.log-entry {
+    font-family: monospace;
+    border-bottom: 1px solid var(--border);
+    padding: 2px 0;
+}
+
+.log-info {
+    color: #60a5fa;
+}
+
+.log-warn {
+    color: #facc15;
+}
+
+.log-error {
+    color: #f87171;
+}
+
+.loading-state {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: var(--text-secondary);
+}
+
+.loading-state.hidden {
+    display: none;
+}