UI rozszerzenia, które nie znika po zmianie strony
Nasz react-content-script-injector osadza pełne komponenty React w aplikacjach, których nie kontrolujesz. Pilnuje punktów wstrzyknięcia, ponownie montuje UI po zmianach SPA i jest dostarczany z testami E2E działającymi w prawdziwej przeglądarce.
Strona hosta będzie się zmieniać
Twój injector nie powinien przez to znikać
Nowoczesne aplikacje przeładowują fragmenty DOM, zmieniają routing bez odświeżenia i uruchamiają równolegle różne warianty UI. Zwykły content script montuje komponent raz i liczy, że element docelowy pozostanie na miejscu. My projektujemy pod ciągłą zmianę.
Host zmienia DOM
Routing, re-render lub eksperyment usuwa punkt montowania.
Injector wykrywa zmianę
Obserwator rozpoznaje brak lub nowy wariant punktu wstrzyknięcia.
React UI wraca
Komponent montuje się ponownie z właściwym contextem i stylami.
E2E pilnuje regresji
CI odtwarza scenariusz w przeglądarce przed wdrożeniem.
Prywatny runtime do najtrudniejszej części rozszerzenia
Biblioteka pozostaje prywatna i trafia do projektów, które wdrażamy. Klient dostaje sprawdzony fundament bez utrzymywania kolejnego wewnętrznego frameworka.
Odporne punkty montowania
Monitorujemy elementy docelowe i ponownie montujemy komponenty po re-renderze lub zmianie routingu SPA.
Shadow DOM
Style rozszerzenia nie wyciekają na stronę hosta, a obcy CSS nie psuje dostarczonego UI.
React Portals
Modale, dropdowny i panele zachowują providery, stan, motyw oraz pełny React context.
Cleanup bez duplikatów
Kontrolowany unmount i ponowne wstrzyknięcie zapobiegają martwym handlerom oraz zduplikowanemu UI.
Elastyczne pozycjonowanie
Osadzamy akcje inline, sidebary, panele i elementy pływające dokładnie tam, gdzie pracuje użytkownik.
Widoczne awarie
Błędy injectora można raportować z kontekstem strony i wersji rozszerzenia zamiast czekać na zgłoszenie użytkownika.
Testowanie w prawdziwej przeglądarce
Testujemy nie tylko komponent. Testujemy moment wstrzyknięcia.
Testy jednostkowe nie pokażą, czy rozszerzenie znalazło właściwy anchor na prawdziwej stronie. Nasze scenariusze E2E uruchamiają produkcyjny build rozszerzenia w Chromium i weryfikują cały cykl życia injectora.
- 01Zbuduj produkcyjne rozszerzenie
- 02Załaduj je do Chromium
- 03Odtwórz zmianę strony hosta
- 04Sprawdź UI, cleanup i reinjection
Pierwsze wstrzyknięcie
Czy właściwy komponent pojawia się przy właściwym elemencie strony.
Routing SPA
Czy UI znika, czyści stan i wraca po przejściu na obsługiwaną trasę.
Re-render hosta
Czy injector odzyskuje punkt montowania po wymianie fragmentu DOM.
Brak duplikatów
Czy kolejne mutacje DOM nie tworzą wielu kopii tego samego UI.
Warianty strony
Czy znane warianty językowe, layouty i selektory prowadzą do tego samego rezultatu.
Kontrolowana awaria
Czy brak anchora daje czytelny sygnał diagnostyczny zamiast cichego zniknięcia funkcji.
Od punktu w DOM do utrzymywalnego wdrożenia
Nie przekazujemy samego pakietu. Projektujemy injectory, testujemy zachowanie na zmianach strony i utrzymujemy integrację, kiedy aplikacja hosta ewoluuje.
Mapujemy stronę hosta
Identyfikujemy stabilne anchory, routing, warianty UI i miejsca ryzyka.
Budujemy injector
Osadzamy React UI z izolacją stylów, contextem i właściwym cyklem życia.
Automatyzujemy E2E
Kodujemy krytyczne warianty oraz regresje jako scenariusze przeglądarkowe w CI.
Wdrażamy i utrzymujemy
Dostarczamy build, pipeline aktualizacji i wsparcie przy zmianach strony hosta.
Najczęstsze pytania
Czy react-content-script-injector jest publicznym pakietem?+
Nie. To nasz prywatny runtime injectorów, używany w rozszerzeniach budowanych i utrzymywanych dla klientów.
Czy można dodać go do istniejącego rozszerzenia?+
Tak. Najpierw audytujemy obecne content scripty, punkty montowania i testy, a potem migrujemy injectory etapami bez przepisywania całego rozszerzenia.
Czy testy E2E używają prawdziwego rozszerzenia?+
Tak. Test uruchamia produkcyjny build rozszerzenia w Chromium i sprawdza zachowanie injectora z perspektywy użytkownika.
Co się dzieje, gdy aplikacja hosta zmieni DOM?+
Runtime próbuje odnaleźć obsługiwany punkt wstrzyknięcia i ponownie zamontować UI. Jeśli zmiana wykracza poza znane warianty, testy i raportowanie błędów pomagają szybko zlokalizować regresję.
Budujesz rozszerzenie na stronie, której nie kontrolujesz?
Zaprojektujemy injectory, które radzą sobie ze zmianami SPA, i zabezpieczymy ich krytyczne scenariusze testami E2E.
Kto za tym stoi
Tomasz Dłuski
Założyciel & CEO
Senior Software Engineer z 10+ letnim doświadczeniem. W poprzedniej firmie był częścią firmy, która wyskalowała się z 5 do 50+ inżynierów. Teraz buduje Optymized - firmę, która łączy doświadczenie w dostarczaniu projektów enterprise z własnymi produktami SaaS. Maintainer CRXJS (3.9k stars na GitHubie), jednego z najpopularniejszych narzędzi do budowy rozszerzeń przeglądarek.
Porozmawiajmy o Twoim projekcie
Potrzebujesz rozszerzenia do przeglądarki, dedykowanego zespołu, czy konsultacji technicznej? Znajdźmy najlepsze podejście razem.