Add Chrome browser event in database during recording

README.md

@@ -164,6 +164,38 @@ possible memory leak
 pointing the cursor and left or right clicking, as described in this
 [open issue](https://github.com/OpenAdaptAI/OpenAdapt/issues/145)
 
+
+### Capturing Browser Events
+
+To capture (record) browser events in Chrome, follow these steps:
+
+1. Go to: [Chrome Extension Page](chrome://extensions/)
+
+2. Enable `Developer mode` (located at the top right):
+
+![image](https://github.com/OpenAdaptAI/OpenAdapt/assets/65433817/c97eb9fb-05d6-465d-85b3-332694556272)
+
+3. Click `Load unpacked` (located at the top left).
+
+![image](https://github.com/OpenAdaptAI/OpenAdapt/assets/65433817/00c8adf5-074a-4655-b132-fd87644007fc)
+
+4. Select the `chrome_extension` directory:
+
+![image](https://github.com/OpenAdaptAI/OpenAdapt/assets/65433817/71610ed3-f8d4-431a-9a22-d901127b7b0c)
+
+5. You should see the following confirmation, indicating that the extension is loaded:
+
+![image](https://github.com/OpenAdaptAI/OpenAdapt/assets/65433817/7ee19da9-37e0-448f-b9ab-08ef99110e85)
+
+6. Set the flag to `true` if it is currently `false`:
+
+![image](https://github.com/user-attachments/assets/8eba24a3-7c68-4deb-8fbe-9d03cece1482)
+
+7. Start recording. Once recording begins, navigate to the Chrome browser, browse some pages, and perform a few clicks. Then, stop the recording and let it complete successfully.
+
+8. After recording, check the `openadapt.db` table `browser_event`. It should contain all your browser activity logs. You can verify the data's correctness using the `sqlite3` CLI or an extension like `SQLite Viewer` in VS Code to open `data/openadapt.db`.
+
+
 ### Visualize
 
 Quickly visualize the latest recording you created by running the following command:

chrome_extension/background.js

@@ -0,0 +1,68 @@
+/**
+ * @file background.js
+ * @description Creates a new background script that listens for messages from the content script
+ * and sends them to a WebSocket server.
+*/
+
+let socket;
+let timeOffset = 0; // Global variable to store the time offset
+
+/* 
+ * TODO: 
+  * Ideally we read `WS_SERVER_PORT`, `WS_SERVER_ADDRESS` and 
+  * `RECONNECT_TIMEOUT_INTERVAL` from config.py, 
+  * or it gets passed in somehow. 
+*/
+let RECONNECT_TIMEOUT_INTERVAL = 1000; // ms
+let WS_SERVER_PORT = 8765;
+let WS_SERVER_ADDRESS = "localhost";
+let WS_SERVER_URL = "ws://" + WS_SERVER_ADDRESS + ":" + WS_SERVER_PORT;
+
+
+function socketSend(socket, message) {
+  console.log({ message });
+  socket.send(JSON.stringify(message));
+}
+
+
+/*
+ * Function to connect to the WebSocket server.
+*/
+function connectWebSocket() {
+  socket = new WebSocket(WS_SERVER_URL);
+
+  socket.onopen = function() {
+    console.log("WebSocket connection established");
+  };
+
+  socket.onmessage = function(event) {
+    console.log("Message from server:", event.data);
+    const message = JSON.parse(event.data);
+  };
+
+  socket.onclose = function(event) {
+    console.log("WebSocket connection closed", event);
+    // Reconnect after 5 seconds if the connection is lost
+    setTimeout(connectWebSocket, RECONNECT_TIMEOUT_INTERVAL);
+  };
+
+  socket.onerror = function(error) {
+    console.error("WebSocket error:", error);
+    socket.close();
+  };
+}
+
+// Create a connection to the WebSocket server
+connectWebSocket();
+
+/* Listen for messages from the content script */
+chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
+  const tabId = sender.tab.id;
+  message.tabId = tabId;
+  if (socket && socket.readyState === WebSocket.OPEN) {
+    socketSend(socket, message);
+    sendResponse({ status: "Message sent to WebSocket" });
+  } else {
+    sendResponse({ status: "WebSocket connection not open" });
+  }
+});