31. ledna 2025

Web Browser plugin 2

 

📑 OBSAH

  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


2. Anatomie rozšíření

2.1 Povinný soubor manifest.json

Kořenový soubor, definuje strukturu, oprávnění a komponenty rozšíření:

  • name, description, version

  • manifest_version: 3

  • permissions, host_permissions

  • background.service_worker

  • action (popup)

  • content_scripts

  • web_accessible_resources

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

2.2 Background skript (Service Worker)

  • Nahrazuje perzistentní background skript MV2

  • Aktivuje se pouze při události

  • Běží v odděleném vlákně

  • Nutno ručně definovat chrome.runtime.onMessage, onInstalled, atd.

2.3 Content skripty

  • Vstřikovány do konkrétních webových stránek

  • Přístup k DOM (ne k chrome.* API)

  • Komunikace s background skriptem pomocí messagingu

2.4 Uživatelské rozhraní

  • Popup: action.default_popup – lehké UI při kliknutí na ikonu

  • Options page: definováno v options_page nebo options_ui

  • Side panel: nový koncept přístupný přes manifest

  • Extension pages: vlastní HTML s plným přístupem k API

2.5 Ikony, styly a web_accessible_resources

  • Ikony: PNG ve velikostech 16x16, 48x48, 128x128

  • CSS/JS připojené přes content_scripts nebo do popupu/options

  • web_accessible_resources deklaruje přístupné assety ze stránky



3. Technologie a nástroje

3.1 TypeScript, React, Svelte, Vite

  • TypeScript zvyšuje bezpečnost a čitelnost

  • UI frameworky (React/Svelte) pro popup/options

3.2 Webpack/Rollup – bundlování

  • Kompilují TS a moderní JS do formátu kompatibilního s MV3

  • Výstup směřuje do dist/ nebo build/

3.3 Speciální frameworky

  • Plasmo: https://www.plasmo.com – automatizuje MV3 vývoj

  • Bedframe: strukturovaný template pro multiplatformní rozšíření



4. AI asistovaný vývoj

4.1 VS Code a jeho rozšíření

  • Lintery, formattery (Prettier, ESLint)

  • Pluginy pro TypeScript a Chrome Extensions

4.2 Cursor.com

4.3 Windsurf.com

4.4 Využití LLM

  • Vygenerování základního kódu, anotací, testů, dokumentace

  • Promptování a refaktoring v reálném čase


5. Dokumentace

5.1 JSDoc / TSDoc

  • Anotace funkcí a typů pro generování dokumentace

5.2 Docusaurus a uživatelská dokumentace

  • Generátor webové dokumentace z Markdownu

  • Možné nasazení na GitHub Pages

5.3 Changelog a verzování

  • Conventional Commits + semantic-release

  • Automatické generování CHANGELOG.md

5.4 Mermaid.js – roadmapy jako diagramy

5.5 Automatizace generování dokumentace

  • CI/CD buildy spouští generátory dokumentace automaticky


6. Testování

6.1 Jednotkové testy (Jest, Mocha)

  • Testování pomocí simulace vstupů a výstupů

  • Mockování API (jest-chrome, sinon-chrome)

6.2 Mockování chrome.* API

  • Nutné v prostředí mimo prohlížeč

6.3 End-to-end testy (Puppeteer, Playwright)

  • Simulují chování uživatele s nainstalovaným rozšířením

6.4 Debugging

  • chrome://extensions + DevTools

  • Debug popupu, content scriptu i backgroundu


7. CI/CD a publikace

7.1 GitHub Actions, Semantic Release

  • Automatické buildy, testy, generování ZIP, publikace

7.2 Automatické verze, Changelog

  • Z conventional commitů a tagů

7.3 Publikace do:

7.4 Oddělené verze pro Chrome a Firefox

  • Firefox podporuje browser.*, Chrome chrome.*

  • Možné polyfily nebo build-time přepínání

7.5 ZIP balíček a GitHub Releases

  • Build → zip -r ext.zip dist/

  • Release na GitHubu s changelogem


8. Vývojový workflow

8.1 Od nápadu k architektuře

  • Identifikace problému → specifikace → návrh komponent

8.2 Iterativní vývoj s reloadem

  • Aktivace v Chrome přes Developer Mode a Load unpacked

8.3 Pre-review checklist

  • Bez eval, inline JS, zbytečných oprávnění

  • Popsaná oprávnění v manifestu

8.4 Publikace a propagace

  • Čekání na schválení v obchodech (někdy několik dní)

  • SEO optimalizace a popis rozšíření

8.5 Údržba a budoucí verze

  • Automatické aktualizace přes obchody

  • Nové feature větve, tagy, changelog


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



Microsoft Edge extensions documentation
Develop an extension (add-on) for Microsoft Edge.
https://learn.microsoft.com/cs-cz/microsoft-edge/extensions-chromium/landing/


Building persistent Chrome Extension using Manifest V3
https://rahulnegi20.medium.com/building-persistent-chrome-extension-using-manifest-v3-198000bf1db6


How to debug chrome extension service worker for manifest v3
https://stackoverflow.com/questions/63024113/how-to-debug-chrome-extension-service-worker-for-manifest-v3


Anatomy of an extension

What is the canvas feature in ChatGPT and how do I use it?
Common questions about using the Canvas feature in ChatGPT.
https://help.openai.com/en/articles/9930697-what-is-the-canvas-feature-in-chatgpt-and-how-do-i-use-it



#dev
Posted by at
Labels:

Žádné komentáře:

Okomentovat

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