Bulk export and how to menu

Author: MrBlankCoding

Public/dashboard.html

@@ -252,6 +252,9 @@ <h2>General Settings</h2>
                 <button type="reset" id="resetSettingsBtn" class="secondary">
                   Reset to Defaults
                 </button>
+                <button type="button" id="exportAllBtn" class="secondary">
+                  Export All Scripts
+                </button>
               </div>
             </div>
           </form>
@@ -263,29 +266,45 @@ <h2>General Settings</h2>
           role="tabpanel"
           aria-labelledby="about-tab-btn"
         >
-          <div class="settings-section">
-            <h2>About CodeTweak</h2>
-            <p>
-              CodeTweak is a powerful browser extension that allows you to
-              inject custom JavaScript code into specific websites based on your
-              preferences.
-            </p>
-            <div class="version-pill">Version 1.0.0</div>
+          <div class="about-container">
+            <aside class="about-sidebar" role="navigation" aria-label="About navigation">
+              <button class="about-nav active" data-section="getting-started">Getting Started</button>
+              <button class="about-nav" data-section="installing">Installing Scripts</button>
+              <button class="about-nav" data-section="managing">Managing Scripts</button>
+              <button class="about-nav" data-section="creating">Creating Scripts</button>
+              <button class="about-nav" data-section="exporting">Exporting Scripts</button>
+            </aside>
+
+            <div class="about-content">
+              <div class="about-section active" id="getting-started">
+                <h2>Getting Started</h2>
+                <p>CodeTweak lets you run custom JavaScript ("user&nbsp;scripts") on the sites you choose. Click <em>New Script</em> on the dashboard, write or paste code, pick the target sites and save – that's it!</p>
+              </div>
+
+              <div class="about-section" id="installing">
+                <h2>Installing Scripts</h2>
+                <h3>Greasy Fork (1-click)</h3>
+                <p>Click <em>Browse Scripts</em> to open the Greasy&nbsp;Fork dialog, search for a script and press <em>Install</em>.</p>
+                <h3>Drag &amp; Drop</h3>
+                <p>Drag any <code>.js</code> or text file onto the dashboard to import it.</p>
+                <h3>Paste Code</h3>
+                <p>Open the editor, paste a script and click <em>Save</em>.</p>
+                <h3>In-app Greasy Fork search</h3>
+                <p>Use the search field inside the Greasy&nbsp;Fork modal to find scripts without leaving CodeTweak.</p>
+              </div>
 
-            <h3>How to Use</h3>
-            <ol>
-              <li>Create a script by clicking the "New Script" button</li>
-              <li>Specify the target website(s) where the script should run</li>
-              <li>Write your JavaScript code in the editor</li>
-              <li>
-                Choose when the script should run (page start, DOM ready, page
-                load, or when a specific element is loaded)
-              </li>
-              <li>
-                Save your script and it will automatically run when you visit
-                the specified websites
-              </li>
-            </ol>
+              <div class="about-section" id="managing">
+                <h2>Managing Scripts</h2>
+                <p>Use the <em>Scripts</em> table to enable/disable, edit, update, export or delete each script. Filters above the table help locate scripts quickly.</p>
+                <p>The badge on the extension icon shows how many scripts are active on the current tab.</p>
+              </div>
+
+              <div class="about-section" id="creating">
+                <h2>Creating Scripts</h2>
+                <p>The built-in editor supports syntax highlighting and lets you opt-in to Greasemonkey (GM) APIs such as <code>GM_getValue</code>, <code>GM_openInTab</code> and <code>GM_notification</code>. Toggle the checkboxes to inject the APIs you need.</p>
+                <p>You can also declare <code>@resource</code> and <code>@require</code> headers – the editor will fetch and bundle them automatically.</p>
+              </div>
+            </div>
           </div>
         </section>
       </main>

Public/dashboard.js

@@ -1,11 +1,13 @@
+/* global showNotification chrome */
 import { setupGreasyfork } from "./dashboard/dashboard-greasyfork.js";
 import {
   loadScripts,
   loadSettings,
   saveSettings,
   filterScripts,
 } from "./dashboard/dashboard-logic.js";
