mirror of
https://github.com/JosunLP/BrowserExtensionTemplate.git
synced 2025-10-14 16:10:10 +00:00
feat: Implement ErrorBoundary class for global error handling
feat: Refactor Session class to use LocalStorageService for session management feat: Enhance BasicButton component with configuration options and event handling style: Update SASS variables to CSS custom properties for better theming support style: Modify app.sass to include Bootstrap with legacy import chore: Update settings.ts to handle session initialization and error notifications fix: Improve buttonType definition for better readability chore: Refactor parse.ts for cleaner file handling and keyword replacement chore: Enhance syncConfig.ts with TypeScript interfaces and async file operations chore: Update v2.ts to modify manifest.json for compatibility with manifest version 2 chore: Revise tsconfig.json for stricter type checking and improved module resolution chore: Refactor vite.config.ts for better build configuration and asset management
This commit is contained in:
JonasPfalzgraf
parent
8f99895c88
commit
482151f980
24 changed files with 1321 additions and 418 deletions
215
README.md
215
README.md
|
|
@ -4,35 +4,222 @@
|
|||
[](https://github.com/JosunLP/BrowserExtensionTemplate/network)
|
||||
[](https://github.com/JosunLP/BrowserExtensionTemplate/stargazers)
|
||||
[](https://github.com/JosunLP/BrowserExtensionTemplate)
|
||||
[](https://twitter.com/intent/tweet?text=Look+what+i+found+on+GitHub+%23Developer%2C+%23SoftwareDeveloper%3A&url=https%3A%2F%2Fgithub.com%2FJosunLP%2FBrowserExtensionTemplate)
|
||||
[](https://www.codefactor.io/repository/github/josunlp/browserextensiontemplate)
|
||||
[](https://snyk.io/test/github/JosunLP/BrowserExtensionTemplate)
|
||||
|
||||
## Description
|
||||
|
||||
A basic template based on SASS and TypeScript to create browser extensions without directly relying on a larger framework.
|
||||
A modern, production-ready template for building browser extensions using TypeScript, SASS, and Vite. This template provides a solid foundation with best practices, type safety, and modern development tools.
|
||||
|
||||
## Features
|
||||
|
||||
- 🚀 **Modern Tech Stack**: TypeScript, SASS, Vite, Bootstrap
|
||||
- 🛡️ **Type Safety**: Strict TypeScript configuration with comprehensive error checking
|
||||
- 🔧 **Development Tools**: ESLint, Prettier, automated workflows
|
||||
- 🎯 **Cross-Browser**: Supports both Chrome (Manifest v3) and Firefox (Manifest v2)
|
||||
- 📦 **Component System**: Reusable UI components with type safety
|
||||
- 💾 **Session Management**: Robust localStorage-based session handling
|
||||
- 🛠️ **Build System**: Optimized Vite configuration with code splitting
|
||||
- 🎨 **Modern CSS**: CSS Custom Properties with SASS preprocessing
|
||||
- 🔒 **Security**: Content Security Policy and secure coding practices
|
||||
- ⚡ **Error Handling**: Comprehensive error boundary system
|
||||
|
||||
## Installation
|
||||
|
||||
You can download the source code from [GitHub](https://github.com/JosunLP/BrowserExtensionTemplate). Just copy it in your project and run `npm install` to install the dependencies.
|
||||
The basic configuration, wich will sync with `npm run sync` with the `package.json` file and the `manifest.json` file, is in `app.config.json`.
|
||||
Alternatively, you can fork the project and run `npm install` in the forked project.
|
||||
### Quick Start
|
||||
|
||||
```bash
|
||||
git clone https://github.com/JosunLP/BrowserExtensionTemplate.git
|
||||
cd BrowserExtensionTemplate
|
||||
npm install
|
||||
```
|
||||
|
||||
### Development Setup
|
||||
|
||||
```bash
|
||||
# Install dependencies
|
||||
npm install
|
||||
|
||||
# Start development mode with auto-rebuild
|
||||
npm run dev
|
||||
|
||||
# Type checking
|
||||
npm run type-check
|
||||
|
||||
# Linting and formatting
|
||||
npm run validate
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
Your sourcecode can be written in the `src` folder. The `public` folder contains static files like images, html and the manifest.json.
|
||||
With the `npm run deploy-v3` command you can deploy the extension to the dist folder, ready to be published to the chrome web store.
|
||||
With the `npm run deploy-v2` command you can deploy the extension to the dist folder, ready to be published to the firefox web store.
|
||||
This is necessary because the firefox web store needs the `manifest.json` file to be present in the version v2.
|
||||
### Project Structure
|
||||
|
||||
## License
|
||||
```bash
|
||||
src/
|
||||
├── classes/ # Core classes (Session, ErrorBoundary)
|
||||
├── components/ # Reusable UI components
|
||||
├── sass/ # SASS styles with CSS custom properties
|
||||
├── types/ # TypeScript type definitions
|
||||
├── app.ts # Popup entry point
|
||||
├── settings.ts # Options page entry point
|
||||
└── background.ts # Background service worker
|
||||
|
||||
This project is licensed under the [MIT license](https://opensource.org/licenses/MIT).
|
||||
public/
|
||||
├── icons/ # Extension icons
|
||||
├── manifest.json # Extension manifest
|
||||
├── popup.html # Popup HTML template
|
||||
└── options.html # Options page HTML template
|
||||
|
||||
tools/ # Build and automation scripts
|
||||
```
|
||||
|
||||
### Configuration
|
||||
|
||||
The main configuration is in `app.config.json`. This file is automatically synchronized with `package.json` and `manifest.json`:
|
||||
|
||||
```json
|
||||
{
|
||||
"AppData": {
|
||||
"id": "your_extension_id",
|
||||
"name": "Your Extension Name",
|
||||
"version": "1.0.0",
|
||||
"description": "Your extension description"
|
||||
},
|
||||
"htmlTemplatePairs": [
|
||||
{
|
||||
"key": "{{PLACEHOLDER}}",
|
||||
"value": "Replacement Value"
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
### Build Commands
|
||||
|
||||
```bash
|
||||
# Development
|
||||
npm run dev # Start development with watch mode
|
||||
npm run sync # Sync configuration files
|
||||
|
||||
# Production
|
||||
npm run deploy-v3 # Build for Chrome (Manifest v3)
|
||||
npm run deploy-v2 # Build for Firefox (Manifest v2)
|
||||
|
||||
# Quality Assurance
|
||||
npm run validate # Type check + lint
|
||||
npm run lint # ESLint with auto-fix
|
||||
npm run format # Prettier formatting
|
||||
|
||||
# Utilities
|
||||
npm run clean # Clean dist folder
|
||||
npm run build-tooling # Compile TypeScript tools
|
||||
```
|
||||
|
||||
### Development Workflow
|
||||
|
||||
1. **Configure your extension** in `app.config.json`
|
||||
2. **Run sync** to update all config files: `npm run sync`
|
||||
3. **Start development**: `npm run dev`
|
||||
4. **Write your code** in the `src/` directory
|
||||
5. **Build for production**: `npm run deploy-v3` or `npm run deploy-v2`
|
||||
6. **Load the extension** from the `dist/` folder in your browser
|
||||
|
||||
### Session Management
|
||||
|
||||
The template includes a robust session management system:
|
||||
|
||||
```typescript
|
||||
import { Session } from './classes/session';
|
||||
|
||||
// Get session instance (async)
|
||||
const session = await Session.getInstance();
|
||||
|
||||
// Save data
|
||||
session.contentTest = 'New value';
|
||||
await session.save();
|
||||
|
||||
// Reset session
|
||||
await Session.reset();
|
||||
```
|
||||
|
||||
### Error Handling
|
||||
|
||||
Built-in error boundary system:
|
||||
|
||||
```typescript
|
||||
import { ErrorBoundary } from './classes/errorBoundary';
|
||||
|
||||
const errorBoundary = ErrorBoundary.getInstance();
|
||||
|
||||
// Wrap async functions
|
||||
const safeAsyncFunction = errorBoundary.wrapAsync(asyncFunction);
|
||||
|
||||
// Add custom error handlers
|
||||
errorBoundary.addErrorHandler(error => {
|
||||
console.log('Custom error handling:', error);
|
||||
});
|
||||
```
|
||||
|
||||
### Component System
|
||||
|
||||
Type-safe, reusable components:
|
||||
|
||||
```typescript
|
||||
import { BasicButton } from './components/button';
|
||||
|
||||
// Create button
|
||||
const button = new BasicButton('primary', 'Click me', 'my-button');
|
||||
|
||||
// Render as HTML string
|
||||
const htmlString = button.render();
|
||||
|
||||
// Or create as DOM element
|
||||
const buttonElement = button.createElement();
|
||||
```
|
||||
|
||||
## Browser Compatibility
|
||||
|
||||
- **Chrome**: Manifest v3 (recommended)
|
||||
- **Firefox**: Manifest v2 (automatically converted)
|
||||
- **Edge**: Manifest v3 compatible
|
||||
|
||||
## Contributing
|
||||
|
||||
This project is open source. Feel free to fork and contribute!
|
||||
1. Fork the repository
|
||||
2. Create a feature branch: `git checkout -b feature/amazing-feature`
|
||||
3. Make your changes and ensure tests pass: `npm run validate`
|
||||
4. Commit your changes: `git commit -m 'Add amazing feature'`
|
||||
5. Push to the branch: `git push origin feature/amazing-feature`
|
||||
6. Open a Pull Request
|
||||
|
||||
## Development Guidelines
|
||||
|
||||
- Follow TypeScript best practices
|
||||
- Use meaningful variable and function names
|
||||
- Add proper error handling
|
||||
- Write self-documenting code
|
||||
- Follow the established project structure
|
||||
- Run `npm run validate` before committing
|
||||
|
||||
## License
|
||||
|
||||
This project is licensed under the [MIT License](https://opensource.org/licenses/MIT).
|
||||
|
||||
## Author
|
||||
|
||||
Jonas Pfalzgraf
|
||||
**_Jonas Pfalzgraf_**
|
||||
|
||||
- Email: <info@josunlp.de>
|
||||
- GitHub: [@JosunLP](https://github.com/JosunLP)
|
||||
|
||||
## Changelog
|
||||
|
||||
### v0.0.1 (Current)
|
||||
|
||||
- ✨ Modern TypeScript setup with strict type checking
|
||||
- 🛡️ Comprehensive error handling system
|
||||
- 🎨 CSS Custom Properties with SASS
|
||||
- 🔧 ESLint and Prettier configuration
|
||||
- 📦 Optimized Vite build system
|
||||
- 🚀 Cross-browser compatibility (Chrome/Firefox)
|
||||
- 💾 Robust session management
|
||||
- 🎯 Component-based architecture
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue