28. února 2025

Web Browser rozšíření pro vývojáře webových rozšíření





🧩 Chrome: Rozšíření pro vývoj pluginů

🔍 Debugging & DevTools


Web Developer
Inspekce, skrývání prvků, vypínání JS/CSS.


React Developer Tools
Ladění React komponent.


Vue.js DevTools
Inspektor Vue aplikací.


Redux DevTools
Toky stavů v Reduxu.



📡 API & Síťové testování


Postman Interceptor
Zachytávání požadavků a cookies.


WebSocket King
Testování websocketů.


JSON Viewer Pro
Strukturovaný výstup JSON.



🎨 UI/UX & Styling


ColorZilla
Výběr barev z obrazovky.


WhatFont
Detekce fontů na stránce.


Window Resizer
Simulace velikostí oken.



♿ Přístupnost & Audit


axe DevTools
Testování přístupnosti (WCAG).


Lighthouse
Audit SEO, výkonu a a11y.



🧠 Různé nástroje


Wappalyzer
Detekce frameworků, CMS, knihoven.


ModHeader
Úprava HTTP hlaviček.


EditThisCookie
Úprava cookies, testování sessions.


User-Agent Switcher
Simulace různých prohlížečů.


Clear Cache
Jedno-klikové mazání cache.


HTTP Headers
Zobrazování hlaviček všech požadavků.


Requestly
Manipulace s přesměrováními a skripty.


JavaScript Switcher
Rychlé vypnutí/zapnutí JS na stránce.




🦊 Firefox: Rozšíření pro vývoj pluginů

🔍 Debugging & Framework Tools


Web Developer
Inspekce a nástroje pro manipulaci se stránkami.


React Developer Tools
Ladění React aplikací.


Vue.js DevTools
Práce s Vue stavy a komponentami.


Redux DevTools
Vizualizace stavových změn Reduxu.



📡 API & Síťová komunikace


Postman Interceptor
Zachytávání požadavků přímo ve Firefoxu.


WebSocket King
Ověření a test WebSocket spojení.


JSONView
Zobrazení JSON odpovědí ve formátované podobě.



🎨 UI/UX & Styling


ColorZilla
Výběr a kopírování barev ze stránky.


WhatFont
Zjištění fontů na stránce.


Window Resizer
Simulace velikostí obrazovek.



♿ Přístupnost & Audit


axe DevTools
Automatizovaný přístupnostní audit.


Lighthouse
Analýza výkonu a použitelnosti.



🧠 Technologie a další nástroje


Wappalyzer
Detekce technologií webu.


ModHeader
Manipulace s HTTP hlavičkami.


RESTClient
Testování REST API.


Stylus
Vlastní CSS styly pro weby.


HTML Validator
Kontrola HTML validace přímo ve Firefoxu.


MeasureIt
Poměření prvků na stránce.


Selenium IDE
Automatizace testování UI.









Tips for assessing the safety of an extension

What are the best practices for developing and optimizing browser extensions for performance and user experience?







🧭 Vivaldi: Rozšíření pro vývoj pluginů

🧩 Kompatibilita s Chrome


Vivaldi podporuje všechna rozšíření z Chrome Web Store.


Doporučení: Vivaldi Must-Have Extensions
Článek vývojáře shrnující nejdůležitější nástroje.



🛠 Doporučené nástroje


Stylus
Úprava vzhledu webů (custom CSS).


UI.Vision RPA
Automatizace a testy UI.


Tab Suspender
Optimalizace paměti při vývoji s mnoha panely.


CRX Inspector
Inspekce manifestů a zdrojů rozšíření.


Visual Inspector
Rychlá vizuální editace elementů.


Performance DevTools
Analyzátor výkonu pro Vivaldi/Chrome.


Hacker Tab
Nová karta s dev nástroji, GitHub trendy, články.


Muzli 2
Inspirace pro UI a trendy ve vývoji.


Page Ruler Redux
Změření velikostí prvků v pixelech.


CSS Peeper
Rychlá kontrola CSS stylů v UI.


🪟 Edge: Rozšíření pro vývoj pluginů

🌐 Základní informace


Edge Add-ons Store
Oficiální úložiště rozšíření.


Edge podporuje rozšíření z Chrome Web Store.



Best practices for extensions




🧪 Doporučené nástroje


Developer Tools for Edge
Oficiální vývojové nástroje.


Cookies Editor
Úprava cookies v reálném čase.


JSON Formatter
Strukturované zobrazení JSON dat.


HTTP Headers
Zobrazování a testování hlaviček.


React DevTools
Ladění komponent v Reactu.


User-Agent Switcher
Testování různých zařízení a agentů.


Lighthouse
SEO a výkonový audit.


ColorZilla
Výběr barvy z obrazovky.


Stylus
Vlastní CSS pro jakoukoliv stránku.


axe DevTools
Přístupnostní testy pro Edge.


🍏 Safari: Rozšíření pro vývoj pluginů

🔧 Oficiální nástroje a dokumentace


Safari Extensions
Oficiální vývojářská sekce pro Safari rozšíření.


Safari Web Extensions
Přenos Chrome/Firefox rozšíření do Safari pomocí Xcode.



🧰 Doporučené nástroje


Safari Extensions in App Store
Kurátorovaný výběr nástrojů a rozšíření pro Safari.


ColorZilla
Výběr barev, podpora webdesignu i testování UI.


User-Agent Switcher
Změna identifikace prohlížeče.


JSON Viewer
Čitelné zobrazení JSON výstupů.


CSS Inspector
Rychlá vizuální inspekce CSS stylů.


React DevTools
Nástroj pro React aplikace (přes Safari Technology Preview).


Window Resizer
Testování responzivity přímo v Safari.


Clear Cookies
Jednoduché čištění cookies při testování rozšíření.


Sessions
Správa tabů, obnova relací – ideální při ladění.


Shortcut Bar
Rychlý přístup k často používaným funkcím při vývoji.



Creating a Safari web extension

Build a Safari web extension in Xcode.



#dev




Žádné komentáře: