Browse

Chrome extension development .cursorrules strategies

Filters

Tech

Clear

React

Tailwind CSS

Node.js

Tailwind

Shadcn UI

JavaScript

Python

Radix UI

Next.js

Vite

JSX

WebP

Zod

Docker

Next.js App Router

Supabase

CSS

PostgreSQL

Redis

FastAPI

HTML

Pydantic

pytest

Git

Jest

react-hook-form

Solidity

Vercel

SQLAlchemy

Tailwind Aria

Suspense

SvelteKit

Vue.js

GitHub Actions

Celery

ESLint

PHP

TailwindCSS

Pinia

PEP 8

asyncpg

TypeScript

SQL

Playwright

Svelte

Prettier

Radix

DaisyUI

Vitest

JSDoc

JSON

ARIA

Drizzle ORM

Vue Router

VueUse

Astro

Svelte 5

tRPC

Expo

CORS

aiomysql

GitLab CI

Django

Typescript

scikit-learn

pandas

GitHub

RabbitMQ

Java

WebP.

tanStackQuery

Phoenix LiveView

Ecto

File System Watcher

Plug

Finch

Gettext

Phoenix

Elixir

Jason

Phoenix LiveDashboard

Sobelow

ExCoveralls

DNS Cluster

ExUnit

Release Please

Swoosh

Credo

LeftHook

ES6

npm

Laravel

styled-components

RESTful API

Shadcn

Markdown

OpenZeppelin

Slither

Hardhat

Mythril

Clear

Server Actions

DRY (Don't Repeat Yourself)

Best practices

Code improvements

Agile methodologies

Modularity

Code comments.

UI Frameworks

Portfolio

Software Dependencies

Efficiency Principles

Mobile-Friendly Design

File Management

Design and User Experience

Cross-Platform Commands

Modular Architecture

NestJS Guidelines

Modern Web Development

User Authentication

Business Logic

User Management

Software Development Lifecycle

Software Development Practices

Development Guidelines

Accessbility

Forms and Actions

Svelte Documentation

Extreme Programming

Software Maintenance.

Software Development Principles

Software Engineering Principles

Code Review Guidelines

State Management.

Web Optimization

Data Model Creation

WordPress plugin

readability

coding standards

code optimization

type hinting

Component-Based Architecture

Styling

Model Quantization

Web Development Tools.

Code Style Guides

Project Scalability

Component Organization.

Error Handling and Feedback

Firebase Best Practices

AI-powered Features

Native-like Features

Consistent Design System

Touch-Friendly UI

Responsive Typography

Animation and Transitions

Software Design Principles

Python Development

Python Coding Standards

Code Best Practices

Software Development Tools

JavaScript Code

Browser Development

Pseudocode Planning

TypeScript Development

Modern Web Practices

Accessibility in Web Design.

Svelte Components

Smart Contract Security

Library Usage

Application Security

Search Technologies.

Testing and Monitoring

Responsive Design.

Communication

Handling Uncertainty

Semantic Naming

Platform Thinking

Problem-Solving

Limitations

Response Format

Data Fetching and Rendering

Cloudflare Tools

TypeScript Coding Practices

Syntax and Formatting Conventions

Microservices

Documentation Best Practices

Technical Documentation

Orchestration

Collaboration

API best practices

code style and structure

user interface design

testing and debugging

publishing processes

development process

internationalization

security practices

naming conventions

Chrome extension development

Expo

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

NEW

JavaScript Chrome APIs .cursorrules prompt file

Cursor Rules for Chrome Extension Development

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

Code Style and Structure

Write concise, technical JavaScript code (ES6+) with accurate examples.
Use functional programming patterns; avoid classes unless necessary.
Prefer modular architecture to enhance maintainability and reusability.
Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError).
Structure extension files: manifest.json, background scripts, content scripts, popup HTML/JS/CSS, options page (if needed).

Naming Conventions

Use camelCase for variable and function names (e.g., getUserData, isExtensionActive).
Use PascalCase for constructor functions and classes.
Use uppercase with underscores for constants (e.g., MAX_RETRY_ATTEMPTS).

JavaScript Usage

Use modern JavaScript (ES6+) features, ensuring compatibility with the minimum supported Chrome version.
Implement proper error handling and input validation.
Use async/await for asynchronous operations when possible.

Chrome Extension Manifest

Use the latest manifest version (v3) unless there's a specific need for v2.
Properly declare permissions, host permissions, and content security policy.
Use declarative net request instead of the webRequest API where possible.

Extension Architecture

Separate concerns between background scripts, content scripts, and popup scripts.
Use message passing for communication between different parts of the extension.
Implement proper state management using Chrome's storage API.

User Interface and Styling

Create intuitive and responsive UI for popup and options pages.
Use CSS frameworks sparingly to keep the extension lightweight.
Implement dark mode support for better user experience.

Performance Optimization

Minimize resource usage in background scripts.
Use event pages instead of persistent background pages when possible.
Optimize content scripts to minimize impact on web page performance.

Security Practices

Implement content security policies to prevent XSS attacks.
Use Chrome's identity API for secure authentication.
Sanitize and validate all user inputs.

API Usage

Utilize Chrome extension APIs effectively (e.g., chrome.tabs, chrome.storage, chrome.runtime).
Implement proper error handling for Chrome API calls.
Use Chrome's alarms API for scheduling tasks instead of setInterval.

Development Process

Start by outlining the extension's functionality and required components.
Create the manifest.json file with necessary permissions and configurations.
Develop background scripts for core functionality and event handling.
Create content scripts for page manipulation (if required).
Design and implement popup UI and functionality.
Develop options page for user-configurable settings (if needed).
Implement message passing between different components.
Write necessary CSS for styling popup and options pages.
Test the extension thoroughly in different scenarios.

Internationalization

Use Chrome's i18n API for multi-language support.
Externalize user-facing strings in _locales folder.

Testing and Debugging

Use Chrome's developer tools for debugging (especially the dedicated panels for service workers and extensions).
Implement unit tests using frameworks like Jest.
Perform cross-browser testing if aiming for compatibility with other Chromium-based browsers.

Publishing

Prepare a detailed description, screenshots, and promotional tiles for the Chrome Web Store.
Create a privacy policy and terms of service if handling user data.
Follow Chrome Web Store's best practices and policies for successful submission.

Example Extensions
You can reference these example extensions: