Request Modifier (API test)

Rozszerzenie Chrome do modyfikowania wychodzących requestów przed wysłaniem — przydatne do testowania własnego endpointu API. Pozwala na podstawie wzorca URL zmienić:

• query string (dodać / ustawić / usunąć parametry),
• body (scalić z JSON-em lub zastąpić w całości),
• nagłówki (ustawić / usunąć).

Potrafi też modyfikować odpowiedź (Response), zanim dotrze do aplikacji: podmienić status HTTP, nagłówki i body (scalić z JSON-em lub zastąpić), a dla fetch również edytować odpowiedź interaktywnie w oknie.

Dwa tryby pracy reguły:

• statyczny — z góry zdefiniowane zmiany stosują się automatycznie,
• interaktywny — przy każdym pasującym requeście wyskakuje na stronie okno, w którym ręcznie zmieniasz URL, nagłówki i body dla tego konkretnego wywołania. Idealne do szybkiego testowania wielu wariantów.

Jak to działa (i ważne ograniczenie)

Rozszerzenie nadpisuje window.fetch i XMLHttpRequest na stronie i modyfikuje requesty tworzone przez JavaScript aplikacji. To jedyny sposób w Manifest V3, by zmieniać body requestu (sieciowe API rozszerzeń tego nie potrafią).

Działa dla: requestów wysyłanych przez fetch/XHR z kodu strony (czyli typowy frontend / SPA odpytujący Twoje API).

Nie obejmuje: nawigacji przeglądarki, requestów z innych rozszerzeń, Web Workerów bez własnego kontekstu strony oraz sendBeacon. Ciała binarne (FormData, Blob) można tylko zastąpić — tryb „scal z JSON" dotyczy body w formacie JSON.

Instalacja (tryb deweloperski)

1. Otwórz chrome://extensions.
2. Włącz Tryb dewelopera (prawy górny róg).
3. Kliknij Wczytaj rozpakowane i wskaż folder request-modifier.
4. Ikona rozszerzenia pojawi się na pasku — kliknij ją, by zarządzać regułami.

Po edycji plików kliknij „Odśwież” na kafelku rozszerzenia, a następnie przeładuj testowaną stronę (content scripty wstrzykują się przy ładowaniu).

Użycie

1. Kliknij ikonę → + Dodaj regułę.
2. Wzorzec URL — fragment adresu Twojego endpointu, np. api.example.com/users. Dopasowanie „Zawiera tekst" wystarcza w większości przypadków; dla precyzji wybierz „Wyrażenie regularne".
3. Wybierz metody (puste = wszystkie).
4. Uzupełnij sekcje, które chcesz zmienić:
   • Query string — po jednej zmianie na linię:

     page=1
     debug=true
     -token        (usuwa parametr token)
     

   • Nagłówki:

     X-Debug: 1
     -Authorization   (usuwa nagłówek)
     

   • Body — Scal z JSON nadpisuje/dodaje pola, Zastąp podmienia całość.
5. Zapisz. Reguły działają natychmiast — przeładuj stronę, jeśli była otwarta przed instalacją.

Globalny przełącznik u góry popupu włącza/wyłącza wszystkie reguły naraz; każda reguła ma też własny przełącznik.

Popup rozszerzenia jest ograniczony przez Chrome do 600 px wysokości. Gdy potrzebujesz więcej miejsca, kliknij „⤢ Karta" w nagłówku — ten sam konfigurator otworzy się w pełnej karcie przeglądarki, bez limitu wysokości.

Ikona stanu

Ikona rozszerzenia na pasku świeci się na zielono, gdy Modifier jest włączony globalnie i istnieje co najmniej jedna aktywna reguła — czyli gdy coś realnie może zostać zmodyfikowane. W przeciwnym razie jest szara. Kolor aktualizuje się od razu po zmianie przełączników w popupie (ikona jest generowana w tle, nie wymaga plików graficznych).

Tryb interaktywny (edycja przed wysłaniem)

Zaznacz w regule „Tryb interaktywny". Od tej pory każdy pasujący request zatrzyma się, a na stronie pojawi się okno z aktualnym URL-em, nagłówkami i body. Możesz je dowolnie zmienić i wybrać:

• Wyślij ▸ — wysyła request z Twoimi zmianami (skrót: Ctrl/Cmd+Enter),
• Wyślij oryginał — wysyła bez zmian (skrót: Esc),
• Zablokuj — przerywa request.

Pola statyczne (query/nagłówki/body) w tej samej regule działają jako wartości domyślne pokazywane w oknie — możesz je nadpisać ręcznie za każdym razem. Gdy w jednym momencie leci kilka requestów, okna pojawiają się po kolei.

Uwaga: okno rysowane jest w kontekście strony (Shadow DOM), więc nie koliduje z jej stylami. Dla XMLHttpRequest wysłanie jest odraczane do chwili Twojej decyzji — to normalne i nie psuje aplikacji.

Modyfikacja odpowiedzi (Response)

W edytorze reguły rozwiń sekcję „Modyfikacja odpowiedzi (Response)". Możesz:

• Status HTTP — wymusić inny kod, np. 500, żeby przetestować obsługę błędów w aplikacji (response.ok stanie się false).
• Body odpowiedzi — „Scal z JSON" dokłada/nadpisuje pola w odpowiedzi JSON, „Zastąp całość" podmienia treść 1:1.
• Nagłówki odpowiedzi — ustawić/usunąć (dla fetch).
• Edytuj odpowiedź przed przekazaniem — tryb interaktywny: po otrzymaniu odpowiedzi wyskakuje okno, w którym ręcznie zmienisz status, nagłówki i body, a dopiero potem aplikacja je zobaczy (tylko fetch).

Zakres i ograniczenia

• fetch — pełna obsługa: status, nagłówki, body oraz tryb interaktywny.
• XMLHttpRequest — statycznie status i body (odpowiedź podmieniana przez „cieniowanie" właściwości responseText / response / status). Edycja interaktywna i nagłówki odpowiedzi dla XHR nie są obsługiwane.
• Odpowiedzi typu opaque (żądania cross-origin no-cors) są nieczytelne i nie da się ich modyfikować — przechodzą bez zmian.
• Po podmianie fetch buduje nowy obiekt Response, więc response.url może być pusty (ciało, status i nagłówki są zachowane). To zwykle nieistotne przy testach, ale warto wiedzieć.

Weryfikacja

Otwórz test.html (plik w tym folderze) w karcie, na której działa rozszerzenie, i użyj przycisków, by wysłać przykładowe fetch/XHR. W konsoli (DevTools → Network / Console) zobaczysz zmodyfikowany URL i body.