https://github.com/dhilman/gitowl-extension
GitOwl Browser Extension. Open Source Insights At a Glance.
https://github.com/dhilman/gitowl-extension
browser-extension chrome-extension github insights oss
Last synced: 6 months ago
JSON representation
GitOwl Browser Extension. Open Source Insights At a Glance.
- Host: GitHub
- URL: https://github.com/dhilman/gitowl-extension
- Owner: dhilman
- License: apache-2.0
- Created: 2023-03-05T20:54:22.000Z (almost 3 years ago)
- Default Branch: master
- Last Pushed: 2024-10-22T20:15:35.000Z (over 1 year ago)
- Last Synced: 2025-04-04T15:39:58.929Z (10 months ago)
- Topics: browser-extension, chrome-extension, github, insights, oss
- Language: TypeScript
- Homepage: https://gitowl.dev
- Size: 1.49 MB
- Stars: 35
- Watchers: 2
- Forks: 3
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
GitOwl Browser Extension
gitowl.dev
•
chrome
•
firefox
GitOwl browser extension adds a sidebar to GitHub, NPM & PyPI with contextual insights.
The extension code itself is kept to a minimum, to maintain privacy and ease of review.
The insights are provided by the `gitowl.dev` iframe, which is embedded in the sidebar and doesn't have access to the content of the page.
The extension is only responsible for:
- Controlling the sidebar state
- Identifying the entity being viewed
- Instantiating the iframe
- Passing the entity name to the iframe
- Storing authentication token
## Architecture
Extension consists of the [content script](./src/content/index.tsx), the [frame](./src/frame/index.html) page and the [worker](./src/worker/index.ts).
### Content Script
- runs in the context of the page
- creates & controls the sidebar
- identifies the entity being viewed
- instantiates frame.html as an iframe
- posts messages to iframe if the entity changes
### Frame Page
The frame page contains the `gitowl.dev` iframe, it is needed to prevent issues with embedding iframe with a different origin.
- Relays messages from the content script to `gitowl.dev` (URL changes)
- Attaches authentication token to the `gitowl.dev` URL
### Worker (chromium only)
Listens for messages from `gitowl.dev` and stores the authentication token.
## Development
1. Install dependencies
```shell
$ npm install
```
2. Run the dev script
```shell
$ npm run dev
```
The extension preview will be available at `http://localhost:5173`. Alternatively, it can also be loaded as an unpacked extension (see below).
### Loading the extension (Chrome)
```shell
# Builds the extension and watches for changes
$ npm run build:watch
```
- Open the Extension Management page by navigating to `chrome://extensions`.
- Enable Developer Mode by clicking the toggle switch next to Developer mode.
- Click the `LOAD UNPACKED` button and select the `dist` directory.
- Note: there is no automatic reloading, so you will need to manually reload the extension to see changes.
## Build & Pack
The build script simply bundles the extension and zips the contents of the `dist` directory.
```shell
$ ./scripts/create-release.sh
```