implement message handling and browser interaction services along with vite build

Author: gurvinder-dhillon

package-lock.json

@@ -2,19 +2,19 @@
     "name": "auto-browse-agent-extension",
     "version": "0.0.1",
     "description": "",
-    "main": "index.js",
+    "type": "module",
     "scripts": {
         "clean": "rm -rf dist",
-        "build": "rollup -c && cp manifest.json dist/"
+        "build": "npm run clean && vite build",
+        "dev": "vite build --watch"
     },
     "keywords": [],
     "author": "",
     "license": "MIT",
     "devDependencies": {
-        "@rollup/plugin-node-resolve": "^15.2.3",
-        "rollup": "^4.22.4"
+        "vite": "^5.1.0"
     },
     "dependencies": {
         "puppeteer-core": "^24.3.0"
     }
-}
+}

package.json

@@ -0,0 +1,3 @@
+// Action type constants for message communication
+export const TEST_CONNECTION = "TEST_CONNECTION";
+export const HIGHLIGHT_LINKS = "HIGHLIGHT_LINKS";

src/actions/actionTypes.js

@@ -0,0 +1,24 @@
+import { TEST_CONNECTION, HIGHLIGHT_LINKS } from "./actionTypes.js";
+import { browserService } from "../services/browserService.js";
+import { highlightService } from "../services/highlightService.js";
+import { handleError } from "../utils/browserUtils.js";
+
+/**
+ * Handle incoming messages from the extension
+ * @param {Object} request - The message request
+ * @returns {Promise<string>} Response message
+ */
+export const handleMessage = async (request) => {
+	try {
+		switch (request.action) {
+			case TEST_CONNECTION:
+				return await browserService.getPageTitle();
+			case HIGHLIGHT_LINKS:
+				return await highlightService.highlightLinks();
+			default:
+				throw new Error(`Unknown action: ${request.action}`);
+		}
+	} catch (error) {
+		return handleError(error);
+	}
+};

src/actions/messageHandler.js

@@ -1,58 +1,9 @@
-import {
-	connect,
-	ExtensionTransport
-} from "puppeteer-core/lib/esm/puppeteer/puppeteer-core-browser.js";
-
-globalThis.testConnect = async (url) => {
-	// Get the current active tab instead of creating a new one
-	const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
-
-	const browser = await connect({
-		transport: await ExtensionTransport.connectTab(tab.id)
-	});
-
-	const [page] = await browser.pages();
-	const title = await page.title();
-
-	await browser.disconnect();
-	return title;
-};
-
-globalThis.highlightLinks = async () => {
-	const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
-
-	const browser = await connect({
-		transport: await ExtensionTransport.connectTab(tab.id)
-	});
-
-	const [page] = await browser.pages();
-
-	await page.evaluate(() => {
-		const links = document.querySelectorAll("a");
-		links.forEach((link) => {
-			link.style.backgroundColor = "yellow";
-			link.style.border = "2px solid red";
-		});
-		return `Highlighted ${links.length} links`;
-	});
-
-	await browser.disconnect();
-	return `Highlighted all links on the page`;
-};
+import { handleMessage } from "../actions/messageHandler.js";
 
 // Add message listener
 chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
-	if (request.action === "testConnection") {
-		globalThis
-			.testConnect(request.url)
-			.then((title) => sendResponse(`Current page title: ${title}`))
-			.catch((error) => sendResponse(`Error: ${error.message}`));
-		return true; // Will respond asynchronously
-	} else if (request.action === "highlightLinks") {
-		globalThis
-			.highlightLinks()
-			.then(sendResponse)
-			.catch((error) => sendResponse(`Error: ${error.message}`));
-		return true;
-	}
+	handleMessage(request)
+		.then(sendResponse)
+		.catch((error) => sendResponse(`Error: ${error.message}`));
+	return true; // Will respond asynchronously
 });

src/background/background.js

@@ -31,7 +31,7 @@
     <button id="testButton">Get Current Page Title</button>
     <button id="highlightButton">Highlight All Links</button>
     <div id="result"></div>
-    <script src="popup.js"></script>
+    <script src="popup.js" type="module"></script>
 </body>
 
 </html>

src/popup/popup.html

