feat: add Chrome extension to save webpages as skills (#60)

Fully browser-based — no local server required. Content script extracts
page content as markdown (Turndown), background generates SKILL.md with
frontmatter and auto-tags, and downloads via chrome.downloads API.

- Manifest V3 with contextMenus, activeTab, downloads permissions
- Content script: HTML-to-markdown via Turndown, extracts article/main
- Background: SKILL.md generation (slugify, YAML frontmatter, tag detection)
- Downloads to skillkit-skills/{name}/SKILL.md in browser Downloads folder
- Monochromatic popup UI matching website design system
- Context menu: "Save page as Skill" / "Save selection as Skill"
- POST /save API endpoint still available for CLI users

Author: rohitg00

packages/api/src/routes/save.ts

@@ -0,0 +1,95 @@
+import { Hono } from 'hono';
+import { ContentExtractor, SkillGenerator, AutoTagger } from '@skillkit/core';
+
+interface SaveRequest {
+  url?: string;
+  text?: string;
+  name?: string;
+  global?: boolean;
+}
+
+const MAX_TEXT_LENGTH = 500_000;
+
+const BLOCKED_HOSTS = new Set(['localhost', '127.0.0.1', '[::1]', '::1', '0.0.0.0']);
+
+function isAllowedUrl(url: string): boolean {
+  try {
+    const parsed = new URL(url);
+    if (parsed.protocol !== 'http:' && parsed.protocol !== 'https:') return false;
+
+    const hostname = parsed.hostname.toLowerCase();
+    const bare = hostname.replace(/^\[|\]$/g, '');
+
+    if (BLOCKED_HOSTS.has(hostname) || BLOCKED_HOSTS.has(bare)) return false;
+    if (bare.startsWith('::ffff:')) return isAllowedUrl(`http://${bare.slice(7)}`);
+    if (/^127\./.test(bare) || /^0\./.test(bare)) return false;
+    if (bare.startsWith('10.') || bare.startsWith('192.168.')) return false;
+    if (/^172\.(1[6-9]|2\d|3[01])\./.test(bare)) return false;
+    if (bare.startsWith('169.254.')) return false;
+    if (bare.startsWith('fe80:') || bare.startsWith('fc') || bare.startsWith('fd')) return false;
+    if (/^(22[4-9]|23\d|24\d|25[0-5])\./.test(bare)) return false;
+    if (bare.startsWith('ff')) return false;
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+export function saveRoutes() {
+  const app = new Hono();
+  const extractor = new ContentExtractor();
+  const generator = new SkillGenerator();
+  const tagger = new AutoTagger();
+
+  app.post('/save', async (c) => {
+    let body: SaveRequest;
+    try {
+      body = await c.req.json();
+    } catch {
+      return c.json({ error: 'Invalid JSON body' }, 400);
+    }
+
+    if (!body.url && !body.text) {
+      return c.json({ error: 'Either "url" or "text" is required' }, 400);
+    }
+
+    if (body.url && !isAllowedUrl(body.url)) {
+      return c.json({ error: 'URL must be a public HTTP(S) address' }, 400);
+    }
+
+    if (body.text && body.text.length > MAX_TEXT_LENGTH) {
+      return c.json({ error: `Text exceeds maximum length of ${MAX_TEXT_LENGTH} characters` }, 400);
+    }
+
+    try {
+      const content = body.url
+        ? await extractor.extractFromUrl(body.url)
+        : extractor.extractFromText(body.text!);
+
+      const result = generator.generate(content, {
+        name: body.name,
+        global: body.global ?? true,
+      });
+
+      return c.json({
+        name: result.name,
+        skillPath: result.skillPath,
+        skillMd: result.skillMd,
+        tags: tagger.detectTags(content),
+      });
+    } catch (err) {
+      const message = err instanceof Error ? err.message : 'Unknown error';
+      const isTimeout =
+        (err instanceof DOMException && err.name === 'TimeoutError') ||
+        (err instanceof Error && (err.name === 'TimeoutError' || err.name === 'AbortError'));
+
+      if (isTimeout) {
+        return c.json({ error: `Fetch timeout: ${message}` }, 504);
+      }
+
+      return c.json({ error: `Extraction failed: ${message}` }, 422);
+    }
+  });
+
+  return app;
+}

packages/api/src/server.ts

@@ -8,6 +8,7 @@ import { skillRoutes } from './routes/skills.js';
 import { trendingRoutes } from './routes/trending.js';
 import { categoryRoutes } from './routes/categories.js';
 import { docsRoutes } from './routes/docs.js';
+import { saveRoutes } from './routes/save.js';
 import type { ApiSkill, SearchResponse } from './types.js';
 
 export interface ServerOptions {
@@ -37,6 +38,7 @@ export function createApp(options: ServerOptions = {}) {
   app.route('/', trendingRoutes(skills));
   app.route('/', categoryRoutes(skills));
   app.route('/', docsRoutes());
+  app.route('/', saveRoutes());
 
   return { app, cache };
 }

packages/extension/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "@skillkit/extension",
+  "version": "1.16.0",
+  "private": true,
+  "description": "Chrome extension to save any webpage as an AI agent skill",
+  "type": "module",
+  "scripts": {
+    "build": "tsup && cp src/manifest.json dist/ && cp src/popup.html dist/ && cp src/popup.css dist/ && cp -r src/icons dist/",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "turndown": "^7.2.2"
+  },
+  "devDependencies": {
+    "@types/chrome": "^0.0.280",
+    "@types/turndown": "^5.0.6",
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.2"
+  }
+}

packages/extension/src/background.ts

@@ -0,0 +1,159 @@
+import type { SaveResponse, ErrorResponse, ExtensionMessage } from './types';
+
+const TECH_KEYWORDS = new Set([
+  'react', 'vue', 'angular', 'svelte', 'next', 'nuxt', 'node', 'deno', 'bun',
+  'typescript', 'javascript', 'python', 'rust', 'go', 'java', 'kotlin', 'swift',
+  'docker', 'kubernetes', 'aws', 'gcp', 'azure', 'terraform', 'ansible',
+  'graphql', 'rest', 'api', 'sql', 'nosql', 'redis', 'postgres', 'mongodb',
+  'testing', 'ci', 'cd', 'git', 'webpack', 'vite', 'tailwind', 'css',
+  'ai', 'ml', 'llm', 'mcp', 'agent', 'prompt', 'rag', 'embedding',
+]);
+
+chrome.runtime.onInstalled.addListener(() => {
+  chrome.contextMenus.create({
+    id: 'save-page',
+    title: 'Save page as Skill',
+    contexts: ['page'],
+  });
+
+  chrome.contextMenus.create({
+    id: 'save-selection',
+    title: 'Save selection as Skill',
+    contexts: ['selection'],
+  });
+});
+
+chrome.contextMenus.onClicked.addListener(async (info, tab) => {
+  if (!tab?.id) return;
+
+  try {
+    if (info.menuItemId === 'save-page') {
+      const pageInfo = await chrome.tabs.sendMessage(tab.id, { type: 'GET_PAGE_INFO' });
+      if (pageInfo?.type === 'PAGE_INFO') {
+        const { url, title, markdown } = pageInfo.payload;
+        const result = generateAndDownload({ url, title, content: markdown });
+        notifyTab(tab.id, result);
+      }
+    }
+
+    if (info.menuItemId === 'save-selection' && info.selectionText) {
+      const url = tab.url ?? '';
+      const result = generateAndDownload({ url, title: '', content: info.selectionText });
+      notifyTab(tab.id, result);
+    }
+  } catch {
+    notifyTab(tab.id, { error: 'Failed to extract page content' });
+  }
+});
+
+chrome.runtime.onMessage.addListener(
+  (message: ExtensionMessage, _sender, sendResponse) => {
+    if (message.type === 'SAVE_PAGE') {
+      const { url, title, markdown, name } = message.payload;
+      sendResponse(generateAndDownload({ url, title, content: markdown, name }));
+    } else if (message.type === 'SAVE_SELECTION') {
+      const { text, url, name } = message.payload;
+      sendResponse(generateAndDownload({ url, title: '', content: text, name }));
+    }
+    return false;
+  },
+);
+
+interface GenerateInput {
+  url: string;
+  title: string;
+  content: string;
+  name?: string;
+}
+
+function generateAndDownload(input: GenerateInput): SaveResponse | ErrorResponse {
+  try {
+    const name = slugify(input.name || input.title || titleFromUrl(input.url));
+    const tags = detectTags(input.url, input.content);
+    const description = makeDescription(input.content);
+    const savedAt = new Date().toISOString();
+
+    const yamlTags = tags.length > 0
+      ? `tags:\n${tags.map((t) => `  - ${t}`).join('\n')}\n`
+      : '';
+
+    const skillMd =
+      `---\n` +
+      `name: ${name}\n` +
+      `description: ${yamlEscape(description)}\n` +
+      yamlTags +
+      `metadata:\n` +
+      (input.url ? `  source: ${input.url}\n` : '') +
+      `  savedAt: ${savedAt}\n` +
+      `---\n\n` +
+      input.content + '\n';
+
+    const filename = `${name}/SKILL.md`;
+
+    const blob = new Blob([skillMd], { type: 'text/markdown' });
+    const blobUrl = URL.createObjectURL(blob);
+
+    chrome.downloads.download({
+      url: blobUrl,
+      filename: `skillkit-skills/${filename}`,
+      saveAs: false,
+    }, () => {
+      URL.revokeObjectURL(blobUrl);
+    });
+
+    return { name, filename, skillMd, tags };
+  } catch (err) {
+    return { error: err instanceof Error ? err.message : 'Generation failed' };
+  }
+}
+
+function slugify(input: string): string {
+  const slug = input
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/^-+|-+$/g, '')
+    .replace(/-{2,}/g, '-');
+  return slug.slice(0, 64).replace(/-+$/, '') || 'untitled-skill';
+}
+
+function titleFromUrl(url: string): string {
+  try {
+    const pathname = new URL(url).pathname;
+    const last = pathname.split('/').filter(Boolean).pop();
+    return last ?? 'untitled';
+  } catch {
+    return 'untitled';
+  }
+}
+
+function makeDescription(content: string): string {
+  const firstLine = content.split('\n').find((l) => l.trim().length > 0) ?? '';
+  const cleaned = firstLine.replace(/^#+\s*/, '').trim();
+  if (cleaned.length > 200) return cleaned.slice(0, 197) + '...';
+  return cleaned || 'Saved skill';
+}
+
+function yamlEscape(value: string): string {
+  const singleLine = value.replace(/\r?\n/g, ' ').trim();
+  if (/[:#{}[\],&*?|>!%@`]/.test(singleLine) || singleLine.startsWith("'") || singleLine.startsWith('"')) {
+    return `"${singleLine.replace(/\\/g, '\\\\').replace(/"/g, '\\"')}"`;
+  }
+  return singleLine;
+}
+
+function detectTags(url: string, content: string): string[] {
+  const text = `${url} ${content}`.toLowerCase();
+  const found: string[] = [];
+  for (const kw of TECH_KEYWORDS) {
+    if (text.includes(kw)) found.push(kw);
+    if (found.length >= 10) break;
+  }
+  return found;
+}
+
+function notifyTab(tabId: number, result: SaveResponse | ErrorResponse): void {
+  const isError = 'error' in result;
+  chrome.action.setBadgeText({ text: isError ? '!' : '\u2713', tabId });
+  chrome.action.setBadgeBackgroundColor({ color: isError ? '#ef4444' : '#22c55e', tabId });
+  setTimeout(() => chrome.action.setBadgeText({ text: '', tabId }), 3000);
+}

packages/extension/src/content.ts

@@ -0,0 +1,38 @@
+import TurndownService from 'turndown';
+import type { ExtensionMessage, PageContent } from './types';
+
+const turndown = new TurndownService({
+  headingStyle: 'atx',
+  codeBlockStyle: 'fenced',
+});
+
+turndown.remove(['script', 'style', 'nav', 'footer', 'iframe', 'noscript']);
+
+function extractPageContent(): PageContent {
+  const selection = window.getSelection()?.toString() ?? '';
+  const description =
+    document.querySelector('meta[name="description"]')?.getAttribute('content') ?? '';
+
+  const article = document.querySelector('article, main, [role="main"]');
+  const source = article ?? document.body;
+  const markdown = turndown.turndown(source.innerHTML);
+
+  return {
+    url: window.location.href,
+    title: document.title || description || window.location.hostname,
+    markdown,
+    selection,
+    description,
+  };
+}
+
+chrome.runtime.onMessage.addListener(
+  (message: ExtensionMessage, _sender, sendResponse) => {
+    if (message.type === 'GET_PAGE_INFO') {
+      const content = extractPageContent();
+      const response: ExtensionMessage = { type: 'PAGE_INFO', payload: content };
+      sendResponse(response);
+    }
+    return false;
+  },
+);

packages/extension/src/icons/icon.svg

@@ -0,0 +1,29 @@
+{
+  "manifest_version": 3,
+  "name": "SkillKit - Save as Skill",
+  "version": "1.16.0",
+  "description": "Save any webpage as an AI agent skill — instantly available across 44 agents",
+  "permissions": ["contextMenus", "activeTab", "storage", "downloads"],
+  "background": {
+    "service_worker": "background.global.js"
+  },
+  "action": {
+    "default_popup": "popup.html",
+    "default_icon": {
+      "16": "icons/icon16.png",
+      "48": "icons/icon48.png",
+      "128": "icons/icon128.png"
+    }
+  },
+  "content_scripts": [
+    {
+      "matches": ["<all_urls>"],
+      "js": ["content.global.js"]
+    }
+  ],
+  "icons": {
+    "16": "icons/icon16.png",
+    "48": "icons/icon48.png",
+    "128": "icons/icon128.png"
+  }
+}