kishanhitk · kishanhitk · Apr 14, 2024 · Mar 24, 2024 · Mar 24, 2024 · Mar 24, 2024
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+# macOS hidden folder
+.DS_Store
diff --git a/README.md b/README.md
@@ -1,58 +1,57 @@
-# SnapSearch- Better Search on Arc
+# SnapSearch - Better Search on Arc
 
 SnapSearch is a Arc Browser Extension that enhances the search functionality in the Arc Browser. It allows users to select text on a webpage and search for it using their preferred search engine in a "Little Arc" window.
-<!-- Add image -->
-![SnapSearch](/icons/icon128.png)
 
 ## Features
 
-- Select text and search with Google, Bing, or DuckDuckGo
+- Select text and search with Google, Perplexity Al, Bing, DuckDuckGo or Kagi
 - The search results open in a "Little Arc" window
 
-## Installation
-### Chrome Web Store
-Install the extension from the [Chrome Web Store](https://chromewebstore.google.com/detail/snapsearch-better-search/aeblbpjamlpjfedjbkhnbiecmepbgkdo?hl=en).
+## Install Guide
 
-### Manual Installation
+The Chrome extension store lags in releases because Chrome's review process can take **up to** a month. Changes should go live within a few hours ideally. If you install from the source and seek quicker updates than Chrome's Web Store, go for it!
 
-1. Clone this repository to your local machine.
-2. Open Chrome and navigate to `chrome://extensions`.
-3. Enable Developer Mode by clicking the toggle switch at the top right.
-4. Click the `Load unpacked` button and select the directory where you cloned the repository.
+### Install from Chrome Web Store
 
-## Usage
+1. **Install SnapSearch:**
 
-![SnapSearch Demo](/screenshots/demo.jpg)
+   - Visit the [Chrome Web Store](https://chromewebstore.google.com/detail/snapsearch-better-search/aeblbpjamlpjfedjbkhnbiecmepbgkdo?hl=en).
+   - Click "Add to Chrome" and review the permissions required.
+   - Proceed by clicking "Add Extension."
 
-1. After installing the extension, right-click on any webpage in Arc Browser.
-2. Select the `Search with...` option in the context menu.
-3. Choose your preferred search engine from the popup.
+2. **Set your search engine**
+   - This can be done by opening the popup, and selecting one of the defined search engines.
 
-## Technical Implementation
-
-SnapSearch is built using JavaScript, HTML, and CSS. It uses the Context Menus API to add a context menu item that appears when the user selects text on a webpage. When this context menu item is clicked, the extension opens a new window with the search query, using the user's preferred search engine.
-
-The extension uses the Storage API to save the user's preferred search engine, and the Windows API to open new windows. On Arc Browser, this method opens a "Little Arc" window.
-
-## Permissions
+### Permissions Explained
 
 SnapSearch requires the following permissions:
 
 - `contextMenus`: To add a context menu item that appears when the user selects text.
 - `storage`: To save the user's preferred search engine.
 - `tabs`: To open new tabs with the search query.
 
+### Install from Source
 
-## Development
+1. **Clone the Source Repository:**
 
-To build this extension, you need to have Node.js and npm installed on your machine.
+   - Clone via terminal: `gh repo clone kishanhitk/SnapSearch` or `git clone https://github.com/kishanhitk/SnapSearch.git`
+   - Alternatively, download the source as a ZIP file from the repository.
 
-1. Clone this repository to your local machine.
-2. Run `npm install` to install the necessary dependencies.
-3. Make your changes to the code.
-4. Test the extension by loading it into Chrome as described in the Installation section.
+2. **Set Up the Extension in Chrome:**
+   - Access `chrome://extensions` in your browser.
+   - Enable developer mode (top right toggle).
+   - Select "Load Unpacked" and navigate to the `SnapSearch` folder.
+      - This will be the downloaded folder, where the `manifest.json` can be found.
+   - Confirm by pressing `enter` or `return` on your keyboard, and customize SnapSearch's search engine as required (defaults to Google).
+
+## Usage
+
+![SnapSearch Demo](/screenshots/demo.jpg)
+
+1. After installing the extension, right-click on any webpage in Arc Browser.
+2. Select the `Search with...` option in the context menu.
+3. Choose your preferred search engine from the popup.
 
 ## Contributing
 
 Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
-
diff --git a/css/styles.css b/css/styles.css
@@ -0,0 +1,70 @@
+:root {
+  --background-color: #1c1c1c;
+  --text-color: #e4e4e4;
+  --header-bg-color: #111;
+  --border-color: #666; 
+  --focus-border-color: #009bff; 
+  --option-padding: 10px;
+  --box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
+  --border-radius: 8px; 
+}
+
+body {
+  font-family: 'Segoe UI', Arial, sans-serif;
+  margin: 0;
+  padding: 20px;
+  background-color: var(--background-color);
+  color: var(--text-color);
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  color: var(--text-color);
+  padding: 10px;
+}
+
+.header .logo {
+  margin-right: 15px;
+}
+
+h1 {
+  font-size: 24px;
+  margin: 0;
+}
+
+label {
+  font-size: 16px;
+  margin-top: 20px;
+  display: block;
+}
+
+select {
+  width: 100%;
+  padding: var(--option-padding);
+  margin-top: 5px;
+  border-radius: var(--border-radius);
+  border: 1px solid var(--border-color);
+  background-color: var(--text-color);
+  font-size: 16px;
+  cursor: pointer;
+  color: var(--background-color);
+  box-shadow: var(--box-shadow);
+  transition: border-color var(--transition-speed), box-shadow var(--transition-speed);
+}
+
+select:focus {
+  outline: none;
+  border-color: var(--focus-border-color);
+  box-shadow: 0 0 0 2px var(--focus-border-color);
+}
+
+option {
+  padding: var(--option-padding);
+  background-color: var(--header-bg-color);
+  color: var(--text-color);
+}
+
+*:focus {
+  transition: outline var(--transition-speed);
+}
diff --git a/icons/icon128.png b/icons/icon128.png
diff --git a/icons/icon16.png b/icons/icon16.png
diff --git a/icons/icon32.png b/icons/icon32.png
diff --git a/icons/icon48.png b/icons/icon48.png
diff --git a/js/background.js b/js/background.js
@@ -0,0 +1,59 @@
+chrome.runtime.onInstalled.addListener(() => {
+  chrome.storage.sync.get("searchEngine", ({ searchEngine }) => {
+    createContextMenu(searchEngine);
+  });
+});
+
+chrome.contextMenus.onClicked.addListener((info, tab) => {
+  if (info.menuItemId === "searchLittleArc") {
+    const query = info.selectionText;
+    chrome.storage.sync.get("searchEngine", ({ searchEngine }) => {
+      createNewWindow(query, searchEngine);
+    });
+  }
+});
+
+function createNewWindow(query, searchEngine) {
+  const searchUrls = {
+    bing: `https://www.bing.com/search?q=${encodeURIComponent(query)}`,
+    duckduckgo: `https://duckduckgo.com/?q=${encodeURIComponent(query)}`,
+    kagi: `https://kagi.com/search?q=${encodeURIComponent(query)}`,
+    perplexity: `https://perplexity.ai/search?q=${encodeURIComponent(query)}`,
+    google: `https://www.google.com/search?q=${encodeURIComponent(query)}`,
+    ecosia: `https://www.ecosia.org/search?q=${encodeURIComponent(query)}`
+  };
+  const url = searchUrls[searchEngine] || searchUrls.google;
+  chrome.windows.create({ url });
+}
+
+chrome.storage.onChanged.addListener((changes, namespace) => {
+  if (changes.searchEngine) {
+    updateContextMenu(changes.searchEngine.newValue);
+  }
+});
+
+function updateContextMenu(searchEngine) {
+  chrome.contextMenus.update("searchLittleArc", {
+    title: getContextMenuTitle(searchEngine),
+  });
+}
+
+function getContextMenuTitle(searchEngine) {
+  const titles = {
+    bing: 'Search "%s" with Bing in Little Arc',
+    duckduckgo: 'Search "%s" with DuckDuckGo in Little Arc',
+    kagi: 'Search "%s" with Kagi in Little Arc',
+    perplexity: 'Search "%s" with Perplexity AI in Little Arc',
+    google: 'Search "%s" with Google in Little Arc',
+    ecosia: 'Search "%s" with Ecosia in Little Arc'
+  };
+  return titles[searchEngine] || titles.google;
+}
+
+function createContextMenu(searchEngine) {
+  chrome.contextMenus.create({
+    id: "searchLittleArc",
+    title: getContextMenuTitle(searchEngine),
+    contexts: ["selection"],
+  });
+}
diff --git a/js/popup.js b/js/popup.js
@@ -0,0 +1,11 @@
+document.addEventListener("DOMContentLoaded", () => {
+  const searchEngineSelect = document.getElementById("searchEngine");
+
+  chrome.storage.sync.get("searchEngine", ({ searchEngine }) => {
+    searchEngineSelect.value = searchEngine || "google";
+  });
+
+  searchEngineSelect.addEventListener("change", () => {
+    chrome.storage.sync.set({ searchEngine: searchEngineSelect.value });
+  });
+});
diff --git a/manifest.json b/manifest.json
@@ -1,24 +1,20 @@
 {
-    "manifest_version": 3,
-    "name": "SnapSearch - Better Search on Arc",
-    "description": "Search the web distraction-free with SnapSearch",
-    "version": "1.2",
-    "action": {
-        "default_popup": "popup/hello.html",
-        "default_icon": "icons/icon128.png"
-    },
-    "permissions": [
-        "contextMenus",
-        "tabs",
-        "storage"
-    ],
-    "background": {
-        "service_worker": "scripts/background.js"
-    },
-    "icons": {
-        "16": "icons/icon16.png",
-        "32": "icons/icon32.png",
-        "48": "icons/icon48.png",
-        "128": "icons/icon128.png"
-    }
-}
+  "manifest_version": 3,
+  "name": "SnapSearch - Better Search on Arc",
+  "description": "Search the web distraction-free with SnapSearch",
+  "version": "1.3",
+  "action": {
+    "default_popup": "popup.html",
+    "default_icon": "icons/icon128.png"
+  },
+  "permissions": ["contextMenus", "tabs", "storage"],
+  "background": {
+    "service_worker": "js/background.js"
+  },
+  "icons": {
+    "16": "icons/icon16.png",
+    "32": "icons/icon32.png",
+    "48": "icons/icon48.png",
+    "128": "icons/icon128.png"
+  }
+}
diff --git a/popup.html b/popup.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <link rel="stylesheet" type="text/css" href="css/styles.css">
+        <title>Popup view</title>
+    </head>
+
+    <body>
+
+        <div class="header">
+            <img src="icons/icon128.png" alt="SnapSeach Logo" height="20" width="20" class="logo">
+            <h1>SnapSearch</h1>
+        </div>
+
+        <label for="searchEngine">Default seach engine:</label>
+        <select id="searchEngine">
+            <option value="google">Google</option>
+            <option value="perplexity">Perplexity AI</option>
+            <option value="bing">Bing</option>
+            <option value="duckduckgo">DuckDuckGo</option>
+            <option value="kagi">Kagi</option>
+            <option value="ecosia">Ecosia</option>
+        </select>
+
+        <script src="js/popup.js"></script>
+    </body>
+
+</html>
+<html>
diff --git a/popup/hello.html b/popup/hello.html
diff --git a/popup/icon128.png b/popup/icon128.png
diff --git a/popup/popup.js b/popup/popup.js
diff --git a/popup/styles.css b/popup/styles.css
diff --git a/screenshots/demo.jpg b/screenshots/demo.jpg