Is the injected code performance-friendly?

Yes, it uses debouncing and requestAnimationFrame to ensure that observers and event handlers do not block the main thread or degrade the user experience.

How does this skill handle SPA navigation?

It implements throttled MutationObservers and idempotent check patterns to ensure UI elements are correctly managed as the page content changes without a full reload.

Can this help with building web scrapers?

Absolutely. It includes best practices for identifying stable DOM anchors and landmarker roles to create robust scrapers that resist minor site updates.

How are CSS conflicts with the host page avoided?

The skill provides patterns for using Shadow DOM and unique root containers with scoped styling to ensure the extension's UI doesn't leak into the host page.

Does it support Manifest V3 standards?

Yes, the skill is specifically designed for modern Chrome MV3 standards, focusing on isolated worlds and communication with background service workers.

Content Script Developer

Name: Content Script Developer
Author: shipshitdev

byshipshitdev

•

Browser Automation

Builds reliable, non-intrusive browser extension content scripts with robust DOM integration and performance-optimized UI injection.

This skill transforms Claude into an expert browser extension developer focused on modern Manifest V3 standards. It provides specialized guidance on injecting UIs into third-party websites without polluting the host's global namespace or degrading performance. By utilizing patterns like Shadow DOM, idempotent rendering, and throttled MutationObservers, it helps developers navigate complex scenarios such as Single Page Application (SPA) navigation and secure messaging between content scripts and background service workers, ensuring extensions remain stable even as target sites evolve.

Key Features

01Secure messaging patterns between content scripts and background workers

02Accessibility-first UI patterns including ARIA labels and focus management

03Safe UI injection using Shadow DOM and unique root containers

04Performance-optimized DOM monitoring via throttled MutationObservers

0510 GitHub stars

06Idempotent script execution to prevent duplicate injections on SPA navigation

Use Cases

01Developing web scrapers that adapt to dynamic content changes in SPAs

02Building UI overlays for SaaS platforms without CSS conflicts

03Implementing secure data extraction and persistent storage in Chrome extensions

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add shipshitdev/library content-script-developer

For use in Claude.ai and ChatGPT

Download Skill