Skip to content

Commit bda9caa

Browse files
authored
Migrate the browser-extension project to be the root (#60)
2 parents c9abebd + 8eaa0b6 commit bda9caa

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

70 files changed

+181
-205
lines changed

.claude/agents/corpus-fixer.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ description: Use this agent when you need to fix or improve the detection logic
44
model: inherit
55
---
66

7-
You are an expert Gitcasso corpus debugging specialist with deep knowledge of browser extension development. You operate exclusively within the `browser-extension` directory and specialize in using the corpus:view development environment to diagnose and fix detection logic issues.
7+
You are an expert Gitcasso corpus debugging specialist with deep knowledge of browser extension development. You operate within the root project directory and specialize in using the corpus:view development environment to diagnose and fix detection logic issues.
88

99
Your primary workflow:
1010

.github/workflows/browser-extension.yml

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -21,9 +21,6 @@ jobs:
2121
node-version-file: '.nvmrc'
2222
cache: 'pnpm'
2323
- run: pnpm install --frozen-lockfile
24-
- run: pnpm run biome
25-
working-directory: browser-extension
2624
- run: pnpm test
27-
working-directory: browser-extension
28-
- run: pnpm run typecheck
29-
working-directory: browser-extension
25+
- run: pnpm biome
26+
- run: pnpm typecheck

CONTRIBUTING.md

Lines changed: 105 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,111 @@ By submitting a Pull Request, you agree that your contributions are licensed und
1111
This extension ***must never transmit any data outside the browser***.
1212

1313
- it adds syntax highlighting by running local scripts
14-
- it stores unfinished comments in local storage
14+
- it stores finished and unfinished comments in local storage
1515
- there is no need to initiate an outbound network request, no features will be added which require outbound network requests
1616

17-
## How to
17+
## Developer quickstart
1818

19-
- `browser-extension` is the primary project. Go to [its README.md](browser-extension/README.md) for development info.
19+
### Hotreload development
20+
21+
- `pnpm install`
22+
- `pnpm dev`
23+
- open [`chrome://extensions`](chrome://extensions)
24+
- toggle **Developer mode** (top-right)
25+
- click "Load unpacked" (far left)
26+
- `.output/chrome-mv3-dev`
27+
- if you can't find `.output`, it's probably hidden, `command+shift+period` will show it
28+
- click the puzzle icon next to the url bar, then pin the Gitcasso icon
29+
30+
### Testing and quality
31+
- `pnpm biome` - runs `biome check` (lint & formatting)
32+
- `pnpm biome:fix` - fixes most of what `biome check` finds
33+
- `pnpm typecheck` - typechecking
34+
- `pnpm test` - vitest
35+
- `pnpm test -u` - updates all snapshots
36+
37+
## How it works
38+
39+
This is a [WXT](https://wxt.dev/)-based browser extension that
40+
41+
- finds `textarea` components and decorates them with [overtype](https://overtype.dev/) and [highlight.js](https://highlightjs.org/)
42+
- stores unposted comment drafts, and makes them easy to find via the extension popup
43+
44+
### Entry points
45+
46+
- [`src/entrypoints/content.ts`](src/entrypoints/content.ts) - injected into every webpage
47+
- [`src/entrypoints/background.ts`](src/entrypoints/background.ts) - service worker that manages state and handles messages
48+
- [`src/entrypoints/popup/popup.tsx`](src/entrypoints/popup/popup.tsx) - popup (react html + TailwindCSS)
49+
50+
```mermaid
51+
graph TD
52+
Content[Content Script<br/>content.ts]
53+
Background[Background Script<br/>background.ts]
54+
Popup[Popup Script<br/>popup/popup.tsx]
55+
56+
Content -->|ENHANCED/DESTROYED<br/>CommentEvent| Background
57+
Popup -->|GET_OPEN_SPOTS<br/>SWITCH_TO_TAB| Background
58+
Background -->|GetOpenSpotsResponse<br/>spots array| Popup
59+
60+
Background -.->|manages| Storage[Comment State Storage<br/>openSpots JsonMap]
61+
Content -.->|enhances| TextArea[textarea elements<br/>on web pages]
62+
Popup -.->|displays| UI[Extension UI<br/>list of comment spots]
63+
64+
classDef entrypoint fill:#e1f5fe
65+
classDef storage fill:#f3e5f5
66+
classDef ui fill:#e8f5e8
67+
68+
class Content,Background,Popup entrypoint
69+
class Storage storage
70+
class TextArea,UI ui
71+
```
72+
73+
Every time a `textarea` shows up on a page, on initial load or later on, it gets passed to a list of `CommentEnhancer`s. Each one gets a turn to say "I can enhance this box!". They show that they can enhance it by returning something non-null in the method `tryToEnhance(textarea: HTMLTextAreaElement): Spot | null`. Later on, that same `Spot` data will be used by the `tableRow(spot: Spot): ReactNode` method to create React components for rich formatting in the popup table.
74+
75+
Those `Spot` values get bundled up with the `HTMLTextAreaElement` itself into an `EnhancedTextarea`, which gets added to the `TextareaRegistry`. At some interval, draft edits get saved by the browser extension.
76+
77+
When the `textarea` gets removed from the page, the `TextareaRegistry` is notified so that the `CommentSpot` can be marked as abandoned or submitted as appropriate.
78+
79+
## Testing
80+
81+
- `pnpm playground` gives you a test environment where you can tinker with the popup with various test data, supports hot reload
82+
- `pnpm corpus:view` gives you recordings of various web pages which you can see with and without enhancement by the browser extension
83+
84+
### Test Corpus
85+
86+
We maintain a corpus of test pages in two formats for testing the browser extension:
87+
88+
#### HAR Corpus (Automated)
89+
90+
- For testing initial page loads and network requests
91+
- HAR recordings live in `tests/corpus/*.har`, complete recordings of the network requests of a single page load
92+
- You can add or change URLs in `tests/corpus/_corpus-index.ts`
93+
- **Recording new HAR files:**
94+
- `npx playwright codegen https://github.com/login --save-storage=playwright/.auth/gh.json` will store new auth tokens
95+
- login manually, then close the browser
96+
- ***these cookies are very sensitive! we only run this script using a test account that has no permissions or memberships to anything, recommend you do the same!***
97+
- `pnpm corpus:har:record` records new HAR files using those auth tokens (it needs args, run it with no args for docs)
98+
- DO NOT COMMIT AND PUSH NEW OR CHANGED HAR files!
99+
- we try to sanitize these (see `corpus-har-record.ts` for details) but there may be important PII in them
100+
- if you need new HAR files for something, let us know and we will generate them ourselves using a dummy account
101+
- IF YOUR PR CHANGES OR ADDS HAR FILES WE WILL CLOSE IT. Ask for HAR files and we'll be happy to generate clean ones you can test against.
102+
103+
#### HTML Corpus (Manual)
104+
105+
- For testing post-interaction states (e.g., expanded textareas, modal dialogs, dynamic content)
106+
- HTML snapshots live in `tests/corpus/*.html`, manually captured using SingleFile browser extension
107+
- All assets are inlined in a single HTML file by SingleFile
108+
- **Creating new HTML corpus files:**
109+
1. Navigate to the desired page state (click buttons, expand textareas, etc.)
110+
2. Use SingleFile browser extension to save the complete page
111+
3. Save the `.html` file to `tests/corpus/html/` with a descriptive name
112+
4. Add an entry to `tests/corpus/_corpus-index.ts` with `type: 'html'` and a description of the captured state
113+
5. Feel free to contribute these if you want, but be mindful that they will be part of our immutable git history
114+
115+
#### Viewing Corpus Files
116+
117+
- Run `pnpm corpus:view` to start the test server at http://localhost:3001
118+
- Select any corpus file to view in two modes:
119+
- **Clean**: Original page without extension
120+
- **Gitcasso**: Page with extension injected for testing
121+
- Both HAR and HTML corpus types are supported

README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# <img align="left" src="browser-extension/public/icons/icon-48.png"> Gitcasso
1+
# <img align="left" src="public/icons/icon-48.png"> Gitcasso
22

33
*Syntax highlighting and autosave for comments on GitHub (and other other markdown-friendly websites).*
44

File renamed without changes.

browser-extension/README.md

Lines changed: 0 additions & 110 deletions
This file was deleted.

browser-extension/package.json

Lines changed: 0 additions & 70 deletions
This file was deleted.

0 commit comments

Comments
 (0)