✨Piszemy – Automatyczny klikacz Pajacyk.pl

Niedawno wrzuciłem na wykop.pl zapytanie odnośnie stworzenia automatycznego klikacza (raz dziennie) w brzuszek pajacyka na pajacyk.pl w formie rozszerzenia do chroma.

Wpis można zobaczyć tutaj: https://www.wykop.pl/wpis/62046557/pytanie-do-was-mirki-i-mirabelki-czy-bylibyscie-ch/

Powiedzmy że był pozytywny oddzew, więc chętnie zabieram się do pracy!

🤔 Założenia klikacza

  • Uruchamiany wyłącznie raz dziennie
  • Automatyczne klikanie w brzuszek
  • Nie może być inwazyjny dla użytkownika (nie może przeszkadzać)
  • Obsługa banalnie prosta: raz zainstalowane rozszerzenie ma działać, mamy zapomnieć o istnieniu extensiona.

✍️ Piszemy kod!

Cały projet będzie zawierać wyłącznie 2 pliki:

  • manifest.json w wersji 3
  • background.js, gdzie wrzucimy cały kod

manifest.json – czyli czego potrzebujemy

{
  "name": "Automatyczny klikacz Pajacyk.pl",
  "description": "Automatyczne klikanie raz dziennie w brzuszek pajacyka",
  "version": "1.0",
  "manifest_version": 3,
  "background": {
    "service_worker": "background.js"
  },
  "host_permissions": ["http://*/",  "https://*/"],
  "permissions": ["scripting", "tabs", "storage"]
}

 „host_permissions”: [„http://*/”,  „https://*/”] – oznacza, że rozszerzenie będzie uruchamiane na KAŻDEJ stronie. Dlaczego tak? Nie możemy ustawić ograniczenia wyłącznie np. google czy facebooka, bo extension odpaliłby się dopiero po wejsciu na te strony. W tym przypadku potrzebujemy uruchamiać rozszerzenie zawsze i wszedzie.

„permissions”: [„scripting”, „tabs”, „storage”] – dlaczego aż tak dużo pozwoleń?

  • scripting – do klikania w pajacyka
  • tabs – do otwarcia taba z pajacyk.pl
  • storage – aby móc zapisać informację, że dzisiaj już kliknęliśmy

background.js czyli „🧠” całej operacji

Zaczynamy od prostego bloku, który będzie uruchamiać kod, kiedy wgra się cała strona, na której jestesmy

chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) {
  if (changeInfo.status == "complete") {
      // tutaj bedzie cały kod!
  }
});

Teraz musimy rozbić na czynniki pierwsze w jaki sposób ma się zachowywać rozszerzenie.

  • po otwarciu strony, chrome powinien sprawdzić czy dzisiaj już odwiedził pajacyka
    – jeśli odwiedził, to ma zakończyć działanie
  • jeśli nie odwiedził, to ma otworzyć pajacyk.pl w nowej zakładce
  • następnie ma kliknąć w brzuszek pajacyka
  • zamknąć zakładkę
  • zapisać informację o odwiedzinach
chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) {
  if (changeInfo.status == "complete") {
      // otwieramy zakładkę z pajacykiem
    chrome.tabs.create({
      url: "https://www.pajacyk.pl/",
    });
  }
});

Otwieramy zakładkę i musimy wykonać eventa click na .pajacyk__clickbox

Trzeba jakoś wstrzyknąć kod javascript:

const $clickBox = document.querySelector(".pajacyk__clickbox");
$clickBox.click();

Funkcja chrome.tabs.create nie posiada możliwości wrzucenia js’a, więc trzeba skorzystać z  chrome.scripting.executeScript:

  chrome.tabs.create(
    {
      url: "https://www.pajacyk.pl/",
    },
    function (newTab) {

      // wstrzykujemy JS'a do nowego taba
      chrome.scripting.executeScript({
        target: {
          tabId: newTab.id,
          allFrames: false,
        },
        func: function () {
          const $clickBox = document.querySelector(".pajacyk__clickbox");
          $clickBox.click();
        },
      });
    }
  );

