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
