dossi-ext

KO | EN

gitlite — search

#python #java #python3 #arduino #golang #machine-learning #rust #html #flask #javascript #seismology #nodejs

★ 25 Open GitHub ↗

dossi browser extension: Your own private GitHub notes on every page

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<h3 align="center">dossi</h3>

<p align="center">
    Your own private GitHub notes on every page
    <br />
    <a href="https://dossi.dev"><strong>Learn more »</strong></a>
    <br />
    <br />
     <a href="https://chromewebstore.google.com/detail/dossi-private-github-note/ogpcmecajeghflaaaennkmknfpeghffm">Chrome Extension</a>
    |
    <a href="https://dossi.dev">Website</a>
    |
    <a href="https://github.com/siegerts/dossi-app">Web app and API repo</a>
    |
     <a href="https://github.com/siegerts/dossi-ext/issues">Feedback</a>
  </p>

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

dossi-ext

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README