# Chrome Extension

Save any webpage as an AI agent skill from your browser

# Chrome Extension

Save any webpage as a SKILL.md directly from your browser.

## Install

1. Download the extension from the [releases page](https://github.com/rohitg00/skillkit/releases)
2. Open `chrome://extensions` in Chrome
3. Enable "Developer mode" (top right)
4. Click "Load unpacked" and select the `packages/extension/dist/` folder

Or build from source:

```
git clone https://github.com/rohitg00/skillkit.git
cd skillkit
pnpm install && pnpm --filter @skillkit/extension build
```

Then load `packages/extension/dist/` as an unpacked extension.

## Usage

### Popup

1. Navigate to any webpage
2. Click the SkillKit extension icon
3. Optionally enter a custom skill name
4. Click **Save as Skill**

The extension sends the page URL to the SkillKit API, which extracts the content as markdown, generates tags using weighted 5-source analysis, and returns a complete SKILL.md. The file downloads to your `Downloads/skillkit-skills/` folder.

### Context Menu

Right-click on any page:

- **Save page as Skill** — sends the URL to the API, downloads the result
- **Save selection as Skill** — builds the skill locally from selected text (no network request)

### Making Skills Available to Agents

After downloading, install the skill so all agents can use it:

```
skillkit install ~/Downloads/skillkit-skills/my-skill
```

Or copy directly:

```
cp -r ~/Downloads/skillkit-skills/my-skill ~/.skillkit/skills/
skillkit sync
```

## How It Works

```
Extension → POST /api/save-skill { url } → Server pipeline → Download
```

1. **Popup** reads the current tab's URL and title via `activeTab` permission. No content script injection needed.

2. **Background service worker** sends the URL to `skillkit.sh/api/save-skill` (or `agenstskills.com/api/save-skill`):
   - Server fetches the page and converts HTML to markdown via Turndown
   - GitHub URLs are auto-converted to raw content
   - Tags are detected from 5 weighted sources (URL segments, headings, code blocks, keywords, language)
   - Returns a complete SKILL.md with YAML frontmatter
3. **Download** — the service worker creates a blob and saves via `chrome.downloads` API.

4. **Selection saves** work entirely offline — Chrome natively provides `selectionText` via the context menu API, so the skill is built locally with no server round-trip.

## Permissions

| Permission | Why |
| --- | --- |
| `contextMenus` | Right-click "Save as Skill" menu items |
| `activeTab` | Access current page URL and title on click |
| `downloads` | Save SKILL.md files to disk |

No `host_permissions` or `scripting` permissions needed. Only the page URL is sent to the server — no page content, browsing history, or personal data.

## Generated SKILL.md Format

```
---
name: react-performance-tips
description: Optimizing React rendering with memo and useMemo
tags:
  - react
  - javascript
  - testing
metadata:
  source: https://example.com/react-performance
  savedAt: 2026-02-14T09:00:00.000Z
---

# React Performance Tips

The extracted markdown content of the page...
```

## Building from Source

The extension uses tsup to bundle TypeScript into IIFE format for browser compatibility:

```
pnpm --filter @skillkit/extension build
```

Output goes to `packages/extension/dist/` with:

- `background.global.js` — Service worker (~4KB)
- `popup.global.js` — Popup UI logic (~2KB)
- `popup.html` \+ `popup.css` — Monochromatic UI
- `manifest.json` — Chrome Manifest V3
- `icons/` — 16/48/128px PNG icons

### On this page

### Chrome Extension
### Install
### Usage
### Popup
### Context Menu
### Making Skills Available to Agents
### How It Works
### Permissions
### Generated SKILL.md Format
### Building from Source