Skip to content

Latest commit

 

History

History
186 lines (145 loc) · 5.81 KB

README.md

File metadata and controls

186 lines (145 loc) · 5.81 KB
Raw
Your own private GitHub notes on every page

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

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).