Refactor/adjust type define and readme (#5)

* Refactor: Eliminate Redundant VideoStatusPayload Type in Favor of VideoStatus

* Docs: Enhance README.md with Correct Syntax and Adjusted Instructions

README.md

@@ -1,34 +1,84 @@
-# TPulse Chrome Extension
-## Collect metrics from browser usage
-### Prerequisite
-- `node` >= v18.17.1
-- `yarn`>= v1.22.19
-- `cargo` >= v1.75.0
-### How to install extension on Linux (Ubuntu 22.04)
-#### 1. Build
-- `yarn`: Install dependencies.
-- `yarn build`: Create `/dist` folder.
-- `cd proxy && cargo build --release`: Create file binary `target/release/proxy` to process data sent from extension.
-#### 2. Load extension
-- Run command `google-chrome` on terminal to open Chrome browser.
-- Enter `chrome://extensions/` and switch to **Developer mode**.
-- Load unpacked `dist/` (step 1).
-- Copy ID of extension.
-#### 3. Register a native messaging host on Chrome
-- Save a file that defines the native messaging host configuration:
-
-    ```sh
+# TPulse Chrome Extension Setup Guide
+
+## Overview
+
+The TPulse Chrome Extension allows users to collect metrics from browser usage, providing valuable insights into user behavior. This guide outlines the steps to install and set up the extension on a Linux system (specifically tested on Ubuntu 22.04).
+
+## Prerequisites
+
+Ensure that the following software is installed on your system:
+
+- `node` version >= v18.17.1
+- `yarn` version >= v1.22.19
+- `cargo` version >= v1.75.0
+
+## Installation Steps
+
+### <a id="step1"></a> 1. Build the Extension
+
+1. Open a terminal and navigate to the project directory.
+
+    ```bash
+    cd path/to/tpulse-chrome-extension
+    ```
+
+2. Install project dependencies using Yarn.
+
+    ```bash
+    yarn
+    ```
+
+3. Build the extension.
+
+    ```bash
+    yarn build
+    ```
+
+4. Navigate to the proxy directory and build the binary.
+
+    ```bash
+    cd src-proxy
+    cargo build --release
+    ```
+
+### 2. Load the Extension
+
+1. Launch Google Chrome from the terminal.
+
+    ```bash
+    google-chrome
+    ```
+
+2. In Chrome, enter `chrome://extensions/` in the address bar and switch to **Developer mode**.
+
+3. Click on "Load unpacked" and select the `dist/` folder generated in the build step [Step 1](#step1).
+
+4. Copy the ID of the loaded extension.
+
+### 3. Register a Native Messaging Host on Chrome
+
+1. Create a configuration file for the native messaging host.
+
+    ```bash
     nano ~/.config/google-chrome/NativeMessagingHosts/com.ticklab.tpulse.json
     ```
-- Copy and paste:
+
+2. Paste the following JSON into the file. Replace `<path>` with the result of the `pwd` command and `<ID-of-extension-in-step-2>` with the copied extension ID.
 
     ```json
     {
         "name": "com.ticklab.tpulse",
         "description": "tpulse",
-        "path": "<path>/tpulse-chrome-extension/proxy/target/release/proxy",
+        "path": "<path>/src-proxy/target/release/proxy",
         "type": "stdio",
         "allowed_origins": ["chrome-extension://<ID-of-extension-in-step-2>/"]
     }
     ```
-Completely! Please check the magic on terminal.
+
+3. Save and close the file.
+
+## Verification
+
+Once the setup is complete, check the terminal for any messages or errors. Ensure that the extension is successfully loaded and communicating with the native messaging host.
+
+Congratulations! You have successfully set up the TPulse Chrome Extension on your Linux system.

src/type.d.ts

@@ -1,18 +1,16 @@
 type VideoStatus = {
   paused: boolean;
-  startTime?: Time;
+  startTime?: number;
 };
 
 /**
  * The MessageTypePrefix is a unique identifier specific to the TicklabVN Tpulse extension.
  */
 type MessageTypePrefix = "ticklabvn.tpulse.";
 
-type VideoStatusPayload = Record<string, string | number | boolean>;
-
 type BrowserMessage = {
   type: `${MessageTypePrefix}${"TAB_UPDATE" | "UPDATE_VIDEO_STATUS"}`;
-  payload?: VideoStatusPayload;
+  payload?: VideoStatus;
 };
 
 type BrowserTab = {
@@ -23,7 +21,7 @@ type BrowserTab = {
   tabId?: number;
 };
 
-type VideoStatusPayloadWithTabId = VideoStatusPayload & { tabId?: number };
-type BinaryMessage = (VideoStatusPayloadWithTabId | BrowserTab) & {
+type VideoStatusWithTabId = VideoStatus & { tabId?: number };
+type BinaryMessage = (VideoStatusWithTabId | BrowserTab) & {
   type: "BrowserTab" | "VideoStatus";
 };