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, the frame page and the worker.

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

$ npm install

2. Run the dev script

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

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

$ ./scripts/create-release.sh