Update readme (#11)

* Fix readme

* Fix favicon

Author: MehdiMstv

README.md

@@ -1,67 +1,100 @@
 # KozeGaav Chrome Extension
 
-Getting your rides history from [Snapp application][snapppwa].
-
-<img src="assests/Header.png" width="800">
-<img src="assests/Info.png" width="800">
-
-Note: you can see count and price of each bar chart on hover:
+Getting your rides and food orders history from [Snapp application][snapppwa] and [Snappfood][snappfood].
 
+<img src="assests/Summary.png" width="800">
 <img src="assests/Hours.png" width="800">
+<img src="assests/Months.png" width="800">
 
 # What is Snapp?
 
-You can think of [Iranian version of Uber][snappwiki]. Their public repository is available in [here][snapprepo].
+You can think of [Iranian version of Uber][snappwiki]. Their public repository is available [here][snapprepo].
 
-# How the Extension Works?
+# What is Snappfood?
 
-1. After installing the extension you need to sign in into your Snapp account.
-2. When you open [https://app.snapp.taxi][snapppwa] page a script injects into the HTML `body`.
-3. The script read `access-token` from the page and create a new `CustomEvent` with `access-token` and dispatched by `window`.
-4. In `contentscript` we listen to the upcoming event message from the injected script. After getting the message, we save `access-token` by using [chrome.storage][chromestorage] API.
-5. Every time you click on MySnapp extension's icon we read `access-token` from `chrome.storage` and then set a state in the mounted React component (popup).
-6. Now we have `access-token` as a state in our component. When you click on `Let's Go` button, the App is going request to Snapp API with your `access-token`
-7. After your data received from Snapp API, we use `chrome.storage` for caching. And for the next time when you click on `Let's Go` button, we show your saved data.
+[Snappfood][snappfood] is Iran's leading online food delivery platform, similar to UberEats or DoorDash. It's part of the Snapp! ecosystem, allowing users to order food from thousands of restaurants across Iran.
 
-# Privacy Policy
+# Features
 
-**All codes executed on the client-side** and the extension is only for **personal usage**. For analyzing the data we need to get your local `access-token` from the Snapp PWA. After signing in the token will be saved in chrome storage API. You can remove the extension to destroy your `accessToken` completely.
+- View your Snapp ride history with detailed statistics
+- View your Snappfood order history with detailed statistics
+- See your biggest Snappfood order
+- View statistics by hour, day, week, month, and year
+- View total spending and count for rides/orders
+- Beautiful charts and visualizations
+- Data caching for faster access
+- Automatic update detection for new rides/orders
 
-# Contributing [WIP]
+# Installation
 
-Pull requests are welcome. We can discuss what you would like to change.
+## Quick Start (Until we publish in Chrome store)
 
-# Installation [WIP]
+<img src="assests/Chrome.png" width="800">
 
-Start: (use dist folder to install on Chrome)
+1. Unzip the extension, you can download it from GitHub releases or telegram channel
+2. Go to Chrome > Extensions > Manage Extensions and enable Developer Mode
+3. Click on "Load Unpacked" on Chrome Manage extensions page and choose the unzipped folder
+4. Sign in to your Snapp account at [app.snapp.taxi][snapppwa] and your Snappfood account at [snappfood.ir][snappfood]
+5. Click on the extension icon in Chrome to view your statistics!
 
-```
-cd my-snapp-extension
+## Development Setup
+
+Start development server (use dist folder to install on Chrome):
+```bash
+cd kozegaav
 npm ci && cd src/popup && npm ci && cd ../..
 npm start
 ```
 
-Build: (my-snapp-extension.zip)
-
-```
-npm run tada
+Build extension package:
+```bash
+npm run tada  # Creates kozegaav.zip
 ```
 
-### Todo
+# How the Extension Works?
+
+## For Snapp Rides:
+1. After installing the extension you need to sign in to your Snapp account
+2. When you open [https://app.snapp.taxi][snapppwa], a script injects into the HTML `body`
+3. The script reads `access-token` from the page and creates a new `CustomEvent` with `access-token` and dispatches it via `window`
+4. In `contentscript` we listen to the upcoming event message from the injected script. After getting the message, we save `access-token` using [chrome.storage][chromestorage] API
+5. Every time you click on the extension's icon, we read `access-token` from `chrome.storage` and set it as a state in the mounted React component (popup)
+6. When you click on "Get Snapp Rides", the app requests data from Snapp API with your `access-token`
+7. After your data is received, we use `chrome.storage` for caching. Next time you click the button, we first check if there are new rides before fetching all data again
+
+## For Snappfood Orders:
+1. Sign in to your Snappfood account at [snappfood.ir][snappfood]
+2. When you click "Get Snappfood Orders" in the extension, we use your browser's cookies to authenticate with Snappfood's API
+3. The app fetches your order history page by page and processes the data
+4. Like with Snapp rides, we cache the data and check for new orders before fetching everything again
+5. All data processing happens locally in your browser
+
+# Privacy Policy
 
-- [ ] #feat update new rides manually/automatically (needs to store the last ride id)
-- [ ] #feat porting **MySnapp** to Safari Web Extensions [issue [#1][#1]]
-- [ ] #feat porting **MySnapp** to Firefox Add-ons (maybe we can use it on Android devices)
+**All codes executed on the client-side** and the extension is only for **personal usage**. For analyzing the data:
+- For Snapp rides, we need your local `access-token` from the Snapp PWA
+- For Snappfood orders, we use your browser's cookies to authenticate with Snappfood
+- All authentication data is saved in chrome storage API
+- You can remove the extension at any time to destroy all stored data completely
+- No data is ever sent to any third-party servers
+- All data processing happens locally in your browser
 
-### In Progress
+The extension only accesses the minimum required data to show your ride and order statistics. Your privacy and data security are our top priority.
 
-- [ ] add a **scroll to bottom** button to the pages
+# Credits & Background
 
-### Done
+This extension is a fork and enhancement of [My Snapp](https://github.com/sepehrity/my-snapp-extension), which is no longer maintained. We've built upon the original project by:
+- Fixing compatibility with recent Chrome updates
+- Adding Snappfood integration
+- Adding new statistics and visualizations
+- Improving data caching and performance
+- Enhancing the user interface
+- Implementing automatic update detection
 
-- [x] #bug car charts show duplicate data --- resolved in [!3][!3]
+Special thanks to the original My Snapp developers for laying the groundwork for this project.
 
 [snapppwa]: https://app.snapp.taxi
 [snappwiki]: https://en.wikipedia.org/wiki/Snapp!
 [snapprepo]: https://github.com/snapp-cab
-[chromestorage]: https://developer.chrome.com/extensions/storage
+[chromestorage]: https://developer.chrome.com/extensions/storage
+[snappfood]: https://snappfood.ir

assests/Chrome.png

@@ -14,7 +14,7 @@
     "start": "npm-run-all --parallel start:*",
     "prebuild": "npm run clean",
     "prestart": "npm run clean",
-    "tada": "bestzip my-snapp-extension.zip dist/*"
+    "tada": "bestzip kozegaav-extension.zip dist/*"
   },
   "keywords": [],
   "license": "GPL-3.0+",

assests/Header.png

@@ -78,7 +78,7 @@ const fetchSnappfoodOrders = async (url: string): Promise<any> => {
 };
 
 // Listen for messages from content scripts or popup
-chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
+chrome.runtime.onMessage.addListener((message, _, sendResponse) => {
   if (message.action === 'fetchSnappfoodOrders') {
     fetchSnappfoodOrders(message.url)
       .then(data => {

assests/Hours.png

@@ -8,7 +8,6 @@
     <link href="Sahel.css" rel="stylesheet" type="text/css" />
 
     <meta name="description" content="Analyze your Snapp rides and snappfood orders" />
-    <link rel="apple-touch-icon" href="logo192.png" />
     <link rel="manifest" href="react-manifest.json" />
     <title>KozeGaav</title>
   </head>

assests/Info.png

@@ -6,16 +6,6 @@
       "src": "favicon.ico",
       "sizes": "64x64 32x32 24x24 16x16",
       "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
     }
   ],
   "start_url": ".",