From 2186cc14144ef88d22a84b635fc208eaa2667dda Mon Sep 17 00:00:00 2001
From: Quan Nguyen <128902312+quannhg@users.noreply.github.com>
Date: Sat, 13 Jan 2024 12:41:02 +0700
Subject: [PATCH] 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     | 96 +++++++++++++++++++++++++++++++++++++++------------
 src/type.d.ts | 10 +++---
 2 files changed, 77 insertions(+), 29 deletions(-)

diff --git a/README.md b/README.md
index b0e25fb..1fb2004 100644
--- a/README.md
+++ b/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.
\ No newline at end of file
+
+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.
diff --git a/src/type.d.ts b/src/type.d.ts
index 2421690..3c5042d 100644
--- a/src/type.d.ts
+++ b/src/type.d.ts
@@ -1,6 +1,6 @@
 type VideoStatus = {
   paused: boolean;
-  startTime?: Time;
+  startTime?: number;
 };
 
 /**
@@ -8,11 +8,9 @@ type VideoStatus = {
  */
 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";
 };