30. ledna 2025

Web Browser plugin

 

1. Úvod

1.1 Co je Manifest V3

Manifest V3 (MV3) je aktuální standard pro WebExtensions v prohlížečích založených na Chromiu (Chrome, Edge, Brave, Vivaldi). Firefox zatím zachovává podporu Manifest V2 (MV2), ale MV3 již podporuje také. Safari používá vlastní formát, ale konvergoval na většinu konceptů MV3.

MV3 přináší:

  • bezpečnostní omezení (žádný eval, žádné dynamické skripty)

  • Service Workers místo perzistentního background.js

  • deklarativní host_permissions a action

  • omezené API (např. WebRequest nahrazeno declarativeNetRequest)


1.2 Podpora napříč prohlížeči

1.3 Rozdíly MV2 vs. MV3

  • Perzistentní vs. event-driven background

  • Dynamické skripty vs. deklarativní povolení

  • Plné webRequest API vs. declarativeNetRequest


2. Anatomie rozšíření

2.1 manifest.json

Povinný kořenový soubor, definuje:

  • název, verzi, popis

  • permissions, host_permissions

  • background.service_worker

  • action (popup)

  • content_scripts

  • web_accessible_resources

Viz: https://developer.chrome.com/docs/extensions/mv3/manifest

2.2 Background skript – Service Worker

  • Nahradil background.js

  • Běží pouze při události (např. klik, zpráva)

  • Nutnost explicitní registrace listenerů

2.3 Content skripty

  • Vstřikují se do stránek (HTML/JS)

  • Komunikace s background skriptem přes chrome.runtime.sendMessage a onMessage

2.4 UI komponenty

  • action.default_popup: popup.html

  • options_page nebo options_ui

  • side_panel

  • vlastni stránky pomocí chrome-extension:// URL

2.5 Ikony, styly, assets

  • Ikony v PNG: 16px, 48px, 128px

  • CSS/JS pro popup/options

  • web_accessible_resources – co lze načítat ze stránky

3. Technologie a nástroje

3.1 Jazyk a knihovny

  • TypeScript / JavaScript

  • React, Svelte, Vue (přes bundler)

3.2 Bundlery

  • Webpack, Rollup, Vite – výstup do dist/ složky

