Usuwanie miękkich paywalli za pomocą CSS i JavaScriptu
Niektóre paywalle przesyłają Ci cały artykuł, a potem ukrywają go za szarą nakładką i blokują stronę tak, że nie możesz przewijać. Tekst jest już w Twojej przeglądarce — po prostu nie możesz go przeczytać. Ten artykuł pokazuje, jak usunąć tę nakładkę za pomocą CSS i JavaScriptu. Najpierw jednak ważne rozróżnienie i uczciwa uwaga o etyce.
Miękki paywall a twardy paywall
To istotne, więc przeczytaj zanim cokolwiek zrobisz.
- Miękki paywall przesyła do Twojej przeglądarki pełny HTML artykułu, a potem go ukrywa: nakładka, blokada przewijania, rozmycie, ograniczenie
max-height. Treść jest w DOM. Możesz to potwierdzić w DevTools — otwórz panel Elements i wyszukaj akapit artykułu; jeśli tam jest, paywall jest miękki. - Twardy paywall w ogóle nie przesyła treści. Serwer sprawdza Twoją subskrypcję i dopiero wtedy zwraca tekst. DOM zawiera zajawkę i nic więcej. Żaden CSS ani JavaScript nie wyczaruje treści, która nigdy nie została dostarczona.
Ten artykuł dotyczy wyłącznie miękkich paywalli — przywracania widoczności tekstu, który już znajduje się w Twojej przeglądarce. Twardego paywalla nie da się obejść i nie powinieneś próbować.
Uczciwa uwaga o etyce i prawie
Wytworzenie dobrego dziennikarstwa kosztuje. Miękki paywall to zakład wydawcy, że namolne nagabywanie działa lepiej niż blokowanie. Przestylowanie strony we własnej przeglądarce jest legalne — to samo prawo, dzięki któremu istnieją blokery reklam i Tryb czytnika — ale legalność to nie cała historia.
Bądź przyzwoitym czytelnikiem: jeśli polegasz na danym tytule, wykup subskrypcję. Używaj tych technik do okazjonalnego, jednorazowego artykułu, dla dostępności albo aby przeczytać coś, co przysłał Ci znajomy — a nie jako sposobu, by już nigdy nie płacić za wiadomości. Redakcje, których nie finansujesz, w końcu się zamykają.
Znajdowanie tego, co ukrywa artykuł
Otwórz DevTools, panel Elements. Miękkie paywalle używają niewielkiego zestawu sztuczek, zwykle w połączeniu:
divo stałej pozycji z wysokimz-indexprzykrywający artykuł — nakładka.overflow: hiddenalboposition: fixedna<body>— blokada przewijania.filter: blur()na dolnych akapitach.max-heightplusoverflow: hiddenna kontenerze artykułu — ograniczenie z zanikaniem.
Klikaj wokół elementu nakładki i czytaj jego computed styles. Zanotuj nazwy klas — to je za chwilę zaadresujesz.
Usuwanie nakładki
Nakładka to osobny element nałożony na wierzch. Ukryj go za pomocą CSS:
/* Common paywall overlay class and ID patterns */
.paywall,
.paywall-overlay,
.subscription-wall,
.piano-overlay,
.tp-modal,
.tp-backdrop,
[class*="paywall" i],
[class*="metering" i],
[id*="paywall" i] {
display: none !important;
}Użyj flagi i do dopasowania atrybutów bez rozróżniania wielkości liter, dokładnie tak jak przy banerach cookie. Zacznij szeroko, a potem zawęź do konkretnych klas, jeśli coś niechcący nadmiernie dopasujesz.
Odblokowywanie przewijania body
Ukrycie nakładki nic nie daje, jeśli strona nadal jest zamrożona. Miękkie paywalle blokują przewijanie, abyś nie dotarł do ukrytego tekstu. Wymuś jego powrót:
/* Restore normal scrolling */
html, body {
overflow: auto !important;
position: static !important;
height: auto !important;
}Jeśli skrypt wciąż na nowo nakłada blokadę, mała reguła JS pokona go, czyszcząc styl inline w pętli:
// Re-assert scrolling against a script that keeps locking it
setInterval(() => {
document.documentElement.style.overflow = 'auto';
document.body.style.overflow = 'auto';
document.body.style.position = 'static';
}, 400);Odostrzanie tekstu
Wiele paywalli zostawia pierwsze dwa akapity ostre, a resztę rozmywa jako zajawkę. Tekst jest tam w całości — jest po prostu nieostry. Usuń filtr:
/* Kill the blur teaser */
.article-body,
.article-content,
[class*="blur" i],
[class*="fade" i] {
filter: none !important;
-webkit-filter: none !important;
}Jeśli rozmycie siedzi na konkretnym dziecku, zinspekcjonuj je i zaadresuj dokładnie tę klasę — globalne * { filter: none } może zepsuć prawidłowe efekty gdzie indziej na stronie.
Usuwanie ograniczenia max-height
Druga klasyczna zajawka: kontener artykułu ma max-height i overflow: hidden, więc widzisz górę i gradientowe zanikanie. Zdejmij ograniczenie:
/* Unclamp the article so the full text shows */
.article-body,
.post-content,
[class*="article" i][class*="clamp" i],
[class*="gated" i] {
max-height: none !important;
overflow: visible !important;
-webkit-mask-image: none !important;
mask-image: none !important;
}
/* Remove the gradient fade element if it is a separate node */
.content-fade,
[class*="gradient-fade" i] {
display: none !important;
}Składanie tego w jedną regułę
Każdy wydawca używa nieco innej mieszanki. Efektywne podejście w JustZix to jedna reguła na stronę, ściśle ograniczona:
- Utwórz regułę ze wzorcem URL
https://news.example.com/*. - Wklej CSS od nakładki, odblokowania przewijania, odostrzania i zdjęcia ograniczenia do zakładki CSS.
- Dodaj JS odblokowujący przewijanie tylko wtedy, gdy skrypt wciąż na nowo blokuje stronę.
- Trzymaj te reguły w folderze o nazwie „Czytnik”, abyś mógł je przeglądać i wyłączać jako grupę.
Ponieważ reguła jest ograniczona do jednej domeny, nigdy nie wpłynie na stronę, na której wolałbyś po prostu wykupić subskrypcję.
Zobacz też
- Wyłącz dark patterns i fałszywą pilność — te same umiejętności zastosowane do manipulacyjnego UI.
- Własny arkusz druku dla lepszych PDF-ów — uporządkuj artykuł przed zapisaniem.
- Zastosowania JustZix — więcej reguł zorientowanych na czytanie.
Do okazjonalnego artykułu ukrytego za miękką nakładką zainstaluj JustZix i napisz jedną ograniczoną regułę. A jeśli czytasz dany tytuł często — zapłać za niego. To właśnie sprawia, że artykuły wciąż powstają.
Oceń ten wpis
Brak ocen — oceń jako pierwszy.