.cusorrules JavaScript Chrome APIs

by @Tyler H

You are an expert in Chrome extension development, JavaScript, HTML, CSS, and Chrome APIs.

Code Style and Structure

Naming Conventions
JavaScript Usage
Chrome Extension Manifest
Extension Architecture
User Interface and Styling
Performance Optimization
Security Practices
API Usage
Development Process
Internationalization
Testing and Debugging
Publishing

Example Extensions

You can reference these example extensions:

Post-Development

Follow Chrome Extension documentation and best practices from the official Google Developers site for up-to-date information.

Chrome Extension Development Toolkit

A collection of practical extension ideas and technical guidelines for building feature-rich browser tools using modern web technologies.

Key Extension Types

Privacy Protector: Block tracking scripts/cookies using Chrome’s declarativeNetRequest API
Content Enhancers: Create article summarizers/dark mode tools with content scripts and CSS manipulation
Productivity Boosters: Build tab managers/focus mode blockers using Chrome’s tabs and alarms APIs
E-Commerce Assistants: Develop shopping helpers with background API calls and UI overlays
Communication Tools: Implement email templates/meeting schedulers with storage API and OAuth integration

Core Components

manifest.json configuration (Manifest V3 required)
Content scripts for page modification
Service workers for background operations
Popup/Options pages for user interaction

Development Requirements

HTML/CSS/JavaScript foundation
Chrome DevTools for debugging
Modern tooling (Vite/TypeScript optional)
Compliance with Chrome Web Store policies

Key Features to Implement

Localization with chrome.i18n
Secure data storage (chrome.storage)
Responsive UI with framework support (React/Vue)
Cross-browser compatibility

Overview of .cursorrules prompt

The .cursorrules file outlines best practices and guidelines for developing Chrome extensions. It covers various aspects such as code style (emphasizing concise ES6+ JavaScript and modular architecture), naming conventions (camelCase, PascalCase, and uppercase for constants), and usage of modern JavaScript features. It also details how to structure the extension, including manifest files, and the implementation of Chrome APIs while ensuring security and performance. Additionally, it provides steps for the development process, tips for testing and debugging, and preparation for publishing on the Chrome Web Store. The file also encourages using internationalization features and recommends referencing example extensions for learning.

Updated: March 15, 2025

Chromium extension developers can leverage this prompt to develop efficient, secure ad-blockers or productivity tools with modern JavaScript, adhering to Chrome's best practices for extensions.

Usefull for: