diff --git a/.eslintrc.json b/.eslintrc.json deleted file mode 100644 index 83d0a6a..0000000 --- a/.eslintrc.json +++ /dev/null @@ -1,31 +0,0 @@ -{ - "env": { - "browser": true, - "es2022": true, - "webextensions": true - }, - "extends": ["eslint:recommended", "@typescript-eslint/recommended"], - "parser": "@typescript-eslint/parser", - "parserOptions": { - "ecmaVersion": "latest", - "sourceType": "module" - }, - "plugins": ["@typescript-eslint"], - "rules": { - "@typescript-eslint/no-unused-vars": [ - "error", - { - "argsIgnorePattern": "^_", - "varsIgnorePattern": "^_" - } - ], - "@typescript-eslint/explicit-function-return-type": "warn", - "@typescript-eslint/no-explicit-any": "error", - "@typescript-eslint/prefer-const": "error", - "@typescript-eslint/no-var-requires": "error", - "prefer-const": "error", - "no-var": "error", - "no-console": "warn" - }, - "ignorePatterns": ["dist/", "node_modules/", "*.js"] -} diff --git a/.prettierignore b/.prettierignore deleted file mode 100644 index 611cf4f..0000000 --- a/.prettierignore +++ /dev/null @@ -1,8 +0,0 @@ -node_modules/ -dist/ -*.log -.DS_Store -.vscode/ -.idea/ -*.sass -*.scss diff --git a/.prettierrc.json b/.prettierrc.json deleted file mode 100644 index aa3f49e..0000000 --- a/.prettierrc.json +++ /dev/null @@ -1,19 +0,0 @@ -{ - "semi": true, - "trailingComma": "es5", - "singleQuote": true, - "printWidth": 100, - "tabWidth": 2, - "useTabs": false, - "bracketSpacing": true, - "arrowParens": "avoid", - "endOfLine": "auto", - "overrides": [ - { - "files": "*.json", - "options": { - "parser": "json" - } - } - ] -} diff --git a/README.md b/README.md index 7ed4257..d9c9633 100644 --- a/README.md +++ b/README.md @@ -4,222 +4,35 @@ [![GitHub forks](https://img.shields.io/github/forks/JosunLP/BrowserExtensionTemplate?style=for-the-badge)](https://github.com/JosunLP/BrowserExtensionTemplate/network) [![GitHub stars](https://img.shields.io/github/stars/JosunLP/BrowserExtensionTemplate?style=for-the-badge)](https://github.com/JosunLP/BrowserExtensionTemplate/stargazers) [![GitHub license](https://img.shields.io/github/license/JosunLP/BrowserExtensionTemplate?style=for-the-badge)](https://github.com/JosunLP/BrowserExtensionTemplate) +[![Twitter URL](https://img.shields.io/twitter/url?logo=twitter&style=for-the-badge&url=https%3A%2F%2Fgithub.com%2FJosunLP%2FBrowserExtensionTemplate)](https://twitter.com/intent/tweet?text=Look+what+i+found+on+GitHub+%23Developer%2C+%23SoftwareDeveloper%3A&url=https%3A%2F%2Fgithub.com%2FJosunLP%2FBrowserExtensionTemplate) [![CodeFactor](https://www.codefactor.io/repository/github/josunlp/browserextensiontemplate/badge?style=for-the-badge)](https://www.codefactor.io/repository/github/josunlp/browserextensiontemplate) +[![Known Vulnerabilities](https://snyk.io/test/github/JosunLP/BrowserExtensionTemplate/badge.svg?style=for-the-badge)](https://snyk.io/test/github/JosunLP/BrowserExtensionTemplate) ## Description -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 +A basic template based on SASS and TypeScript to create browser extensions without directly relying on a larger framework. ## Installation -### 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 -``` +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. ## Usage -### Project Structure - -```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 - -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 - -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 +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. ## License -This project is licensed under the [MIT License](https://opensource.org/licenses/MIT). +This project is licensed under the [MIT license](https://opensource.org/licenses/MIT). + +## Contributing + +This project is open source. Feel free to fork and contribute! ## Author -**_Jonas Pfalzgraf_** - -- Email: -- 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 +Jonas Pfalzgraf diff --git a/app.config.json b/app.config.json index 96a13dc..e5ceac0 100644 --- a/app.config.json +++ b/app.config.json @@ -1,29 +1,29 @@ { - "AppData": { - "id": "browser_extension_template", - "name": "Browser Extension Template", - "version": "0.0.1", - "description": "A basic template based on SASS and TypeScript to create browser extensions without directly relying on a larger framework.", - "repository": { - "type": "git", - "url": "git+ssh://git@github.com:JosunLP/BrowserExtensionTemplate.git" + "AppData": { + "id": "browser_extension_template", + "name": "Browser Extension Template", + "version": "0.0.1", + "description": "A basic template based on SASS and TypeScript to create browser extensions without directly relying on a larger framework.", + "repository": { + "type": "git", + "url": "git+ssh://git@github.com:JosunLP/BrowserExtensionTemplate.git" + }, + "license": "MIT", + "homepage": "https://github.com/JosunLP/BrowserExtensionTemplate", + "bugs": { + "url": "https://github.com/JosunLP/BrowserExtensionTemplate/issues" + }, + "authors": [ + { + "name": "Jonas Pfalzgraf", + "email": "info@josunlp.de" + } + ] }, - "license": "MIT", - "homepage": "https://github.com/JosunLP/BrowserExtensionTemplate", - "bugs": { - "url": "https://github.com/JosunLP/BrowserExtensionTemplate/issues" - }, - "authors": [ - { - "name": "Jonas Pfalzgraf", - "email": "info@josunlp.de" - } + "htmlTemplatePairs": [ + { + "key": "{{BET}}", + "value": "Browser Extension Template" + } ] - }, - "htmlTemplatePairs": [ - { - "key": "{{BET}}", - "value": "Browser Extension Template" - } - ] -} +} \ No newline at end of file diff --git a/eslint.config.js b/eslint.config.js deleted file mode 100644 index 0a5419c..0000000 --- a/eslint.config.js +++ /dev/null @@ -1,55 +0,0 @@ -import js from '@eslint/js'; -import tsPlugin from '@typescript-eslint/eslint-plugin'; -import tsParser from '@typescript-eslint/parser'; - -export default [ - { - ignores: ['dist/', 'node_modules/', '**/*.js'], - }, - js.configs.recommended, - { - files: ['src/**/*.ts'], - languageOptions: { - parser: tsParser, - ecmaVersion: 'latest', - sourceType: 'module', - globals: { - chrome: 'readonly', - browser: 'readonly', - console: 'readonly', - document: 'readonly', - window: 'readonly', - localStorage: 'readonly', - sessionStorage: 'readonly', - HTMLElement: 'readonly', - HTMLDivElement: 'readonly', - HTMLButtonElement: 'readonly', - HTMLInputElement: 'readonly', - setTimeout: 'readonly', - clearTimeout: 'readonly', - crypto: 'readonly', - Error: 'readonly', - JSON: 'readonly', - Date: 'readonly', - String: 'readonly', - }, - }, - plugins: { - '@typescript-eslint': tsPlugin, - }, - rules: { - ...tsPlugin.configs.recommended.rules, - '@typescript-eslint/no-unused-vars': [ - 'error', - { - argsIgnorePattern: '^_', - varsIgnorePattern: '^_', - }, - ], - '@typescript-eslint/no-explicit-any': 'error', - 'prefer-const': 'error', - 'no-var': 'error', - 'no-console': 'off', - }, - }, -]; diff --git a/package.json b/package.json index 1bfa990..933d358 100644 --- a/package.json +++ b/package.json @@ -2,39 +2,20 @@ "name": "browser_extension_template", "version": "0.0.1", "private": true, - "type": "module", "scripts": { - "deploy-v3": "npm run clean && npm run build-tooling && npm run sync && npm run build && npm run parse", + "deploy-v3": "npx rimraf ./dist/ && npm run build-tooling && npm run sync && npm run build && node ./tools/parse.js", "deploy-v2": "npm run deploy-v3 && node ./tools/v2.js", "build": "vite build", "build-tooling": "tsc --project ./tooling.tsconfig.json", "watch": "vite build --watch", - "sync": "npm run build-tooling && node ./tools/syncConfig.js", - "parse": "node ./tools/parse.js", - "clean": "npx rimraf ./dist/", - "dev": "npm run sync && npm run watch", - "lint": "eslint src/**/*.ts --fix", - "format": "prettier --write src/**/*.{ts,json}", - "format:ts": "prettier --write src/**/*.ts", - "format:json": "prettier --write src/**/*.json", - "type-check": "tsc --noEmit", - "validate": "npm run type-check && npm run lint", - "prepare": "npm run validate && npm run build-tooling" + "sync": "npm run build-tooling && node ./tools/syncConfig.js" }, "devDependencies": { - "@eslint/eslintrc": "^3.3.1", - "@eslint/js": "^9.30.1", "@types/chrome": "^0.0.268", "@types/node": "^20.13.0", - "@typescript-eslint/eslint-plugin": "^8.36.0", - "@typescript-eslint/parser": "^8.36.0", "@webcomponents/webcomponentsjs": "^2.8.0", - "eslint": "^9.30.1", - "prettier": "^3.6.2", - "rimraf": "^5.0.10", "sass": "^1.77.4", - "typescript": "^5.8.3", - "vite": "^7.0.4", + "vite": "^5.2.12", "vite-tsconfig-paths": "^4.3.2" }, "browserslist": [ @@ -62,4 +43,4 @@ "@webcomponents/custom-elements": "^1.6.0", "bootstrap": "^5.3.3" } -} \ No newline at end of file +} diff --git a/public/manifest.json b/public/manifest.json index 6d17cfa..42ee42b 100644 --- a/public/manifest.json +++ b/public/manifest.json @@ -15,27 +15,12 @@ "default_popup": "popup.html" }, "options_ui": { - "page": "options.html", - "open_in_tab": false + "page": "options.html" }, "permissions": [ - "storage", "notifications" ], "background": { "service_worker": "background.js" - }, - "content_security_policy": { - "extension_pages": "script-src 'self'; object-src 'self'; style-src 'self' 'unsafe-inline';" - }, - "web_accessible_resources": [ - { - "resources": [ - "icons/*.png" - ], - "matches": [ - "" - ] - } - ] + } } \ No newline at end of file diff --git a/public/options.html b/public/options.html index c9a0e6b..9456208 100644 --- a/public/options.html +++ b/public/options.html @@ -1,22 +1,22 @@ - - + + - - - + + + + {{BET}} Options
- +

Settings

-
+
+