3.3 Speciální frameworky

  • Plasmo (https://www.plasmo.com/): starter pro MV3 s HMR, auto-bundlingem popupu a backgroundu

  • Bedframe: struktura pro multi-platformní rozšíření

4. AI asistovaný vývoj

4.1 VS Code

  • Doporučeno jako primární editor

  • Pluginy pro linting, autoformátování, testování, debug

4.2 Cursor.com

4.3 Windsurf.com

4.4 Využití LLM

  • Generování boilerplate kódu

  • Tvorba testů, typů, anotací

  • Dokumentace přes JSDoc / TSDoc generovaná automaticky

5. Dokumentace

5.1 Komentáře v kódu

  • JSDoc/TSDoc – pro VSCode i generování dokumentace


5.2 Generování dokumentace

  • TypeDoc, Docusaurus, GitHub Pages

  • Automatické z README.md / src¨

5.3 Changelog a verzování

  • Conventional Commits + Semantic Release

5.4 Roadmapy

5.5 Automatizace

  • CI/CD generuje dokumentaci po každém commitu do hlavní větve

6. Testování

6.1 Jednotkové testy

  • Jest, Mocha

  • Mockování chrome.* pomocí sinon-chrome nebo jest-chrome

6.2 End-to-End testy

  • Playwright, Puppeteer – testy s reálným uživatelským chováním

6.3 Debugging

  • chrome://extensions → aktivace "Developer mode"

  • Načtení rozšíření z dist/

  • Debug přes chrome.runtime, DevTools

7. CI/CD a publikace

7.1 CI/CD

  • GitHub Actions: build → test → verzování → zip → publikace

7.2 Automatické verzování

  • Semantic Release, conventional commits

  • Generování changelogu a tagů

7.3 Publikace

7.4 Oddělené verze

  • Firefox může potřebovat MV2 fallback nebo polyfill

  • browser.* vs. chrome.*

7.5 ZIP balíček

  • zip -r extension.zip dist/*

  • Lint přes web-ext lint

8. Vývojový workflow

8.1 Od nápadu k návrhu

  • Identifikace problému / potřeby

  • Návrh architektury (popup, background, content, storage)

8.2 Iterativní vývoj

  • Lokální testování + hot reload

  • V dev režimu: manifest.json s "host_permissions": ["<all_urls>"]

8.3 Pre-review checklist

  • Oprávnění pouze nutná

  • Žádný eval ani inline JS

  • Vysvětlení oprávnění v popisu rozšíření

8.4 Publikace

8.5 Údržba

  • CI testy + hlídání deprekovaných API

  • Automatická dokumentace + GitHub Issues

9. Open-source příklady

9.1 Bitwarden

9.2 MetaMask

9.3 Dark Reader

9.4 React DevTools

9.5 uBlock Origin Lite (MV3)

9.6 Refined GitHub

🔗 Zdroje:








1. Úvod

1.1 Co je Manifest V3
1.2 Podpora napříč prohlížeči
1.3 Rozdíly mezi MV2 a MV3 

2. Anatomie rozšíření (složková struktura a role souborů)

2.1 Povinný soubor manifest.json
2.2 Background skript (Service Worker)
2.3 Content skripty
2.4 Uživatelské rozhraní:
 - Popup
 - Options page
 - Side panel
 - Extension pages
2.5 Ikony, styly a web_accessible_resources 

3. Technologie a nástroje

3.1 TypeScript, React, Svelte, Vite
3.2 Webpack/Rollup – bundlování
3.3 Speciální frameworky (Plasmo, Bedframe)

4. AI asistovaný vývoj

4.1 VS Code a jeho rozšíření
4.2 Cursor.com – promptování a generování
4.3 Windsurf.com – kontextová editace a údržba
4.4 Využití LLM pro testy, strukturu a komentáře 

5. Dokumentace

5.1 JSDoc / TSDoc
5.2 Docusaurus a uživatelská dokumentace
5.3 Changelog a verzování
5.4 Mermaid.js – roadmapy jako diagramy
5.5 Automatizace generování dokumentace 

6. Testování

6.1 Jednotkové testy (Jest, Mocha)
6.2 Mockování chrome.* API
6.3 End-to-end testy (Puppeteer, Playwright)
6.4 Debugging přes chrome://extensions, DevTools 

7. CI/CD a publikace

7.1 GitHub Actions, Semantic Release
7.2 Automatické verze, Changelog
7.3 Publikace do:
 - Chrome Web Store
 - Mozilla AMO
 - Microsoft Edge Add-ons
 - Safari App Store (základní info)
7.4 Oddělené verze pro Chrome a Firefox
7.5 ZIP balíček a GitHub Releases 

8. Vývojový workflow

8.1 Od nápadu k architektuře
8.2 Iterativní vývoj s reloadem
8.3 Pre-review checklist
8.4 Publikace a propagace
8.5 Údržba a budoucí verze 

9. Open-source příklady

9.1 Bitwarden
9.2 MetaMask
9.3 Dark Reader
9.4 React DevTools
9.5 uBlock Origin Lite
9.6 Refined GitHub



🧾 SOUHRN

  • Manifest V3 je nový standard pro tvorbu rozšíření, povinný pro Chrome, doporučený pro ostatní (Firefox ho zatím podporuje i vedle MV2).

  • Každé rozšíření musí obsahovat manifest.json, kde se definují oprávnění, skripty, popupy, content scripty atd.

  • Background skript v MV3 běží jako Service Worker – neperzistentní, reaguje jen na události.

  • Content skripty pracují uvnitř webových stránek – injektují se přes manifest a komunikují s pozadím přes messaging.

  • UI komponenty (popup, options, side panel) jsou HTML stránky s JS a plným přístupem k API rozšíření.

  • MV3 zakazuje dynamické načítání kódu z webu – vše musí být zabalené.

  • Vývoj se provádí často v TypeScriptu + React/Svelte s bundlery jako Vite/Webpack.

  • Pomáhají AI nástroje (Cursor, Windsurf) – generují kód, refaktorují, dokumentují.

  • Doporučuje se psát JSDoc/TSDoc komentáře a generovat dokumentaci (např. pomocí TypeDoc nebo Docusaurus).

  • Testy: jednotkové (např. pomocí Jest + mock chrome.* API) i end-to-end (Puppeteer, Playwright).

  • Automatizace pomocí CI/CD (GitHub Actions): build, test, verzování, publikace do obchodů.

  • Publikace do obchodů (Chrome, Firefox, Edge, Safari) má svá pravidla – žádné eval, odůvodněná oprávnění.

  • Roadmapy lze udržovat v Markdownu s Mermaid diagramy.

  • Příklady: Bitwarden, MetaMask, Dark Reader, React DevTools – ukazují různé přístupy a architektury.

  • Důraz na modularitu, oddělení vrstev, správu stavů a respektování omezení MV3.
















#dev



















Posted by at
Labels:

Žádné komentáře:

Okomentovat

Přihlásit se k odběru: Komentáře k příspěvku (Atom)