Průvodce vývojem a publikací WebExtensions

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.local př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	Developer účet (5 USD jednorázově) manifest v3 CSP a zákaz eval() Popis, screenshoty, ikony Soulad s Chrome program policies
Firefox AMO	manifest v2 nebo v3 Testování přes web-ext Popis, souhlas s pravidly Add-on policies
Edge Add-ons	Účet v Microsoft Partner Center Lze importovat z Chrome Web Store Soulad s Edge pravidly
Safari App Store	Apple Developer Program (99 USD/rok) Xcode + Safari Web Extension Converter Distribuce jako macOS/iOS aplikace Oficiální dokumentace

🧰 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