docs: add privacy policy and extension documentation

src/router/index.js

@@ -2,6 +2,7 @@ import { createRouter, createWebHistory } from 'vue-router'
 import Main from '../components/Main.vue'
 import Passwords from '../components/tools/Passwords.vue'
 import ClipboardSniffer from '../components/tools/ClipboardSniffer.vue'
+import PrivacyPolicy from '../views/PrivacyPolicy.vue'
 
 const routes = [
   {
@@ -18,6 +19,11 @@ const routes = [
     path: '/clipboard-sniffer',
     name: 'ClipboardSniffer',
     component: ClipboardSniffer
+  },
+  {
+    path: '/extension-privacy-policy',
+    name: 'PrivacyPolicy',
+    component: PrivacyPolicy
   }
 ]
 

src/views/PrivacyPolicy.vue

@@ -0,0 +1,196 @@
+<script setup>
+import { ArrowLeft } from 'lucide-vue-next'
+</script>
+
+<template>
+  <div class="privacy-container">
+    <div class="privacy-content">
+      <header class="privacy-header">
+        <router-link to="/" class="back-link">
+          <ArrowLeft size="20" />
+          Back to Tools
+        </router-link>
+        <h1>Privacy Policy</h1>
+        <p class="last-updated">Last Updated: February 27, 2026</p>
+      </header>
+
+      <section>
+        <h2>1. Introduction</h2>
+        <p>
+          Welcome to Tools App ("we," "our," or "us"). We are committed to protecting your privacy.
+          This Privacy Policy explains how our Chrome Extension ("Tools App Extension") handles your data.
+        </p>
+      </section>
+
+      <section>
+        <h2>2. Data Collection and Usage</h2>
+        <p>
+          The Tools App Extension is designed with privacy as a priority. 
+          <strong>We do not collect, store, or transmit any of your personal data to external servers.</strong>
+        </p>
+        
+        <h3>Clipboard Data</h3>
+        <p>
+          The extension requires the <code>clipboardRead</code> permission to function. 
+          It reads text from your clipboard <strong>only</strong> when you explicitly enable the "Clipboard Sniffer" tool in the Tools App web interface.
+        </p>
+        <ul>
+          <li>Clipboard data is processed locally within your browser.</li>
+          <li>Data is sent directly from the extension to the open Tools App tab via a secure local communication channel.</li>
+          <li>Once you close the tab or stop the tool, the extension stops monitoring the clipboard immediately.</li>
+          <li>We do not have access to your clipboard history, and it is never uploaded to any cloud storage or third-party service.</li>
+        </ul>
+      </section>
+
+      <section>
+        <h2>3. Permissions</h2>
+        <p>The extension requests the following permissions for specific functional purposes:</p>
+        <ul>
+          <li><strong>clipboardRead:</strong> To detect copied text when the Sniffer tool is active.</li>
+          <li><strong>scripting:</strong> To communicate with the Tools App web page.</li>
+          <li><strong>storage:</strong> To save local user preferences (e.g., sound settings).</li>
+          <li><strong>alarms:</strong> To maintain the background process active during monitoring sessions.</li>
+        </ul>
+      </section>
+
+      <section>
+        <h2>4. Third-Party Services</h2>
+        <p>
+          Our extension operates independently and does not use any third-party analytics, tracking scripts, or advertising networks.
+        </p>
+      </section>
+
+      <section>
+        <h2>5. Changes to This Policy</h2>
+        <p>
+          We may update our Privacy Policy from time to time. We will notify you of any changes by posting the new Privacy Policy on this page.
+        </p>
+      </section>
+
+      <section>
+        <h2>6. Contact Us</h2>
+        <p>
+          If you have any questions about this Privacy Policy, please contact us via the repository or support channels provided in the Chrome Web Store listing.
+        </p>
+      </section>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.privacy-container {
+  min-height: 100vh;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  padding: 2rem;
+  background: var(--bg-gradient);
+  color: var(--text-color);
+}
+
+.privacy-content {
+  width: 100%;
+  max-width: 800px;
+  background: var(--glass-bg);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid var(--glass-border);
+  border-radius: 16px;
+  padding: 3rem;
+  box-shadow: var(--glass-shadow);
+}
+
+.privacy-header {
+  margin-bottom: 3rem;
+  border-bottom: 1px solid var(--glass-border);
+  padding-bottom: 2rem;
+}
+
+.back-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: var(--text-secondary);
+  text-decoration: none;
+  font-weight: 500;
+  margin-bottom: 1.5rem;
+  transition: color 0.2s;
+}
+
+.back-link:hover {
+  color: var(--primary-accent);
+}
+
+h1 {
+  font-size: 2.5rem;
+  margin: 0 0 0.5rem 0;
+  background: var(--title-gradient);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+
+.last-updated {
+  color: var(--text-secondary);
+  font-size: 0.9rem;
+}
+
+section {
+  margin-bottom: 2.5rem;
+}
+
+h2 {
+  font-size: 1.5rem;
+  margin-bottom: 1rem;
+  color: var(--text-strong);
+}
+
+h3 {
+  font-size: 1.1rem;
+  margin: 1.5rem 0 0.5rem 0;
+  color: var(--text-strong);
+}
+
+p {
+  line-height: 1.7;
+  color: var(--text-color);
+  margin-bottom: 1rem;
+}
+
+ul {
+  padding-left: 1.5rem;
+  margin-bottom: 1rem;
+}
+
+li {
+  margin-bottom: 0.5rem;
+  line-height: 1.6;
+  color: var(--text-color);
+}
+
+code {
+  background: rgba(0, 0, 0, 0.1);
+  padding: 0.2rem 0.4rem;
+  border-radius: 4px;
+  font-family: monospace;
+  font-size: 0.9em;
+}
+
+:global(:root[data-theme="dark"]) code {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+@media (max-width: 768px) {
+  .privacy-container {
+    padding: 1rem;
+  }
+  
+  .privacy-content {
+    padding: 1.5rem;
+  }
+  
+  h1 {
+    font-size: 2rem;
+  }
+}
+</style>