Chrome Extension Development

What it does

When your agent uses it

• Building browser extensions
• Creating popup UIs
• Implementing content scripts
• Working with Chrome APIs

Example prompts

• “/chrome-extension-development”

Workflow steps

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

1. 1Initialize the project — Create the directory structure with manifest.json, background service worker, content scripts, and popup files.
2. 2Configure the manifest — Define permissions, content script matches, service worker registration, and action settings in Manifest V3 format.
3. 3Implement the background service worker — Set up event listeners for extension lifecycle, messaging, and alarms using the chrome.* API.
4. 4Build content scripts — Write scripts that interact with web page DOM, communicate with the background worker via…
5. 5Create the popup UI — Design the popup HTML/CSS and wire up interactivity with the background and content scripts.
6. 6Add storage and state management — Use chrome.storage.local or chrome.storage.sync to persist user settings and extension state.
7. 7Test and debug — Load the extension unpacked via chrome://extensions, use Chrome DevTools to inspect the service worker and content…
8. 8Package and publish — Prepare store assets (icons, screenshots, description), create a privacy policy, and submit to the Chrome Web Store.

What it can do on your machine

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

• Tool permissions

  Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

  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 json and typescript).

  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.

Context cost

Chrome Extension Development loads about 1.7k tokens when it runs. Until then it costs about 83 tokens; SKILL.md has 527 words of instructions outside code blocks.

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

~83

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

~1.7k

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 Mindrally/skills at commit 9718410, republished under its Apache-2.0 licence (© Mindrally). 527 words, ~1,654 tokens.

name

chrome-extension-development

description

Expert guidelines for Chrome extension development with Manifest V3, covering security, performance, and best practices. Use when building browser extensions, creating popup UIs, implementing content scripts, working with Chrome APIs, managing extension permissions, or publishing to Chrome Web Store.

{
  "manifest_version": 3,
  "name": "My Extension",
  "version": "1.0.0",
  "description": "A sample Chrome extension using Manifest V3",
  "permissions": ["storage", "activeTab"],
  "action": {
    "default_popup": "popup/popup.html",
    "default_icon": {
      "16": "icons/icon16.png",
      "48": "icons/icon48.png",
      "128": "icons/icon128.png"
    }
  },
  "background": {
    "service_worker": "background/service-worker.js",
    "type": "module"
  },
  "content_scripts": [
    {
      "matches": ["https://*.example.com/*"],
      "js": ["content/content-script.js"],
      "css": ["content/styles.css"]
    }
  ]
}

// background/service-worker.ts

// Listen for extension install or update
chrome.runtime.onInstalled.addListener((details) => {
  if (details.reason === 'install') {
    chrome.storage.local.set({ initialized: true, count: 0 });
    console.log('Extension installed');
  }
});

// Handle messages from content scripts or popup
chrome.runtime.onMessage.addListener(
  (message: { type: string; payload?: unknown }, sender, sendResponse) => {
    if (message.type === 'GET_COUNT') {
      chrome.storage.local.get('count', (result) => {
        sendResponse({ count: result.count ?? 0 });
      });
      return true; // keep message channel open for async response
    }

    if (message.type === 'INCREMENT') {
      chrome.storage.local.get('count', (result) => {
        const newCount = (result.count ?? 0) + 1;
        chrome.storage.local.set({ count: newCount }, () => {
          sendResponse({ count: newCount });
        });
      });
      return true;
    }
  }
);

// Schedule periodic tasks with chrome.alarms
chrome.alarms.create('sync-data', { periodInMinutes: 30 });
chrome.alarms.onAlarm.addListener((alarm) => {
  if (alarm.name === 'sync-data') {
    console.log('Running scheduled sync');
  }
});

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

Files

Just SKILL.md in chrome-extension-development of Mindrally/skills.

Open the folder on GitHubat commit 9718410