{"id":26665927,"url":"https://github.com/josunlp/browserextensiontemplate","last_synced_at":"2026-05-08T05:02:52.440Z","repository":{"id":115801007,"uuid":"524981507","full_name":"JosunLP/BrowserExtensionTemplate","owner":"JosunLP","description":"A basic template based on SASS and TypeScript to create browser extensions.","archived":false,"fork":false,"pushed_at":"2024-06-01T01:43:52.000Z","size":115,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-27T20:46:02.431Z","etag":null,"topics":["browser","browser-extension","chrome","chrome-extension","chrome-extensions","firefox","firefox-extension","opera-extension","sass","template","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/JosunLP.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-08-15T12:38:54.000Z","updated_at":"2024-06-01T01:43:32.000Z","dependencies_parsed_at":"2024-04-15T11:20:00.793Z","dependency_job_id":null,"html_url":"https://github.com/JosunLP/BrowserExtensionTemplate","commit_stats":null,"previous_names":[],"tags_count":8,"template":true,"template_full_name":null,"purl":"pkg:github/JosunLP/BrowserExtensionTemplate","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JosunLP%2FBrowserExtensionTemplate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JosunLP%2FBrowserExtensionTemplate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JosunLP%2FBrowserExtensionTemplate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JosunLP%2FBrowserExtensionTemplate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JosunLP","download_url":"https://codeload.github.com/JosunLP/BrowserExtensionTemplate/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JosunLP%2FBrowserExtensionTemplate/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263088135,"owners_count":23412001,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["browser","browser-extension","chrome","chrome-extension","chrome-extensions","firefox","firefox-extension","opera-extension","sass","template","typescript"],"created_at":"2025-03-25T17:51:30.490Z","updated_at":"2025-10-14T08:06:04.476Z","avatar_url":"https://github.com/JosunLP.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# BrowserExtensionTemplate\n\n[![GitHub issues](https://img.shields.io/github/issues/JosunLP/BrowserExtensionTemplate?style=for-the-badge)](https://github.com/JosunLP/BrowserExtensionTemplate/issues)\n[![GitHub forks](https://img.shields.io/github/forks/JosunLP/BrowserExtensionTemplate?style=for-the-badge)](https://github.com/JosunLP/BrowserExtensionTemplate/network)\n[![GitHub stars](https://img.shields.io/github/stars/JosunLP/BrowserExtensionTemplate?style=for-the-badge)](https://github.com/JosunLP/BrowserExtensionTemplate/stargazers)\n[![GitHub license](https://img.shields.io/github/license/JosunLP/BrowserExtensionTemplate?style=for-the-badge)](https://github.com/JosunLP/BrowserExtensionTemplate)\n[![CodeFactor](https://www.codefactor.io/repository/github/josunlp/browserextensiontemplate/badge?style=for-the-badge)](https://www.codefactor.io/repository/github/josunlp/browserextensiontemplate)\n\n## Description\n\nA 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.\n\n## Features\n\n- 🚀 **Modern Tech Stack**: TypeScript, SASS, Vite, Bootstrap\n- 🛡️ **Type Safety**: Strict TypeScript configuration with comprehensive error checking\n- 🔧 **Development Tools**: ESLint, Prettier, automated workflows\n- 🎯 **Cross-Browser**: Supports both Chrome (Manifest v3) and Firefox (Manifest v2)\n- 📦 **Component System**: Reusable UI components with type safety\n- 💾 **Session Management**: Robust localStorage-based session handling\n- 🛠️ **Build System**: Optimized Vite configuration with code splitting\n- 🎨 **Modern CSS**: CSS Custom Properties with SASS preprocessing\n- 🔒 **Security**: Content Security Policy and secure coding practices\n- ⚡ **Error Handling**: Comprehensive error boundary system\n\n## Installation\n\n### Quick Start\n\n```bash\ngit clone https://github.com/JosunLP/BrowserExtensionTemplate.git\ncd BrowserExtensionTemplate\nnpm install\n```\n\n### Development Setup\n\n```bash\n# Install dependencies\nnpm install\n\n# Start development mode with auto-rebuild\nnpm run dev\n\n# Type checking\nnpm run type-check\n\n# Linting and formatting\nnpm run validate\n```\n\n## Usage\n\n### Project Structure\n\n```bash\nsrc/\n├── classes/           # Core classes (Session, ErrorBoundary)\n├── components/        # Reusable UI components\n├── sass/             # SASS styles with CSS custom properties\n├── types/            # TypeScript type definitions\n├── app.ts            # Popup entry point\n├── settings.ts       # Options page entry point\n└── background.ts     # Background service worker\n\npublic/\n├── icons/            # Extension icons\n├── manifest.json     # Extension manifest\n├── popup.html        # Popup HTML template\n└── options.html      # Options page HTML template\n\ntools/                # Build and automation scripts\n```\n\n### Configuration\n\nThe main configuration is in `app.config.json`. This file is automatically synchronized with `package.json` and `manifest.json`:\n\n```json\n{\n  \"AppData\": {\n    \"id\": \"your_extension_id\",\n    \"name\": \"Your Extension Name\",\n    \"version\": \"1.0.0\",\n    \"description\": \"Your extension description\"\n  },\n  \"htmlTemplatePairs\": [\n    {\n      \"key\": \"{{PLACEHOLDER}}\",\n      \"value\": \"Replacement Value\"\n    }\n  ]\n}\n```\n\n### Build Commands\n\n```bash\n# Development\nnpm run dev              # Start development with watch mode\nnpm run sync            # Sync configuration files\n\n# Production\nnpm run deploy-v3       # Build for Chrome (Manifest v3)\nnpm run deploy-v2       # Build for Firefox (Manifest v2)\n\n# Quality Assurance\nnpm run validate        # Type check + lint\nnpm run lint           # ESLint with auto-fix\nnpm run format         # Prettier formatting\n\n# Utilities\nnpm run clean          # Clean dist folder\nnpm run build-tooling  # Compile TypeScript tools\n```\n\n### Development Workflow\n\n1. **Configure your extension** in `app.config.json`\n2. **Run sync** to update all config files: `npm run sync`\n3. **Start development**: `npm run dev`\n4. **Write your code** in the `src/` directory\n5. **Build for production**: `npm run deploy-v3` or `npm run deploy-v2`\n6. **Load the extension** from the `dist/` folder in your browser\n\n### Session Management\n\nThe template includes a robust session management system:\n\n```typescript\nimport { Session } from './classes/session';\n\n// Get session instance (async)\nconst session = await Session.getInstance();\n\n// Save data\nsession.contentTest = 'New value';\nawait session.save();\n\n// Reset session\nawait Session.reset();\n```\n\n### Error Handling\n\nBuilt-in error boundary system:\n\n```typescript\nimport { ErrorBoundary } from './classes/errorBoundary';\n\nconst errorBoundary = ErrorBoundary.getInstance();\n\n// Wrap async functions\nconst safeAsyncFunction = errorBoundary.wrapAsync(asyncFunction);\n\n// Add custom error handlers\nerrorBoundary.addErrorHandler(error =\u003e {\n  console.log('Custom error handling:', error);\n});\n```\n\n### Component System\n\nType-safe, reusable components:\n\n```typescript\nimport { BasicButton } from './components/button';\n\n// Create button\nconst button = new BasicButton('primary', 'Click me', 'my-button');\n\n// Render as HTML string\nconst htmlString = button.render();\n\n// Or create as DOM element\nconst buttonElement = button.createElement();\n```\n\n## Browser Compatibility\n\n- **Chrome**: Manifest v3 (recommended)\n- **Firefox**: Manifest v2 (automatically converted)\n- **Edge**: Manifest v3 compatible\n\n## Contributing\n\n1. Fork the repository\n2. Create a feature branch: `git checkout -b feature/amazing-feature`\n3. Make your changes and ensure tests pass: `npm run validate`\n4. Commit your changes: `git commit -m 'Add amazing feature'`\n5. Push to the branch: `git push origin feature/amazing-feature`\n6. Open a Pull Request\n\n## Development Guidelines\n\n- Follow TypeScript best practices\n- Use meaningful variable and function names\n- Add proper error handling\n- Write self-documenting code\n- Follow the established project structure\n- Run `npm run validate` before committing\n\n## License\n\nThis project is licensed under the [MIT License](https://opensource.org/licenses/MIT).\n\n## Author\n\n**_Jonas Pfalzgraf_**\n\n- Email: \u003cinfo@josunlp.de\u003e\n- GitHub: [@JosunLP](https://github.com/JosunLP)\n\n## Changelog\n\n### v0.0.1 (Current)\n\n- ✨ Modern TypeScript setup with strict type checking\n- 🛡️ Comprehensive error handling system\n- 🎨 CSS Custom Properties with SASS\n- 🔧 ESLint and Prettier configuration\n- 📦 Optimized Vite build system\n- 🚀 Cross-browser compatibility (Chrome/Firefox)\n- 💾 Robust session management\n- 🎯 Component-based architecture\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjosunlp%2Fbrowserextensiontemplate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjosunlp%2Fbrowserextensiontemplate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjosunlp%2Fbrowserextensiontemplate/lists"}