https://github.com/siegerts/dossi-ext
dossi browser extension: Your own private GitHub notes on every page
https://github.com/siegerts/dossi-ext
broswer-extension chrome-api chrome-extension firefox-extension github-management open-source plasmo reactjs serverless shadcn-ui tailwind tanstack-react-query zod
Last synced: 4 months ago
JSON representation
dossi browser extension: Your own private GitHub notes on every page
- Host: GitHub
- URL: https://github.com/siegerts/dossi-ext
- Owner: siegerts
- License: agpl-3.0
- Created: 2023-05-18T02:29:40.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-07-19T13:38:10.000Z (about 1 year ago)
- Last Synced: 2025-06-04T14:20:47.969Z (4 months ago)
- Topics: broswer-extension, chrome-api, chrome-extension, firefox-extension, github-management, open-source, plasmo, reactjs, serverless, shadcn-ui, tailwind, tanstack-react-query, zod
- Language: TypeScript
- Homepage: https://dossi.dev
- Size: 715 KB
- Stars: 23
- Watchers: 2
- Forks: 1
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
dossi
Your own private GitHub notes on every page
Learn more »
Chrome Extension
|
Website
|
Web app and API repo
|
Feedback
## Introduction
This is the **browser extension** for dossi, a note-taking app that allows you to [add notes on GitHub issues, pull requests, and more](https://www.dossi.dev/docs).The web app and API are available at [siegerts/dossi-app](https://github.com/siegerts/dossi-app).
YouTube demo: [https://www.youtube.com/watch?v=wgGGjAqa3L8](https://www.youtube.com/watch?v=wgGGjAqa3L8)
## Functionality
- [Sidepanel overlay](https://github.com/siegerts/dossi-ext/blob/main/contents/connct-sidebar.tsx) on GitHub pages to add, edit, and delete notes
- Label creation
- Pin pages to view later
- Note management (create, read, update, delete, sort) with "light" markdown support
- [Popup window](https://github.com/siegerts/dossi-ext/blob/main/popup.tsx) to view recent activity and pins
- Content script button to open the sidepanel overlay and display the number of notes for the current page
- [Transferred page detection](https://github.com/siegerts/dossi-ext/blob/main/background.ts#L54) to prompt the user to transfer notes to the new page entity
- [Bring your own OpenAI API key and prompts](https://www.xiegerts.com/post/browser-extension-genai-key-prompts/) to use with GitHub issue and discussion content
- Auth integration with dossi web app
## Use Cases
- **Developers**: Keep notes for GitHub issues, pull requests, and discussions
- **Open Source Contributors**: Keep track of issues and PRs across multiple repositories
- **Maintainers**: Speed up issue triage, reproduction steps, and PR reviews. Keep track of discussions and decisions
- **Product Managers**: Track feature requests and user feedback
## Tech Stack
- [Plasmo](https://github.com/PlasmoHQ/plasmo) – browser extension framework
- [TypeScript](https://www.typescriptlang.org/) – language
- [shadcn/ui](https://ui.shadcn.com/) – UI components
- [Tailwind](https://tailwindcss.com/) – CSS
- [TanStack/react-query](https://react-query.tanstack.com/) – data fetching
- [zod](https://github.com/colinhacks/zod) – schema validation
## Brower API Compatibility
| API | Chrome | Firefox |
| --------------- | ------------ | ------------ |
| `tabs` | ✅ Supported | ✅ Supported |
| - `query` | ✅ Supported | ✅ Supported |
| - `sendMessage` | ✅ Supported | ✅ Supported |
| - `onUpdated` | ✅ Supported | ✅ Supported |
| `webNavigation` | ✅ Supported | ✅ Supported |
| `cookies` | ✅ Supported | ✅ Supported |
| `runtime` | ✅ Supported | ✅ Supported |
## User access flow
```mermaid
graph TB
subgraph ".dev Site"
A[User logs in]
L[User logs out]
P[API]
end
A[User logs in] --> DB[(Neon Postgres Database)]
L[User logs out] --> DB[(Neon Postgres Database)]
P[API] --> DB[(Neon Postgres Database)]
B --> C{User logged in?}
A --> B[User accesses Chrome extension]
L --> M[Show unauthenticated UI]
subgraph "Content Script"
C -->|Yes| D["Show authenticated UI"]
D --> E["User can create, read, update, delete notes"]
E --> Z["API call to site"]
Z --> P
D --> F[User can create, read, update, delete pins]
F --> Y["API call to site"]
Y --> P
D --> G["User can create, read, update, delete labels"]
G --> X["API call to Main .com site"]
X --> P
D --> H{"API call returns a 403?"}
H -->|Yes| I[Show UI to log in]
C -->|No| M
end
subgraph "Popup Window"
C -->|Yes| K[Popup window shows user information]
C -->|No| M
end
style Z fill:#f9a8d4,stroke:#333,stroke-width:2px
style Y fill:#f9a8d4,stroke:#333,stroke-width:2px
style X fill:#f9a8d4,stroke:#333,stroke-width:2px
style DB fill:#e6ffed, stroke:#333, stroke-width:2px
```
## Data flow
```mermaid
graph TD
subgraph "Global Providers"
A[AuthProvider - Checks the user data and confirms isAuthed]
B[QueryClientProvider]
C[UserLabelsProvider - Data fetching]
end
subgraph "Page Specific Providers"
D[EntityProvider - Data fetching]
end
subgraph "LocalStorage"
F[UserLabels Cache]
end
E[ActionSheet]
A --> B
B --> C
C --> D
D --> E
C --> F[Updates Cache]
F --> C
```
## Getting Started
### Install the dependencies
```
pnpm install
```
### Development
**Environment variables**
Create a `.env` file in the root of the project with the following content:
```ini
PLASMO_PUBLIC_HOST="http://localhost:3000"
PLASMO_PUBLIC_HOST_API="http://localhost:3000/api"
PLASMO_PUBLIC_HOST_COOKIE="next-auth.session-token"
PLASMO_PUBLIC_MATCHES="https://github.com/*"
PLASMO_PUBLIC_MANIFEST_HOST_PERMISSIONS="http://localhost:3000/*"
```
#### Development build
```bash
pnpm dev
# or
npm run dev
```
Open your browser and load the appropriate development build. For example, if you are developing for the chrome browser, using manifest v3, use: `build/chrome-mv3-dev`.
Load the unpacked extension in your browser.
#### Production build
Run the following:
```bash
pnpm build
# or
npm run build
```
## License
dossi is open source and available under the [GNU General Public License v3.0(AGPLv3)](LICENSE.md).