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

• Kontextový vývoj nad celým projektem pomocí AI

• https://www.cursor.sh

4.3 Windsurf.com

• Podobné Cursoru, navíc přehled roadmap a úloh

• https://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

• https://mermaid.js.org

• Diagramy v Markdownu či dokumentaci

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:

• Chrome Web Store: https://chromewebstore.google.com/devconsole

• Mozilla AMO: https://addons.mozilla.org/en-US/developers/

• Microsoft Edge Add-ons: https://partner.microsoft.com/en-us/dashboard/microsoftedge

• Safari App Store: publikace přes Xcode a Apple ID

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

• https://github.com/bitwarden/browser

• Bezpečné uchovávání a autofill hesel

9.2 MetaMask

• https://github.com/MetaMask/metamask-extension

• Crypto peněženka s více vrstvami logiky

9.3 Dark Reader

• https://github.com/darkreader/darkreader

• Dynamická úprava stylů stránky do tmavého režimu

9.4 React DevTools

• https://github.com/facebook/react/tree/main/packages/react-devtools-extensions

• Integrace do DevTools pro ladění React komponent

9.5 uBlock Origin Lite

• https://github.com/gorhill/uBlock

• Verze Lite je optimalizovaná pro MV3

9.6 Refined GitHub

• https://github.com/refined-github/refined-github

• Úpravy a vylepšení GitHub UI pomocí modularizovaných funkcí

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

https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension

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