Chrome extension which gives you a birds eye view of your chats.
I made this extension because I kept getting lost during my conversations with chatgpt. Sometimes chatgpt be giving you alot of useless info you didnt ask for. Navigating through what it says and finding the useful bits can be pretty tedious. This extension aims to solve that.
-
Download the extension from Chrome web store
-
Restart chrome
-
Go to chatgpt, you should see a toggle button for the minimap in the top right corner. Open the minimap by pressing this button.
-
Ask chatgpt a message and hit refresh minimap. A condensed view of the conversation should be shown in the minimap.
- Chrome extension framework: WXT chrome extension framework. (Solves alot of problems when trying to develop chrome extensions)
- For the ui: shadcn components.
- For the styling: tailwind
- Also: React, Typescript, Chrome extension apis (with wxt)
The folder structure is determined by WXT https://wxt.dev/guide/essentials/project-structure.html.
| Path | Description | Links |
|---|---|---|
assets/ |
Static resources such as images, fonts, or other media | |
components/ |
Components used across all entrypoints | |
components/ui |
Folder where pre built shadcn components live | https://ui.shadcn.com/docs/components |
entrypoints/ |
Application entry points | https://wxt.dev/guide/essentials/entrypoints.html |
entrypoints/content |
Entry point for content script loaded on every page | https://wxt.dev/guide/essentials/content-scripts.html |
entrypoints/popup |
Entry point for popup page | |
hooks/ |
Custom React hooks | https://react.dev/learn/reusing-logic-with-custom-hooks#extracting-your-own-custom-hook-from-a-component |
lib/ |
Utility functions and core library logic | |
public/ |
Publicly accessible static files | |
components.json |
Configuration for shadcn components | https://ui.shadcn.com/docs/components-json |
package-lock.json |
Exact dependency tree snapshot | |
package.json |
Project metadata, scripts, and dependencies | |
README.md |
Project documentation (this file) | |
tsconfig.json |
TypeScript compiler configuration | |
types.ts |
Shared TypeScript type definitions | |
wxt.config.ts |
WXT build/configuration file. Also manifest.json low key but not really | https://wxt.dev/guide/essentials/config/manifest.html |
- Make sure the following are installed:
- node (& npm)
- chrome
- Clone repo
- Navigate to directory and run
npm i- Run the following to develop chrome extension. This should open new chrome window navigated to chat.com.
npm run dev- Make changes to React tsx code in components & entrypoints. (Web page hot reloads due to WXT)
- Build extension. (zip file should appear in .outputs)
npm run build