Jak stworzyć swój własny prosty AdBlocker do Chrome
Rozszerzenia Google Chrome to programy, które można zainstalować w przeglądarce Chrome, aby zmienić jej funkcjonalność. W sklepie z rozszerzeniami można znaleźć wiele niesamowitych dodatków, ale osobiście moim ulubionym jest blokowanie reklam. Czym właściwie jest blokowanie reklam?
Blokowanie reklam to oprogramowanie, które blokuje żądania sieciowe do i/lub od serwerów reklamowych. To definicja książkowa, ale spróbujmy to zrozumieć lepiej. Załóżmy, że chcę obejrzeć film na YouTube. Kiedy klikam na wideo, moja przeglądarka (Google Chrome) wysyła żądanie do YouTube z prośbą o przesłanie tego konkretnego filmu. Następnie YouTube informuje przeglądarkę, że przesyła wideo, ale przedtem prosi o wysłanie kilku żądań do swoich reklamodawców. W ten sposób otrzymujemy reklamy i wideo. Co robią blokery reklam? Blokują wszelkie żądania do tych serwerów reklamowych. Działa to równolegle z przeglądarką i sprawdza ruch sieciowy, aby zapobiec wysyłaniu żądań do reklamodawców.
Dzisiaj stworzymy swój własny prosty AdBlocker do Chrome. Dzięki temu nie tylko zrozumiesz, jak działa taki bloker, ale również nauczysz się tworzyć rozszerzenia do przeglądarki Chrome.
Przejdźmy do kodu
Najpierw stwórzmy strukturę projektu jak poniżej.
Teraz utwórzmy plik manifest.json, który będzie zawierał wszystkie ważne informacje o rozszerzeniu, takie jak nazwa, wersja itd.
{ "name": "NoAds Adblocker", "version": "1.0", "description": "Rozszerzenie Chrome blokujące reklamy", "permissions": [ "webRequest", "webRequestBlocking", "" ], "background": { "scripts": [ "background.js" ] }, "icons": { "16": "icons/logo_16.png", "48": "icons/logo_48.png", "128": "icons/logo_128.png" }, "manifest_version": 2 }
Ikony wspomniane powyżej to ten sam obraz w różnych rozmiarach, tj. 16x16, 48x48, 128x128. To logo blokera reklam. Możesz wybrać dowolny obraz i zmienić jego rozmiary. Dodaj wszystkie trzy loga do folderu "icons" o nazwach logo_16.png, logo_48.png i tak dalej.
Teraz stwórzmy plik background.js. W tym pliku wywołamy API Chrome i dodamy nasłuchiwacze zdarzeń. Dodamy nasłuchiwacz zdarzeń tuż przed wysłaniem żądania, aby mógł sprawdzić żądanie i zablokować je w razie potrzeby.
const filters = [ "*://*.doubleclick.net/*", "*://partner.googleadservices.com/*", "*://*.googlesyndication.com/*", "*://*.google-analytics.com/*", "*://creative.ak.fbcdn.net/*", "*://*.adbrite.com/*", "*://*.exponential.com/*", "*://*.quantserve.com/*", "*://*.scorecardresearch.com/*", "*://*.zedo.com/*" ]; chrome.webRequest.onBeforeRequest.addListener( function(details) { return { cancel: true }; }, { urls: filters }, ["blocking"] );W stałej "filters" możesz dodać serwery, z których pochodzą Twoje reklamy. I to wszystko! Gotowe!
Uruchom swój własny bloker reklam!
- Wejdź na chrome://extensions/
- Włącz tryb deweloperski (na górze po prawej stronie)
- Kliknij "Załaduj rozpakowane" i wybierz folder, w którym stworzyłeś bloker reklam
- Teraz spróbuj odwiedzić którąkolwiek z witryn podanych w filtrach i zobacz, że jest zablokowana.
Jeśli zobaczysz taki komunikat, oznacza to, że pomyślnie stworzyłeś swoje pierwsze rozszerzenie do Chrome!
Teraz, gdy już wiesz, jak stworzyć podstawowy bloker reklam, możesz rozwijać swoje umiejętności programistyczne, dodając kolejne funkcje do swojego rozszerzenia. Powodzenia!
Cały kod źródłowy możesz pobrać poniżej.