Powinno być wszystko OK, lecz! Nie działa jak powinno:

Trzeba podejść inaczej do wstrzykiwania kodu. Jeśli otwieramy nowego taba, to extension również się uruchamia. Musimy sprawdzić czy istnieje już otwarty pajacyk.pl:

  • jesli nie, to otwórz
  • jesli tak, to wstrzyknij kod

Użyjemy funkcji chrome.tabs.query, która zwróci wszystkie otwarte zakładki w chromie. Poszukamy takiej, która ma w url’u „pajacyk.pl”

  chrome.tabs.query({}, function (tabs) {
    const pajacykTab = tabs.find((t) => {
      return t.url.indexOf("pajacyk.pl") > -1;
    });

    const isPajacykTabExists = pajacykTab !== undefined;
  });

Pod isPajacykTabExists mamy porządaną przez nas informację

  chrome.tabs.query({}, function (tabs) {
    const pajacykTab = tabs.find((t) => {
      return t.url.indexOf("pajacyk.pl") > -1;
    });

    const isPajacykTabExists = pajacykTab !== undefined;

    if (!isPajacykTabExists) {
 // nie istnieje, więc otwieramy taba pajacyk
      chrome.tabs.create({
        url: "https://www.pajacyk.pl/",
      });
    } else { // istnieje tab pajacyk
      chrome.scripting.executeScript({
        target: {
          tabId: pajacykTab.id, // wstrzykujemy js'a do taba pajacyk
          allFrames: false,
        },
        func: function () {
          // nasz js klikający w brzuszek!
          const $clickBox = document.querySelector(".pajacyk__clickbox");
          $clickBox.click();
          window.close(); // zamykamy pajacyka zaraz po kliknięciu
        },
      });
    }
  });

Wszystko PRAWIE gra jak powinno. Kod js klika, lecz nie widzimy co się dzieje. Aby się upewnić czy wszystko działa dodamy proste opóźnienie setTimeout.

  func: function () {
            setTimeout(function () {
              const $clickBox = document.querySelector(".pajacyk__clickbox");
              $clickBox.click();

              setTimeout(function () {
                window.close();
              }, CLOSE_TAB_DELEY);
            }, CLICK_THE_BELLY_DELEY);
          },

Musimy jeszcze dodać zabezpieczenie aby klikanie się wykonywało tylko raz dziennie.

  if (changeInfo.status == "complete") {
    chrome.storage.local.get(STORAGE_KEY, function (data) {
      const today = getToday();
      let lastExecutionDate = data.lastExecutionDate || DEFAULT_DATE;

      const hasAlreadyBeenClickedToday = lastExecutionDate == today;
      if (hasAlreadyBeenClickedToday) {
        return;
      }

      clickTheBelly(today);
    });
  }

Co tutaj się dzieje?

  • odwołujemy się do storage local, gdzie trzymamy date ostatniego kliknięcia
  • pobieramy dzisiejszą datę w formacie: yyyy-mm-dd
  • sprawdzamy czy istnieje data zapisana w storage local, jeśli nie, to ustawiamy DEFAULT_DATE
  • sprawdzamy czy zapisana data równa się z dzisiejszą
  • jeśli tak, to znaczy że już kliknęliśmy w brzuszek
  • jeśli nie, to wykonujemy funkcję clickTheBelly

Jeszcze trzeba dopisać kod odpowiadający za zapis daty. Musimy ten kod wykonać zaraz PO zakończeniu skryptu klikającego

 chrome.scripting.executeScript({}, callback: function() {});

Kod zapisujący wrzucimy do callbacka executeScript

     chrome.scripting.executeScript(
        {
          target: {
            // usunięte dla czytelności
          },
          func: function () {
            // usunięte dla czytelności
          },
        },
        function () { // to jest callback
          chrome.storage.local.set(
            {
              lastExecutionDate: today,
            },
            function () {}
          );
        }
      );

Teraz wszystko działa!

Zainteresowanych zapraszam na githuba, gdzie znajduje się cały kod rozszerzenia na githubie

A pobrać rozszerzenie można tutaj z Chrome Web Store

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany.