Chrome Extension

What it does

When your agent uses it

• The user mentions Chrome extension
• Browser extension
• Service worker (in extension context)
• Chrome.scripting

Example prompts

• “/chrome-extension”

Requirements

• Compatibility (from SKILL.md): Designed for Claude Code or similar AI coding agents. Requires git, node.
• Pre-approved tools (allowed-tools): Read, Edit, Write, Glob, Grep, Bash(git:*), Bash(gh:*), Bash(npm:*)

Workflow steps

5 steps, taken from the first numbered list in SKILL.md.

1. 1Service worker is ephemeral. It terminates after 30s of inactivity. All state must be persisted to chrome.storage. All event listeners…
2. 2Content scripts run in the page's origin. Network requests from content scripts are subject to the page's CSP and CORS. To bypass, relay…
3. 3Messaging is the backbone. Every cross-context interaction uses chrome.runtime messaging.
4. 4Permissions determine CWS review speed. Broad host_permissions trigger manual review (weeks). activeTab + optional permissions = fast…
5. 5Popup is destroyed on blur. Side panel persists. Choose based on interaction duration.

What it can do on your machine

Read from SKILL.md and the folder at commit e5199b5. It shows what the files ask for, not the result of running them.

• Tool permissions

  Pre-approves these tools, so the agent can use them without asking each time:

  • Read
  • Edit
  • Write
  • Glob
  • Grep
  • Bash(git:*)
  • Bash(gh:*)
  • Bash(npm:*)

  From allowed-tools in the SKILL.md frontmatter.

• Runs code

  No scripts in the folder and no shell commands in SKILL.md (its code samples are typescript and json).

  From the folder's file list and the shell code blocks in SKILL.md.

• Network

  No URLs in SKILL.md.

  From URLs in SKILL.md, links to its own repository left out.

• Credentials

  Names no API keys, tokens, secrets or passwords.

  From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

• Compatibility

  Designed for Claude Code or similar AI coding agents. Requires git, node.

  From compatibility in the SKILL.md frontmatter.

Context cost

Chrome Extension loads about 4.2k tokens when it runs, and up to ~38k if it reads all its reference files. Until then it costs about 180 tokens; SKILL.md has 996 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it

~180

When it runs · the whole SKILL.md, loaded when a task matches

~4.2k

With references · SKILL.md plus every file in references/, read only if the agent opens them

~38k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from LeoYeAI/openclaw-master-skills at commit e5199b5, republished under its MIT licence (© LeoYeAI). 996 words, ~4,234 tokens.

name

chrome-extension

description

"Comprehensive guide for building Chrome extensions with Manifest V3. Use this skill whenever the user mentions Chrome extension, browser extension, manifest.json, content script, service worker (in extension context), popup, side panel, chrome.runtime, chrome.tabs, chrome.storage, chrome.scripting, background script, MV3, Manifest V3, or any Chrome extension API. Also trigger when the user wants to inject scripts into web pages, communicate between page and background, bypass CSP from a content script, build an RPC layer over chrome messaging, or publish to the Chrome Web Store. Covers both new extension projects and adding features to existing ones. Do NOT use for framework-specific questions.

allowed-tools

Read, Edit, Write, Glob, Grep, Bash(git:*), Bash(gh:*), Bash(npm:*)

compatibility

Designed for Claude Code or similar AI coding agents. Requires git, node.

user-invocable

true

license

MIT

metadata

author: samber version: "1.0.0" openclaw: emoji: "📝" homepage: https://github.com/samber/cc-skills requires: bins: - git - node - npm

┌──────────────────────────────────────────────────────────┐
│ Extension Process                                        │
│  ┌─────────────────┐  ┌───────┐  ┌─────────┐  ┌──────┐ │
│  │ Service Worker   │  │ Popup │  │ Options │  │ Side │ │
│  │ (background)     │  │       │  │  Page   │  │Panel │ │
│  │ - No DOM         │  │ Full  │  │  Full   │  │ Full │ │
│  │ - Ephemeral      │  │ DOM   │  │  DOM    │  │ DOM  │ │
│  │ - All chrome.*   │  │ All   │  │  All    │  │ All  │ │
│  │   APIs           │  │ APIs  │  │  APIs   │  │ APIs │ │
│  └────────┬─────────┘  └───┬───┘  └────┬────┘  └──┬───┘ │
│           │ chrome.runtime.sendMessage / connect   │     │
└───────────┼────────────────┼───────────┼──────────┼──────┘
            │                │           │          │
    chrome.tabs.sendMessage  │           │          │
            │                │           │          │
┌───────────┼────────────────┼───────────┼──────────┼──────┐
│ Web Page  ▼                                              │
│  ┌──────────────────┐    ┌──────────────────┐            │
│  │ Content Script    │    │ Main World Script │            │
│  │ (isolated world)  │◄──►│ (page context)    │            │
│  │ - Shared DOM      │    │ - Shared DOM      │            │
│  │ - Own JS scope    │    │ - Page JS scope   │            │
│  │ - chrome.runtime  │    │ - No chrome.* API │            │
│  │ - chrome.storage  │    │ - Full page access│            │
│  │ - Subject to CSP  │    │ - Subject to CSP  │            │
│  │   (network only)  │    │   (fully)         │            │
│  └──────────────────┘    └──────────────────┘            │
│           ▲ window.postMessage                           │
│           │ (through shared DOM)                         │
└──────────────────────────────────────────────────────────┘

