Napisałem wtyczkę do przeglądarki (w HTML/CSS/JavaScript). Jest ona na tą chwilę w fazie beta (na taki stan przynajmniej ją oceniam). Dlaczego akurat wtyczkę i dlaczego w tytule widnieje nazwa tego forum?
- od jakiegoś czasu chciałem nauczyć się pisania wtyczki do przeglądarki, a że jest ich kilka, to od którejś trzeba było zacząć - wybrałem Google Chrome
- chciałem wykonać coś, co będzie służyło nie tylko mnie, ale też i społeczności tego forum. Poza tym, nie miałem pomysłu na sensowną wtyczkę. Moim zdaniem, wykonanie tej wtyczki pozwoli nieco ułatwić korzystanie z forum - zwłaszcza tym użytkownikom, którzy udzielają się w tematach poprzez odpowiedzi oraz komentarze.
Po połączeniu obu powodów, stwierdziłem, że napiszę wtyczkę, która będzie co kilka minut odświeżać kartę przeglądarki, na której otwarta jest strona z forum. Następnie pobierze informacje o nowych tematach (również nowych aktywnościach wewnątrz nich) i powiadomieniach, po czym poinformuje użytkownika (który w tym czasie może przeglądać inną stronę internetową), że pojawiła się nowa aktywność na forum.
Zanim o szczegółach, to kwestia zgodności projektu z regulaminem. Są aplikacje/skrypty, które traktowane są przez strony/fora internetowe jako boty i są blokowane (bo np. nie wyświetlają reklam, szkodą innym użytkownikom lub samej witrynie, albo z innych - nieznanych mi - powodów) albo na IP, z którego aplikacja się łączyła, zostaje nałożona CAPTCHA. Wtedy nawet jeśli użytkownik "samodzielnie" wchodzi na taką stronę, to musi rozwiązywać jakiś mini quiz (np. Google reCAPTCHA) albo przepisywać literki/cyferki z obrazka. W regulaminie forum nie znalazłem punktu, który by zabraniał korzystania z botów/skryptów na forum (oczywiście takich, które nie czynią szkód ani serwisowi ani użytkownikom). Dla pewności zapytałem @Arkadiusz Waluk, który potwierdził mi, że nie jest to zabronione.
Jak działa wtyczka?
- odświeża forum co pewien czas. Jaki to czas? Minimalny czas, to 1 minuta. Ja ustawiłem 5 minut - oczywiście może być dłuższy. Dlaczego nie może być krótszy niż 1 minuta? Z co najmniej dwóch powodów:
- gdyby przez kilka godzin, kilkunastu/kilkudziesięciu użytkowników (w zależności od tego, jak w ogóle ten projekt się przyjmie) w krótkich odstępach czasowych odświeżało stronę, to serwer zostałby niepotrzebnie bardziej obciążony. O tym wspomniał mi @Arkadiusz Waluk
- do odświeżania strony najprościej można by skorzystać z setInterval(), ale Google Chrome API sugeruje używanie "ich" interfejsu Alarm https://developer.chrome.com/apps/alarms#method-create, który w celu uniknięcia zbytniego przeciążenia systemu użytkownika dopuszcza minimalny czas "odświeżania" skryptów co 1 minutę. Poza tym Alarm w przeciwieństwie do setInterval() działa bardziej jak pobudka dla aplikacji (a konkretnie skryptu działającego w tle przeglądarki), ponieważ poszczególne skrypty w momencie braku aktywności są usypiane https://developer.chrome.com/extensions/event_pages#transition.
- wtyczka wykonuje to, co robi użytkownik sprawdzając "co nowego?" dzieje się na forum. Nie znam statystyk, ale wydaje mi się, że użytkownicy odświeżają to forum co kilka - kilkanaście minut (tak przynajmniej widać po reakcjach na nowe tematy, czy posty/komentarze wewnątrz nich). Pewnie zależy to od tego, czy forum otworzone jest w jednej z wielu kart przeglądarki i użytkownik zagląda tam "jak mu się przypomni"; czy użytkownik czeka na odpowiedź, albo jakąś reakcję, to odświeża częściej
- pobiera z aktualnych tematów informacje takie jak:
- dział forum,
- nazwa tematu,
- udzielone odpowiedzi (na podstawie ich kolorów - czerwony, niebieski, zielony),
- czas ostatniej aktywności,
- rodzaj ostatniej aktywności
- pobiera listę powiadomień dla użytkownika
- sprawdza, czy od ostatniego odświeżenia rzeczywiście wystąpiła nowa aktywność
- wyświetla użytkownikowi (na ikonie wtyczki w przeglądarce) czy są jakieś aktywności i ile ich się nagromadziło od ostatniego sprawdzenia ich przez użytkownika lub wyświetla ostrzeżenie, że karta z forum nie jest wykrywana (została zamknięta albo użytkownik znajduje się na innej podstronie forum)
- po otworzeniu okienka wtyczki pokazuje się jej interfejs (w formie mini strony internetowej), gdzie pokazana jest godzina ostatniego odświeżenia strony oraz 2 listy (można je sobie zmieniać - w formie Tabs'ów) z tematami i powiadomieniami
- po najechaniu myszką na poszczególny temat pojawiają się dodatkowe (dział, rodzaj ostatniej aktywności, ilość odpowiedzi)
- po kliknięciu w temat/powiadomienie otwiera się nowa karta w przeglądarce (tak jak otwiera się karty kółkiem myszki) ze stroną forum, gdzie dana akcja (powiadomienie/temat) miało miejsce
Wtyczka działa na czterech skryptach:
- popup.js (działa tylko, gdy użytkownik kliknie w ikonę wtyczki - czyli ją otworzy/aktywuje): zajmuje się interfejsem okienka wtyczki. Czyli buduje dynamicznie zawartość, wypełniając stronkę listami z tematami i powiadomieniami
- background.js (działa w tle przeglądarki): odpowiada za cykliczne (te wspomniane kilka minut) przekazanie żądania do skryptu na stronie forum, aby sprawdził "co nowego?" w aktywnościach. Przekazuje zwrotne informacje w postaci JSON o tematach i powiadomieniach oraz czasie, kiedy zostało to sprawdzone. Również sprawdza, czy rzeczywiście nastąpiła jakaś aktywność, czy nic się nie zdarzyło od ostatniego odświeżenia. Przekazuje dane do popup.js z tematmi i powiadomieniami oraz czasem. Ewentualnie, jeśli użytkownik samemu kliknie w przycisk "Sprawdź stronę" w okienku wtyczki, to skrypt ten także pośle żądanie do skryptu na forum. Pełni rolę strażnika, ponieważ sprawdza, czy po zamknięciu jakiejś karty, albo zmianie adresu karty z forum - nadal jest dostępna karta z odpowiednią podstroną forum (o tym później). Jeśli odpowiednia karta zostanie zamknięta, to na ikonie wtyczki zostanie pokazane ostrzeżenie, a jeśli użytkownik mimo wszystko aktywuje okienko wtyczki, to tam pojawi się tekstowe ostrzeżenie oraz link, który pozwoli otworzyć właściwą podstronę forum i zresetuje wtyczkę.
- content.js (funkcjonuje na stronie forum "http://forum.pasja-informatyki.pl/activity"): odpowiada za pobranie informacji o tematach i powiadomieniach, głównie poprzez DOM API. Odbiera żądania od background.js oraz wysyła mu pobrane i uporządkowane dane o tematach/powiadomieniach. Dodatkowo, aby móc przechwycić moment zakończenia pobierania powiadomień z serwera poprzez AJAX - skrypt wstrzykuje kod JS, który oczekuje na zakończenie działania AJAX. "Że co?" - ktoś zapyta. Otóż skrypt content.js (czy też każdy, który ma dostęp do obiektu window strony na której się znajduje - oczywiście od strony wtyczki) nie ma dostępu do scope'u funkcji na stronie - jest wyizolowany https://developer.chrome.com/extensions/content_scripts#execution-environment . Jako, że ma on dostęp do HTMLa, to można za jego pomocą dodać do strony skrypt, który już będzie pełnoprawnie sobie na stronie działał. Taki skrypt (dodany w formie string https://developer.chrome.com/extensions/content_scripts#pi) może przechwytywać (jeśli się nie mylę w kwestii nazewnictwa tego zjawiska) choćby żądania AJAX - a tą drogą, jak wspomniałem, pobierane są powiadomienia użytkownika.
Jak to wygląda?
Aby wtyczka działała prawidłowo, w przeglądarce musi być otwarta karta z pod stroną "Ostatnia aktywność". Powodem jest to, że na tej podstronie wyświetlane są najnowsze aktywności, takie jak: nowe pytania, ostatnie odpowiedzi lub komentarze, edycje. Tematy z najnowszą aktywnością są przenoszone na samą górę. Chyba, że źle to zaobserwowałem, wtedy trzeba będzie zmienić trochę kodu :) W każdym razie, skrypty pilnują, aby ta karta była otwarta. Zaś jako potwierdzenie, właściwa podstrona forum otrzymuje czerwone obramowanie z informacją na górze "Forum jest obserwowane przez wtyczkę".
Krótkie FAQ (pytania, które przychodzą mi do głowy, albo możliwe że padną w odpowiedziach/komentarzach):
- [P] Dlaczego muszę aktywować tryb programisty, aby móc uruchomić wtyczkę? Z każdym uruchomieniem przeglądarki pojawia się irytujący komunikat, że taka opcja jest włączona.
[O] Wtyczka jest na etapie developingu - ładowana jest po prostu z folderu. Nie jest ona obecna w Chrome Store, dlatego nie jest ona "traktowana oficjalnie" przez przeglądarkę. https://developer.chrome.com/extensions/faq#faq-dev-01
- [P] Czy jest możliwe napisanie takiej wtyczki dla innych przeglądarek?
[O] To zależy od ich API - jeśli funkcje będą oferowały takie same lub zbliżone możliwości, to nie widzę przeszkód
- [P] Czy można zaimplementować możliwość pokazywania powiadomień nie będąc w przeglądarce (np. gdzieś w pasku zadań)?
[O] Istnieje taka możliwość https://developer.chrome.com/apps/richNotifications , ale na chwilę obecną jest ona ograniczona - nie można utworzyć powiadomienia w formie HTML. Dlatego nie wiem, czy dało by się umieścić w powiadomieniu wszystkie informacje.
Trochę screenów, aby to zobrazować: http://imgur.com/a/lJVq1
Kod wtyczki na moim GitHub: https://github.com/ChrissP92/Forum-Plugin
Instalacja:
- Pobierz całość z GitHub (powinno pobrać jako .ZIP).
- Wypakuj folder.
- W przeglądarce wejdź na stronę chrome://extensions/ (wpisz w pasku adresu) albo wejdź tam poprzez Menu > Więcej narzędzi > Rozszerzenia.
- Aktywuj "Tryb programisty" (checkbox widoczny jest po środku, na górze).
- Kliknij w przycisk "Wczytaj rozszerzenie bez pakietu".
- Znajdź folder, w który znajdują się pobrane pliki z pkt 2.
- Wtyczka powinna zostać dodana do listy aktualnie zainstalowanych wtyczek.
- Dla pewności sprawdź, czy zaznaczona jest opcja "Włączone" po prawej stronie wtyczki oraz odśwież kartę z wtyczkami (na wszelki wypadek).
- Otwórz kartę i wejdź na stronę "http://forum.pasja-informatyki.pl/activity" - powinna pokazać się czerwona obwódka z informacją na górze o obserwacji forum przez wtyczkę.
Z racji tego, że projekt jest w fazie beta (tak go oceniam) - skrypty wtyczki na pewno zawierają jakieś błędy. Całość może w niektórych momentach nie działać prawidłowo, czy też mogą pojawiać się dziwne rzeczy w okienku popup (gdy kliknie się w ikonę wtyczki). Jest to moja pierwsza aplikacja, która korzysta z Google Chrome API. Dlatego nie nad wszystkim tam jeszcze panuję.
Pierwotnie chciałem założyć temat z pytaniem, czy pomysł na taką wtyczkę jest ok - zebrać pomysły. Stwierdziłem jednak, że lepiej przyjmie się, nie pomysł, lecz efekty jego realizacji. Wtedy każdy zainteresowany (a liczę, że koncepcja nie jest całkowicie bezsensowna) będzie mógł przetestować wtyczkę i widząc, co jest możliwe - podzielić się opinią, co można jeszcze dodać/usprawnić itp.
A zatem, po pierwsze proszę o wyrażenie swojego zdania w ankiecie - czy taka wtyczka ma w ogóle sens? Czy ktoś będzie z niej korzystał, bo sensowniej wprowadzać usprawnienia do czegoś, z czego się korzysta :)
Również uprzejmie proszę o wszelkie opinie, sugestie, a przede wszystkim wytknięcie jakichkolwiek błędów w skryptach JavaScript i plikach HTML oraz CSS.
Pozdrawiam :)