Spis treści
1. Czym jest CRXJS?
CRXJS to wtyczka Vite, która sprawia, że budowanie rozszerzeń Chrome przypomina budowanie nowoczesnej aplikacji webowej. Obsługuje najtrudniejsze aspekty developmentu rozszerzeń: parsowanie manifestu, wstrzykiwanie content scriptów, Hot Module Replacement (HMR) we wszystkich kontekstach rozszerzenia oraz pełny pipeline buildowania - od kodu źródłowego do gotowego do wdrożenia pliku .zip.
Bez CRXJS, budowanie rozszerzenia Chrome z Reactem lub Vue oznacza albo walkę z konfiguracją Webpacka zaprojektowaną dla stron internetowych, albo rezygnację z HMR i ręczne przeładowywanie rozszerzenia po każdej zmianie. CRXJS eliminuje tę frustrację.
Z ponad 3 500 gwiazdkami na GitHubie i tysiącami rozszerzeń zbudowanych na tej podstawie, CRXJS stał się standardem nowoczesnego developmentu rozszerzeń Chrome. Budujemy na nim od 2021 roku i wnosimy do niego wkład od 2024.
2. Trzy i pół roku w becie
Wtyczka Vite dla CRXJS pojawiła się po raz pierwszy pod tagiem @beta w npm 16 grudnia 2021 roku. Przez ponad trzy lata deweloperzy instalowali ją poleceniem npm install @crxjs/vite-plugin@beta i budowali na niej prawdziwe produkcyjne rozszerzenia - bo nie było nic lepszego.
W czasie trwania bety wtyczka przeżyła przejście z Vite 3 aż do Vite 6, dostosowała się do wymagań Manifest V3 i zgromadziła społeczność deweloperów, którzy codziennie na niej polegali. Byliśmy wśród nich - budując Panel Pro i inne rozszerzenia klientów na CRXJS przez całe te lata bety.
Etykieta "beta" nigdy nie odzwierciedlała jakości wtyczki - odzwierciedlała rzeczywistość, że projekty open-source potrzebują czasu, opiekunów i infrastruktury, żeby osiągnąć stabilność. Z nowym zespołem opiekunów (w tym nami) i pracą opisaną poniżej - ta poprzeczka została przekroczona.
3. Co nowego w v2.0.0
Wydanie v2.0.0 to nie jest jednorazowy dramatyczny przepisanie kodu. To kulminacja miesięcy pracy nad infrastrukturą, naprawiania bugów i budowania społeczności - co sprawiło, że wtyczka jest wystarczająco stabilna, żeby zdjąć etykietę beta. Oto co się w nim znalazło:
Przepisany README i instrukcje konfiguracji
Dokumentacja została przepisana, żeby nowi deweloperzy mogli szybciej zacząć. Jasne, krok po kroku instrukcje zamiast rozproszonych notatek, które nagromadziły się przez trzy lata developmentu bety.
Szablon npm do scaffoldowania projektów
Nowe projekty można teraz bootstrapować jednym poleceniem: npm create crxjs@latest. Szablon create-crxjs daje gotowy szkielet rozszerzenia z Reactem, TypeScriptem i skonfigurowanym Manifest V3.
Ulepszone wsparcie dla Svelte
Deweloperzy Svelte budujący rozszerzenia Chrome otrzymują teraz wsparcie pierwszej klasy, w tym poprawki dla zachowania snapshotów zależnych od platformy i niezawodności HMR, które wcześniej powodowały problemy specyficznie w projektach Svelte.
CI dla Windows i stabilność wieloplatformowa
Projekt teraz uruchamia pełny zestaw testów na Windows przy każdym PR, wychwytując regresje specyficzne dla platformy zanim dotrą do deweloperów. To była jedna z największych luk w okresie bety i jest teraz zamknięta.
Testy end-to-end przy każdym PR
Testy E2E uruchamiają się automatycznie przy każdym pull requeście, wychwytując regresje, które umykają testom jednostkowym. W połączeniu z matrycą CI dla Windows, daje to projektowi poziom pokrycia testami, jakiego nigdy nie miał w okresie bety.
Aktywny zespół opiekunów
Nowy zespół opiekunów aktywnie przegląda PR-y, triaguje zgłoszenia i wydaje poprawki. Projekt nie jest już w trybie maintenance.
Społeczność Discord
Serwer Discord jest teraz centralnym miejscem do uzyskiwania pomocy, dzielenia się rozszerzeniami i śledzenia wydań CRXJS.
Nowa strona dokumentacji (wkrótce)
Dedykowana strona dokumentacji jest w trakcie tworzenia. Porządna dokumentacja była jednym z najczęściej zgłaszanych życzeń od wczesnych dni bety.
4. Nasz wkład w to wydanie
Dołączyliśmy do zespołu opiekunów CRXJS w 2024 roku. Praca, która doprowadziła CRXJS do stabilnego v2.0.0, nie była glamour - była to praca infrastrukturalna i niezawodnościowa, którą projekty open-source często odkładają w nieskończoność.
Naszym największym wkładem było sprawienie, żeby CRXJS działał na Windows. Przed naszą pracą CI działało tylko na Ubuntu, obsługa ścieżek zakładała konwencje Uniksa, a deweloperzy Windows trafiają na ciche błędy bez dobrego obejścia. Naprawiliśmy to w PR #1008 - 6 110 dodanych linii w 45 plikach, obejmujących normalizację ścieżek, obsługę zdarzeń systemu plików HMR, scrubbing snapshotów i samą matrycę CI dla Windows.
Poza Windows, przebudowaliśmy cały pipeline CI/CD, żeby testować na wielu wersjach Vite, dodaliśmy testy end-to-end przy każdym PR, skonfigurowaliśmy powiadomienia o wydaniach na Discord i wnieśliśmy poprawki dla HMR z UnoCSS/TailwindCSS, rozwiązywania typów TypeScript i kompatybilności z Vite 7 (rolldown-vite).
Łącznie zespół Optymized wniósł ponad 27 pull requestów do CRXJS. Możesz przeczytać pełną historię pracy nad Windows CI w naszym wcześniejszym artykule, lub przeglądnąć wszystkie wkłady na GitHubie.
5. Jak zacząć
Jeśli budowałeś na @crxjs/vite-plugin@beta, teraz jest czas na upgrade do stabilnego wydania. Sprawdź oficjalne release notes pod kątem przełomowych zmian.
Nowy projekt
npm create crxjs@latestUpgrade istniejącego projektu
npm install @crxjs/vite-plugin@latestJeśli napotkasz problemy lub masz pytania, Discord CRXJS to najlepsze miejsce, żeby uzyskać pomoc. Zespół opiekunów jest aktywny.
Budujesz rozszerzenie Chrome?
Budujemy produkcyjne rozszerzenia Chrome z CRXJS od 2021 roku i wnosimy wkład do projektu od 2024. Jeśli potrzebujesz zespołu, który zna ten stack od podszewki, porozmawiajmy.