┌───────────────────────────────────────────────────────────────────────────┐
│ Extension Process                                                         │
│                                                                           │
│  ┌─────────────────┐  chrome.runtime   ┌───────┐  ┌─────────┐  ┌──────┐ │
│  │ Service Worker   │◄─.sendMessage()──│ Popup │  │ Options │  │ Side │ │
│  │ (background)     │◄─.connect()──────│       │  │  Page   │  │Panel │ │
│  │                  │                  └───────┘  └─────────┘  └──────┘ │
│  │ - No DOM         │  ┌────────────────────────────────────────────┐   │
│  │ - Ephemeral 30s  │  │ SW cannot push to these pages.             │   │
│  │ - All chrome.*   │  │ Use: ports (.connect) or storage.onChanged │   │
│  └────────┬─────────┘  └────────────────────────────────────────────┘   │
│           │                                                              │
│  chrome.storage.onChanged ◄── fires across ALL contexts simultaneously  │
│                                                                           │
└───────────┼──────────────────────────────────────────────────────────────┘
            │ chrome.tabs.sendMessage(tabId, ...) [SW must know tabId]
            │
┌───────────┼──────────────────────────────────────────────────────────────┐
│ Web Page  ▼                                                              │
│  ┌──────────────────┐  window.postMessage  ┌──────────────────┐         │
│  │ Content Script    │◄───────────────────►│ Main World Script │         │
│  │ (isolated world)  │  Custom DOM events  │ (page context)    │         │
│  │                   │                     │                   │         │
│  │ chrome.runtime ───┼── to/from SW        │ No chrome.* APIs  │         │
│  │ chrome.storage    │                     │ Full page JS      │         │
│  │ Shared DOM        │                     │ Shared DOM        │         │
│  │ Page CSP (network)│                     │ Page CSP (full)   │         │
│  └──────────────────┘                     └──────────────────┘         │
└──────────────────────────────────────────────────────────────────────────┘

{
  "manifest_version": 3,
  "name": "My Extension",
  "version": "1.0.0",
  "description": "What it does in one sentence",
  "permissions": ["storage", "activeTab", "scripting"],
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icons/icon16.png",
      "48": "icons/icon48.png",
      "128": "icons/icon128.png"
    }
  },
  "background": {
    "service_worker": "background.js",
    "type": "module"
  },
  "icons": {
    "16": "icons/icon16.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  }
}

// Wrap async handlers to avoid the return-true trap
function asyncHandler(fn: (msg: any, sender: chrome.runtime.MessageSender) => Promise<any>) {
  return (message: any, sender: chrome.runtime.MessageSender, sendResponse: (r: any) => void) => {
    fn(message, sender)
      .then(sendResponse)
      .catch(e => sendResponse({ __error: true, message: e.message }));
    return true; // literal true, not Promise<true>
  };
}

chrome.runtime.onMessage.addListener(asyncHandler(async (msg, sender) => {
  if (msg.type === 'FETCH') {
    const res = await fetch(msg.url);
    return { ok: res.ok, data: await res.text() };
  }
}));

// content-script.ts
async function apiCall(endpoint: string, options?: RequestInit) {
  return chrome.runtime.sendMessage({ type: 'API_RELAY', endpoint, options });
}

// background.ts
const ALLOWED_ENDPOINTS = ['https://api.example.com'];
chrome.runtime.onMessage.addListener(asyncHandler(async (msg) => {
  if (msg.type !== 'API_RELAY') return;
  if (!ALLOWED_ENDPOINTS.some(e => msg.endpoint.startsWith(e))) {
    throw new Error('Blocked endpoint');
  }
  const res = await fetch(msg.endpoint, msg.options);
  return { ok: res.ok, status: res.status, data: await res.text() };
}));

// Use chrome.storage.session for ephemeral state
chrome.storage.session.setAccessLevel({ accessLevel: 'TRUSTED_AND_UNTRUSTED_CONTEXTS' });

async function getState<T>(key: string, fallback: T): Promise<T> {
  const result = await chrome.storage.session.get(key);
  return result[key] ?? fallback;
}
async function setState<T>(key: string, value: T): Promise<void> {
  await chrome.storage.session.set({ [key]: value });
}

function isExtensionContextValid(): boolean {
  try { return !!chrome.runtime?.id; }
  catch { return false; }
}

// Before any chrome.runtime call
if (!isExtensionContextValid()) {
  showRefreshBanner();
  return;
}

© LeoYeAI, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 14 other files (references) in skills/chrome-extension of LeoYeAI/openclaw-master-skills.

• SKILL.md
• _meta.json
• references/content-scripts.md
• references/debugging-mistakes.md
• references/execution-contexts.md
• references/manifest-v3.md
• references/messaging-rpc.md
• references/network-csp.md
• references/permissions.md
• references/publishing.md
• references/service-worker.md
• references/storage.md
• references/typescript-build.md
• references/ui-surfaces.md
• references/web-accessible-resources.md

Open the folder on GitHubat commit e5199b5

Used in 1 other repository

We found 1 copy of this SKILL.md (exact, near-identical or edited) in other folders, from 1 other GitHub owner. This page covers the copy in LeoYeAI/openclaw-master-skills, which our catalogue first saw on October 7, 2026.

• samber/cc-skillsskills/chrome-extension