-import { setupTabs } from "./dashboard/dashboard-ui.js";
+import { setupTabs, setupAboutNav } from "./dashboard/dashboard-ui.js";
+import { parseUserScriptMetadata } from "./utils/metadataParser.js";
 
 function initDashboard() {
   const elements = {
@@ -14,6 +16,8 @@ function initDashboard() {
     scriptsList: document.getElementById("scriptsList"),
     emptyState: document.getElementById("emptyState"),
     saveSettingsBtn: document.getElementById("saveSettingsBtn"),
+    resetSettingsBtn: document.getElementById("resetSettingsBtn"),
+    exportAllBtn: document.getElementById("exportAllBtn"),
     tabs: document.querySelector(".tabs"),
     tabContents: document.querySelectorAll(".tab-content"),
     emptyStateCreateBtn: document.getElementById("emptyStateCreateBtn"),
@@ -47,7 +51,21 @@ function initDashboard() {
   loadScripts(elements, state);
   loadSettings(elements.settings);
   setupTabs(elements.tabs, elements.tabContents);
+  // about tab sidebar
+  setupAboutNav(document.querySelector("#about-tab .about-container"));
   setupGreasyfork(elements.greasyfork);
+  setupFileDragAndDrop();
+
+  // Listen for runtime messages to reflect updates from other parts of the extension
+  chrome.runtime.onMessage.addListener((message) => {
+    if (message.action === "scriptsUpdated") {
+      showNotification("Dashboard refreshed", "success");
+      // reload scripts while preserving filters
+      loadScripts(elements, state);
+    } else if (message.action === "settingsUpdated") {
+      showNotification("Settings updated", "success");
+    }
+  });
 }
 
 function setupEventListeners(elements, state) {
@@ -63,6 +81,13 @@ function setupEventListeners(elements, state) {
     saveSettings(elements.settings)
   );
 
+  elements.resetSettingsBtn?.addEventListener("click", () => {
+    showNotification("Settings reset to defaults", "success");
+  });
+
+  // bulk export
+  elements.exportAllBtn?.addEventListener("click", exportAllScripts);
+
   elements.filters.scriptSearch?.addEventListener(
     "input",
     debounce(() => filterScripts(elements, state), 300)
@@ -80,6 +105,111 @@ function setupEventListeners(elements, state) {
   elements.filters.runAtFilter?.addEventListener("change", filterChangeHandler);
 }
 
+function setupFileDragAndDrop() {
+  const prevent = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+  };
+
+  ["dragenter", "dragover"].forEach((evt) => {
+    document.addEventListener(evt, prevent, false);
+  });
+
+  document.addEventListener(
+    "drop",
+    async (e) => {
+      prevent(e);
+      const files = Array.from(e.dataTransfer?.files || []);
+      if (!files.length) return;
+
+      const validFiles = files.filter((f) => {
+        const ext = f.name.split(".").pop().toLowerCase();
+        return ["js", "txt"].includes(ext);
+      });
+
+      if (!validFiles.length) {
+        showNotification("Only .js and .txt files are supported", "warning");
+        return;
+      }
+
+      try {
+        const { scripts = [] } = await chrome.storage.local.get("scripts");
+        for (const file of validFiles) {
+          const code = await file.text();
+          const metadata = parseUserScriptMetadata(code);
+
+          const scriptData = {
+            name:
+              metadata.name ||
+              file.name.replace(/\.(txt|js)$/i, "") ||
+              "Imported Script",
+            author: metadata.author || "Anonymous",
+            description: metadata.description || "",
+            version: metadata.version || "1.0.0",
+            targetUrls: metadata.matches || ["*://*/*"],
+            code,
+            runAt: metadata.runAt || "document_end",
+            enabled: true,
+            id: crypto.randomUUID(),
+            createdAt: Date.now(),
+            updatedAt: Date.now(),
+            ...(metadata.resources && { resources: metadata.resources }),
+            ...(metadata.requires && { requires: metadata.requires }),
+            ...(metadata.license && { license: metadata.license }),
+            ...(metadata.icon && { icon: metadata.icon }),
+          };
+
+          if (metadata.gmApis) {
+            Object.keys(metadata.gmApis).forEach((flag) => {
+              scriptData[flag] = metadata.gmApis[flag];
+            });
+          }
+
+          scripts.push(scriptData);
+        }
+
+        await chrome.storage.local.set({ scripts });
+        chrome.runtime.sendMessage({ action: "scriptsUpdated" });
+        showNotification("Scripts imported successfully", "success");
+
+        // Refresh dashboard view
+        window.location.reload();
+      } catch (err) {
+        console.error("Import failed:", err);
+        showNotification("Failed to import scripts", "error");
+      }
+    },
+    false
+  );
+}
+
+async function exportAllScripts() {
+  console.log("Exporting all scripts");
+  try {
+    const { scripts = [] } = await chrome.storage.local.get("scripts");
+    if (!scripts.length) {
+      showNotification("No scripts to export", "warning");
+      return;
+    }
+    for (const script of scripts) {
+      const blob = new Blob([script.code], { type: "text/javascript" });
+      const url = URL.createObjectURL(blob);
+      const safeName = (script.name || "script")
+        .replace(/[^a-z0-9\- _]/gi, "_")
+        .replace(/\s+/g, "_");
+      chrome.downloads.download({
+        url,
+        filename: `CodeTweak Export/${safeName}.user.js`,
+        saveAs: false,
+      });
+    }
+    showNotification("All scripts exported", "success");
+  } catch (err) {
+    console.error("Export failed", err);
+    showNotification("Failed to export scripts", "error");
+  }
+}
+
 function debounce(func, delay) {
   let timeout;
   return function () {

Public/dashboard/dashboard-logic.js

@@ -125,7 +125,8 @@ async function loadSettings(settingsElements) {
       enableAllScripts: true,
       showNotifications: true,
       confirmBeforeRunning: false,
-      darkMode: true,
+      // follow system theme by default
+      darkMode: window.matchMedia("(prefers-color-scheme: dark)").matches,
     };
 
     // Apply defaults and update storage if needed

Public/dashboard/dashboard-ui.js

@@ -396,10 +396,45 @@ function escapeHtml(unsafe) {
     .replace(/&/g, "&")
     .replace(/</g, "&lt;")
     .replace(/>/g, "&gt;")
-    .replace(/"/g, "&quot;")
+    .replace(/\"/g, "&quot;")
     .replace(/'/g, "&#039;");
 }
 
+// ----------------------------------------------
+// About Tab helpers
+// ----------------------------------------------
+function setupAboutNav(aboutContainer) {
+  if (!aboutContainer) return;
+
+  const navButtons = aboutContainer.querySelectorAll(".about-nav");
+  const sections = aboutContainer.querySelectorAll(".about-section");
+
+  // ensure exporting section exists
+  const contentEl = aboutContainer.querySelector(".about-content");
+  if (contentEl && !contentEl.querySelector("#exporting")) {
+    contentEl.insertAdjacentHTML(
+      "beforeend",
+      `<div class="about-section" id="exporting">
+         <h2>Exporting Scripts</h2>
+         <p>Select the export icon in the <em>Scripts</em> table to download a script as a standalone <code>.user.js</code> file for sharing or backups.</p>
+       </div>`
+    );
+  }
+
+  navButtons.forEach((btn) => {
+    btn.addEventListener("click", () => {
+      navButtons.forEach((b) => {
+        b.classList.remove("active");
+      });
+      sections.forEach((s) => s.classList.remove("active"));
+
+      btn.classList.add("active");
+      const targetId = btn.dataset.section;
+      aboutContainer.querySelector(`#${targetId}`)?.classList.add("active");
+    });
+  });
+}
+
 // Expose helpers for other modules
 window.updateWebsiteFilterOptions = updateWebsiteFilterOptions;
 window.updateScriptsList = updateScriptsList;
@@ -408,6 +443,7 @@ window.escapeHtml = escapeHtml;
 
 export {
   setupTabs,
+  setupAboutNav,
   updateWebsiteFilterOptions,
   updateScriptsList,
   showNotification,

Public/manifest.json

@@ -13,6 +13,7 @@
     "contextMenus",
     "clipboardWrite",
     "notifications",
+    "downloads",
     "offscreen"
   ],
   "host_permissions": [

Public/styles/dashboard.css

@@ -755,6 +755,55 @@ input:checked + .slider:before {
   color: var(--text-primary);
 }
 
+.about-container {
+  display: flex;
+  gap: var(--space-lg);
+  align-items: flex-start;
+}
+
+.about-sidebar {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-xs);
+}
+
+.about-nav {
+  padding: var(--space-sm) var(--space-md);
+  border: 1px solid var(--border-secondary);
+  background: var(--bg-secondary);
+  border-radius: var(--radius-md);
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: var(--transition-all);
+  font-size: var(--text-sm);
+  text-align: left;
+}
+
+.about-nav:hover {
+  background: var(--bg-hover);
+  color: var(--primary);
+}
+
+.about-nav.active {
+  background: var(--primary);
+  border-color: var(--primary);
+  color: #fff;
+}
+
+.about-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.about-section {
+  display: none;
+}
+
+.about-section.active {
+  display: block;
+  animation: fadeIn var(--transition-slow) ease;
+}
+
 @keyframes slideIn {
   from {
     transform: translateX(100%);