Chrome Extension Template 🚀

Read this in other languages: 日本語

A template for easily developing the latest Chrome extensions

📋 Table of Contents

• Features
• File Structure
• Installation
• Usage
• Customization Guide
• Development Tips
• How to Contribute
• Technical Specifications
• Todo

Features 💯

🌙 ⟷ ☀️ Dark Mode	🔄 Auto-Save	🌐 Site-Specific Settings
📦 Data Management	📱 Modern UI	🔌 Manifest V3

• Manifest V3 Compatible: Designed according to the latest Chrome extension API
• Modular Design: Properly segregated background scripts, content scripts, popup, and settings screens
• Dark Mode Support: Dark mode toggle feature to enhance user experience
• Data Management: Data import/export functionality for easy migration of settings
• Site-Specific Settings: Customize behavior for specific domains
• Auto-Save Functionality: Real-time saving and synchronization of user settings

File Structure 📁

chrome-extension/
│
├── manifest.json           # Extension configuration file
│
├── scripts/
│   └── background.js       # Background script
│
├── content/
│   ├── content.js          # Content script
│   └── content.css         # Content styles
│
├── popup/
│   ├── popup.html          # Popup HTML
│   ├── popup.css           # Popup styles
│   └── popup.js            # Popup script
│
├── options/
│   ├── options.html        # Options page HTML
│   ├── options.css         # Options page styles
│   └── options.js          # Options page script
│
└── assets/
    └── icons/              # Icon files

System Architecture 🔄

Component	Role	Features
🔄 Background Script	Resident Process	Event Monitoring & Data Management
📄 Content Script	Web Page Operation	DOM Manipulation & User Interaction
🖥️ Popup UI	User Settings	Setting Changes & Display Control
💾 Chrome Storage	Data Storage	Settings & State Persistence

⚙️ Component Interaction Flow ⚙️

Background Script ⟷ Chrome Storage
⬆️ ⬇️
Content Script ⟷ Web Page
⬆️ ⬇️
Popup UI ⟷ User

Installation 🔧

Requirements

• Google Chrome browser (v88+ recommended)
• Developer mode enabled

Steps

1. Clone the repository:

   git clone https://github.com/yourusername/chrome-extension-template.git
   cd chrome-extension-template

2. Load the extension in Chrome:

   • Open chrome://extensions in Chrome
   • Turn on "Developer mode"
   • Click "Load unpacked"
   • Select the cloned directory

🔍	Access chrome://extensions
🔧	Turn on "Developer mode" in the top right
📦	Click "Load unpacked"
✅	Verify the extension has been loaded successfully

Usage 👆

Basic Features

• Enable/Disable Extension: Toggle on/off with popup button
• Theme Switching: Switch between light/dark modes
• Feature Settings: Turn individual features on/off

Detailed Settings

• Update Interval: Set the frequency of data updates
• Operation Mode: Select operation mode based on performance
• Custom CSS: Apply your own styles
• Site-Specific Settings: Customize extension behavior for specific domains

Customization Guide 🛠️

Editing the Manifest

Edit manifest.json to set basic information for your extension:

{
  "name": "Your Extension Name",
  "description": "Description of your extension",
  "version": "Version number"
}

Permission Settings

Add only necessary permissions to respect user privacy:

"permissions": [
  "storage",  // For basic data storage
  // Add other necessary permissions
]

Adding Icons

Add icons of the following sizes to the assets/icons/ directory:

• icon16.png (16x16 px)
• icon48.png (48x48 px)
• icon128.png (128x128 px)

Key Features ✨

• Simple Design: Easy-to-understand structure, even for beginners
• Minimal Permissions: Respects user privacy
• Modern UI: Intuitive interface
• Fast Performance: Optimized for speed

Development Tips 💡

1. Console Logs: Check logs for background.js and content.js in developer tools
2. Hot Reload: Refresh changes with the refresh button on the extensions page
3. Debugging: Debug using the inspect tool on the background page
4. Storage: Save settings using chrome.storage.local

How to Contribute 🤝

1. Fork the repository 🍴
2. Add new features or improvements ✨
3. Submit a pull request 🚀

Contribution Guidelines:

• Follow code style 📏
• Write clear commit messages 📝
• Provide detailed explanations of changes 🔍

Technical Specifications 💻

• Manifest Version: Manifest V3
• ES6+ Support: Utilizing the latest JavaScript features
• Modular: Background script as ServiceWorker
• Storage API: Data storage with chrome.storage.local
• Message Passing: Component communication via messaging

Todo 📝

• Add icon files
• Create onboarding page
• Cross-browser support (Firefox adjustments)
• Add unit tests
• Set up build automation scripts

License 📄

MIT License

---

© 2025 My Chrome Extension Template
Made with ❤️ by E20C1