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.The web app and API are available at siegerts/dossi-app.

YouTube demo: https://www.youtube.com/watch?v=wgGGjAqa3L8

Functionality

• Sidepanel overlay 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 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 to prompt the user to transfer notes to the new page entity
• Bring your own OpenAI API key and 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 – browser extension framework
• TypeScript – language
• shadcn/ui – UI components
• Tailwind – CSS
• TanStack/react-query – data fetching
• 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

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

Loading

Data flow

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

Loading

Getting Started

Install the dependencies

pnpm install

Development

Environment variables

Create a .env file in the root of the project with the following content:

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

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:

pnpm build
# or
npm run build

License

dossi is open source and available under the GNU General Public License v3.0(AGPLv3).