Průvodce vývojem a publikací WebExtensions pro Chrome, Firefox, Edge a Safari
Tento přehled shrnuje klíčové požadavky, doporučení a zásady pro vývoj rozšíření (WebExtensions) kompatibilních s aktuálně hlavními prohlížeči:
Google Chrome, Mozilla Firefox, Microsoft Edge a Apple Safari.
🔧 1. Architektura a základní technologie
- manifest.json: Základní konfigurační soubor. Chrome, Edge, Safari vyžadují verzi 3, Firefox podporuje i verzi 2.
- HTML / CSS / JavaScript: Použití klasických webových technologií pro UI. Lze využít bundlování přes Webpack, Vite apod.
- Background script: Zpracovává události a interakce s API.
- Content script: Spouští se ve stránkách, do kterých rozšíření zasahuje.
- Popup a options stránky: Uživatelské rozhraní – nezávislé HTML.
- API: `chrome.*` (Chrome, Edge), `browser.*` (Firefox), Safari podporuje WebExtensions API přes konverzi.
🔐 2. Zásady zabezpečení
- Nepoužívej
eval(),new Function()– porušuje Content Security Policy (CSP). - Nevkládej externí skripty – všechny musí být součástí balíčku.
- Definuj silnou CSP v manifestu:
script-src 'self'. - Sanituj všechny vstupy z webu – např. pomocí DOMPurify.
- Žádej pouze nezbytná oprávnění – méně znamená vyšší šanci na schválení.
- Pravidelně aktualizuj knihovny.
🔏 3. Ochrana soukromí
- Nikdy neodesílej data bez souhlasu uživatele.
- Uveď jasný popis, jaká data sbíráš a proč.
- Preferuj
storage.localpřed cloudem. - Nepoužívej fingerprinting.
- Umožni uživatelům smazat všechna uložená data.
⚙️ 4. Výkon a optimalizace
- Používej lazy loading – načítej kód jen při potřebě.
- Injektuj skripty jen tam, kde je to nezbytné (přes
matches). - Optimalizuj bundle – odstraň nepoužívaný kód.
- Profiluj výkon pomocí DevTools nebo
about:performance.
🎨 5. Uživatelská zkušenost (UX)
- Responzivní a srozumitelné popupy a nastavení.
- Dodržuj zásady přístupnosti (kontrast, ARIA, ovládání klávesnicí).
- Podpora více jazyků pomocí
_locales/. - Dodržuj velikosti ikon: 16x16, 48x48, 128x128.
🛒 6. Publikace do jednotlivých "store"
| Prohlížeč | Požadavky |
|---|---|
| Chrome Web Store |
|
| Firefox AMO |
|
| Edge Add-ons |
|
| Safari App Store |
|
🧰 Doporučené nástroje a technologie
- Bundling: Webpack, Vite, Rollup
- Lintování: ESLint, Prettier
- Testování: Jest, Mocha,
web-ext - Bezpečnost: DOMPurify, eslint-plugin-no-unsanitized
- CI/CD: GitHub Actions, vlastní skripty
- Safari vývoj: Xcode + Web Extension Converter
🧰 Doporučené nástroje a technologie pro WebExtensions
🔧 Bundling: Webpack, Vite, Rollup
- Webpack: Výkonný a rozšiřitelný bundler – vhodný pro větší projekty.
- Vite: Extrémně rychlý bundler, vhodný pro moderní vývoj (např. React, Svelte).
- Rollup: Tree-shaking a minimalistický výstup – vhodné pro knihovny a malá rozšíření.
🧹 Lintování: ESLint, Prettier
- ESLint: Analýza kódu, detekce chyb, bezpečnostních rizik.
- Prettier: Automatické formátování kódu.
🧪 Testování: Jest, Mocha, web-ext
- Jest: Jednoduchý, výkonný testovací nástroj.
- Mocha: Flexibilní framework, vhodný pro složitější testování.
- web-ext: Nástroj od Mozilly pro testování a build WebExtensions.
🛡️ Bezpečnost: DOMPurify, eslint-plugin-no-unsanitized
- DOMPurify: Sanitizace HTML pro ochranu proti XSS.
- eslint-plugin-no-unsanitized: ESLint plugin, který pomáhá detekovat nebezpečné manipulace s DOM.
🔄 CI/CD: GitHub Actions, vlastní skripty
- GitHub Actions: Automatizace testování, buildů, publikace.
- Vlastní skripty: Pro verzování, zipování a nasazení rozšíření.
🍏 Safari vývoj: Xcode + Web Extension Converter
- Xcode: Vývojové prostředí potřebné pro Safari rozšíření.
- Safari Web Extension Converter: Převod Chrome/Firefox rozšíření do formátu pro Safari.
📁 Ukázky konfigurací
webpack.config.js
const path = require('path');
module.exports = {{
entry: './src/background.js',
output: {{
path: path.resolve(__dirname, 'dist'),
filename: 'background.js'
}},
mode: 'production'
}};.eslintrc.json
{{
"env": {{
"browser": true,
"es2021": true
}},
"extends": "eslint:recommended",
"parserOptions": {{
"ecmaVersion": 12
}},
"plugins": ["no-unsanitized"],
"rules": {{
"no-console": "warn"
}}
}}web-ext-config.js
module.exports = {{
sourceDir: 'dist',
artifactsDir: 'web-ext-artifacts',
ignoreFiles: ['node_modules']
}};Vygenerováno: 2025-04-15
#dev
Dev
Code
Plugin
Best practices