@@ -1,25 +1,41 @@
-document.getElementById("testButton").addEventListener("click", async () => {
+import { TEST_CONNECTION, HIGHLIGHT_LINKS } from "../actions/actionTypes.js";
+
+const resultElement = document.getElementById("result");
+if (!resultElement) {
+	throw new Error("Result element not found");
+}
+
+const updateResult = (message) => {
+	resultElement.textContent = message;
+};
+
+const sendMessage = async (action, loadingMessage) => {
 	try {
-		document.getElementById("result").textContent = "Getting page title...";
-		const result = await chrome.runtime.sendMessage({
-			action: "testConnection"
-		});
-		document.getElementById("result").textContent = result;
+		updateResult(loadingMessage);
+		const result = await chrome.runtime.sendMessage({ action });
+		updateResult(result);
 	} catch (error) {
-		document.getElementById("result").textContent = `Error: ${error.message}`;
+		updateResult(`Error: ${error.message}`);
 	}
-});
-
-document
-	.getElementById("highlightButton")
-	.addEventListener("click", async () => {
-		try {
-			document.getElementById("result").textContent = "Highlighting links...";
-			const result = await chrome.runtime.sendMessage({
-				action: "highlightLinks"
-			});
-			document.getElementById("result").textContent = result;
-		} catch (error) {
-			document.getElementById("result").textContent = `Error: ${error.message}`;
-		}
-	});
+};
+
+// Initialize button handlers
+const initializeHandlers = () => {
+	const testButton = document.getElementById("testButton");
+	const highlightButton = document.getElementById("highlightButton");
+
+	if (!testButton || !highlightButton) {
+		throw new Error("Required buttons not found");
+	}
+
+	testButton.addEventListener("click", () =>
+		sendMessage(TEST_CONNECTION, "Getting page title...")
+	);
+
+	highlightButton.addEventListener("click", () =>
+		sendMessage(HIGHLIGHT_LINKS, "Highlighting links...")
+	);
+};
+
+// Initialize when DOM is ready
+document.addEventListener("DOMContentLoaded", initializeHandlers);

src/popup/popup.js

@@ -0,0 +1,46 @@
+import {
+	connect,
+	ExtensionTransport
+} from "puppeteer-core/lib/esm/puppeteer/puppeteer-core-browser.js";
+import { getActiveTab, handleError } from "../utils/browserUtils.js";
+
+/**
+ * Service class for managing browser operations using Puppeteer
+ */
+class BrowserService {
+	/**
+	 * Connect to the current active tab and get its title
+	 * @returns {Promise<string>} The page title
+	 */
+	async getPageTitle() {
+		try {
+			const tab = await getActiveTab();
+			const browser = await connect({
+				transport: await ExtensionTransport.connectTab(tab.id)
+			});
+
+			const [page] = await browser.pages();
+			const title = await page.title();
+
+			await browser.disconnect();
+			return `Current page title: ${title}`;
+		} catch (error) {
+			return handleError(error);
+		}
+	}
+
+	/**
+	 * Connect to browser and get the active page
+	 * @returns {Promise<{ browser: Browser, page: Page }>}
+	 */
+	async connectToActivePage() {
+		const tab = await getActiveTab();
+		const browser = await connect({
+			transport: await ExtensionTransport.connectTab(tab.id)
+		});
+		const [page] = await browser.pages();
+		return { browser, page };
+	}
+}
+
+export const browserService = new BrowserService();

src/services/browserService.js

@@ -0,0 +1,33 @@
+import { browserService } from "./browserService.js";
+import { handleError } from "../utils/browserUtils.js";
+
+/**
+ * Service class for managing DOM highlighting operations
+ */
+class HighlightService {
+	/**
+	 * Highlight all links on the current page
+	 * @returns {Promise<string>} Result message
+	 */
+	async highlightLinks() {
+		try {
+			const { browser, page } = await browserService.connectToActivePage();
+
+			const result = await page.evaluate(() => {
+				const links = document.querySelectorAll("a");
+				links.forEach((link) => {
+					link.style.backgroundColor = "yellow";
+					link.style.border = "2px solid red";
+				});
+				return `Highlighted ${links.length} links`;
+			});
+
+			await browser.disconnect();
+			return result;
+		} catch (error) {
+			return handleError(error);
+		}
+	}
+}
+
+export const highlightService = new HighlightService();

src/services/highlightService.js

@@ -0,0 +1,18 @@
+/**
+ * Get the current active tab in the current window
+ * @returns {Promise<chrome.tabs.Tab>} The active tab
+ */
+export const getActiveTab = async () => {
+	const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
+	return tab;
+};
+
+/**
+ * Handle errors in async operations
+ * @param {Error} error - The error to handle
+ * @returns {string} Error message
+ */
+export const handleError = (error) => {
+	console.error("Operation failed:", error);
+	return `Error: ${error.message}`;
+};