refactor: added the build and zip process and done refactoring

.gitignore

@@ -0,0 +1,29 @@
+# Dependencies
+node_modules/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Build output
+dist/
+*.zip
+
+# IDE files
+.vscode/
+.idea/
+*.swp
+*.swo
+
+# OS files
+.DS_Store
+Thumbs.db
+
+# Logs
+*.log
+
+# Environment files
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local

README.md

@@ -1,17 +1,36 @@
 # Diver
 
-> Dive deep into elements of your webpage. Highlights all the elements of the page
+> A developer tool that adds colorful outlines to all DOM elements on a webpage, making it easy to visualize page structure and debug layout issues.
 
-Diver is a chrome extension designed to enhance your web browsing experience by providing a unique way to interact with web elements. With a simple click, Diver adds outlines to every element on a webpage, allowing you to visualize the structure and hierarchy of the page's content.
+Diver is a Chrome extension that highlights all DOM elements on any webpage with colorful outlines. Perfect for web developers and designers to debug layout issues and understand page structure.
 
-Key Features:
+## 🚀 Features
 
-- Click to add outlines: With a single click, Diver adds outlines to every element on a webpage, highlighting their boundaries.
+- **One-Click Toggle**: Instantly add/remove colorful outlines from all page elements
+- **Visual Feedback**: Clear badge indicators (ON/OFF)
+- **Cross-Frame Support**: Works across all frames including iframes
+- **Lightweight**: Minimal performance impact
 
-- Toggle outlines on/off: Click again to remove the outlines, providing a clear view of the webpage while retaining the flexibility to quickly inspect elements again.
+## 🛠️ Installation
 
-The diver is user-friendly and lightweight, ensuring it seamlessly integrates into your browsing experience without slowing you down. It's a must-have tool for web developers and designers, enabling them to streamline their workflow and gain valuable insights into the structure of any webpage.
+### Chrome Web Store (Recommended)
+[![Add to Chrome](https://img.shields.io/badge/Add_to_Chrome-4285f4?style=for-the-badge&logo=google-chrome&logoColor=white)](https://chromewebstore.google.com/detail/diver/onfnfdmnccoaknhjinebmlncejnofhoc)
 
-Example Preview
+### From Source
+1. Clone: `git clone https://github.com/thoughtlessmind/diver.git`
+2. Open `chrome://extensions/`
+3. Enable "Developer mode"
+4. Click "Load unpacked" → Select project directory
+
+## 📸 Preview
 
 <img width="1280" alt="Diver-on-state" src="https://github.com/thoughtlessmind/diver/assets/51883613/b197abbe-587a-4f10-94c1-4d4d7e146350">
+
+## 🔗 Links
+
+- **[Chrome Web Store](https://chromewebstore.google.com/detail/diver/onfnfdmnccoaknhjinebmlncejnofhoc)** - Install directly
+- **[GitHub Repository](https://github.com/thoughtlessmind/diver)** - Source code
+
+## 📄 License
+
+MIT License - see [LICENSE](LICENSE) file for details.

addOutline.js

@@ -1,4 +1,4 @@
-[].forEach.call(document.querySelectorAll("*"), function (a) {
-  a.style.outline =
+document.querySelectorAll("*").forEach(function (element) {
+  element.style.outline =
     "1px solid #" + (~~(Math.random() * (1 << 24))).toString(16);
 });

background.js

@@ -1,33 +1,32 @@
-chrome.runtime.onInstalled.addListener(() => {
-  chrome.action.setBadgeText({
-    text: "",
-  });
-});
-
-const extensions = "https://developer.chrome.com/docs/extensions";
-const webstore = "https://developer.chrome.com/docs/webstore";
+// Simple and performant: use badge text as the source of truth
+// Empty badge = OFF, "ON" badge = ON
 
 chrome.action.onClicked.addListener(async (tab) => {
-  // Retrieve the action badge to check if the extension is 'ON' or 'OFF'
-  const prevState = await chrome.action.getBadgeText({ tabId: tab.id });
-  // Next state will always be the opposite
-  const nextState = prevState === "ON" ? "OFF" : "ON";
-
-  // Set the action badge to the next state
-  await chrome.action.setBadgeText({
-    tabId: tab.id,
-    text: nextState === "ON" ? "ON" : "",
-  });
-
-  if (nextState === "ON") {
+  // Get current state from badge (reliable and fast)
+  const currentBadge = await chrome.action.getBadgeText({ tabId: tab.id });
+  const isCurrentlyOn = currentBadge === "ON";
+
+  if (isCurrentlyOn) {
+    // Turn OFF: Remove outlines and clear badge
     await chrome.scripting.executeScript({
       target: { tabId: tab.id, allFrames: true },
-      files: ["addOutline.js"],
+      files: ["removeOutline.js"],
     });
-  } else if (nextState === "OFF") {
+
+    await chrome.action.setBadgeText({
+      tabId: tab.id,
+      text: "", // Empty = OFF state
+    });
+  } else {
+    // Turn ON: Add outlines and show badge
     await chrome.scripting.executeScript({
       target: { tabId: tab.id, allFrames: true },
-      files: ["removeOutline.js"],
+      files: ["addOutline.js"],
+    });
+
+    await chrome.action.setBadgeText({
+      tabId: tab.id,
+      text: "ON",
     });
   }
-});
+});

manifest.json

@@ -1,7 +1,7 @@
 {
   "name": "Diver",
   "manifest_version": 3,
-  "description": "Diver deep into elements of your webpage. Highlights all the elements of the page",
+  "description": "Adds colorful outlines to all DOM elements for easy page structure visualization and debugging.",
   "version": "0.0.0.1",
   "permissions": ["activeTab", "scripting"],
   "homepage_url": "https://github.com/thoughtlessmind/diver",