Zajmuję się analityką internetową - zbieram i raportuję dane o tym, jak ludzie przeglądają strony internetowe.

Przez ostatnie kilka miesięcy pisałem sobie rozszerzenie do #chrome, które wizualizuje dane o klikniętych na stronie elementach - tzw "heatmapa", czy też "clickmapa".

Była to okazja żeby mieć sporo niecodziennych wyzwań do rozwiązania, i pomyślałem że się nimi podzielę. Ponieważ sporą część tego co musi być zrobione miałem w głowie i nie porywało mnie robienie jej, do stworzenia części kodu użyłem #chatgpt i #github #copilot , co też przyniosło ciekawe doświadczenia.

Są to totalnie geekowskie wynurzenia ale mam nadzieję znaleźć odrobinę przestrzeni gdzie mógłbym też zyskać może jakiś feedback na temat tego rozwiązania

Całość opiera się na zbieraniu selektorów CSS klikniętych elementów, a później pobieraniu tych danych i wizualizowaniu ich.

• Sama komunikacja z zewnętrznym serwisem w Chrome Extensionie to już jest ciekawy fikoł, bo można to robić tylko z konkretnego kontekstu - service workera (a.k.a. background.js) - wymaga to przerzucania danych w odpowiednie miejsce (np. do otwartego taba przeglądarki), bo nie można ich pobrać "gdzie się chce"
  

• Wizualizacja klikniętych elementów to fragment w którym mocno wspomagałem się AI - ChatGPT dobrze był w stanie zrozumieć o co mi chodzi i uwzględnić wymagania, ale jego sposób pracy potrafił się wahać z tygodnia na tydzień. W końcu przerzuciłem się na GitHub CoPilot ponieważ sugeruje na podstawie całego otwartego w #vscode projektu i bieżącego miejsca w kodzie. Czasem jak kulą w płot, ale zaoszczędził mi mnóstwo czasu. W sumie cały algorytm wizualizacji to jego dzieło którego staram się sam nie ruszać jedną z rzeczy, które AI rozwiązało jest kolejność renderowania elementów na podstawie sprawdzenia, który jest czyim dzieckiem, tak, aby nie było później zwizualizowanych elementów, których nie da się kliknąć.
  

• Największym problemem, nad którym dumałem jak memiczny Pablo Escobar przez 1,5 miesiąca odkładając całość w kąt, było jak skonstruować toolbar wyświetlający się po kliknięciu danego elementu. No nie mogłem tego sobie dobrze wymyśleć biorąc pod uwagę to co chciałem zrobić, czyli doklejać go do już istniejącego elementu i pozwalać mu się rozwijać na obszar poza tym elemente. Z pomocą też pewnego wieczora przyszło AI, ale do rozwiązania o co je poprosić musiałem dotrzeć sam.
  

• Nadawanie odpowiedniej kolorystyki w zależności od ilości kliknięć na dany element jest czymś co muszę jeszcze dopracować. Pierwsza wersja opierała się na przypisaniu natężenia jednego koloru, teraz już mam 2 kolory. Wymyśliłem sobie żeby dzielić skalę pomiedzy tymi 2 kolorami na liczbę kolorów odpowiadającą ilości elementów do pokolorowania, ale to nie daje wyraźnych wizualnie efektów, więc wprowadziłem dodatkowy model który elementy z największą ilością kliknięć doboostowuje na podstawie tego, które mają miejsce w datasecie (bo jest on posortowany od najbardziej klikanych elementów)
  

• Potrafią się też zdarzać uszkodzone dane z niewłaściwymi, urwanymi selektorami CSS - trzeba je w miarę możliwości oczyszczać i wizualizować na najbliższym elemencie
  

• Niektóre elementy na stronach, gdy są kliknięte, potrafią zwracać inne selektory np zawierające klasę "active". Żeby te dane łączyć (chociaż chyba mi to jeszcze nie do końca działa ) też zrobiłem dedykowaną temu funkcjonalność.
  

• Problem, którego jeszcze nie rozwiązałem: przy używaniu google translate, mogą się zmieniać wykrywane selektory CSS klikniętych elementów, bo jest w nich dodatkowo umieszczany tag <font> albo i dwa
  

• Popełniłem też sporo mniejszych, czeskich błędów przy obsłudze dość złożonego API - tym lepiej miałem okazję się go nauczyć
  

• GitHub CoPilot dobrze się u mnie zadomowił. Zrobiłem kilka zrzutów które chcę zmontować w filmik o nim, gdzie mam przykłady i dobrych i kiepskich jego zachowań. Czasem trzeba go lekko szturchnąć w odpowiednim kierunku, i potrafi dużo pomóc, ale czasem jest zupełnie bezużyteczny i kręci się w kółko jak 5 latek
  

No i taka robota. Mi się bardzo przyda w mojej codziennej pracy. Jak coś, to extension współpracuje z analityką Piwik PRO, która ma dwie zalety - jest robiona w Polsce i jest darmowa do 500 tys. eventów miesięcznie ( ͡° ͜ʖ ͡°) #toniejestreklama, może się komuś przyda, a samo rozszerzenie tu: https://logbaker.com , a filmik mam nadzieję że się osadzi: https://www.youtube.com/watch?v=wJSYjGRO5YM

Jeśli ktoś ma pytania dot. developmentu chrome extensiona też chętnie odpowiem na tyle ile wiem