☰

Webtoon scroll-no-more

Quality of life improvements for webtoons.com

  1. // ==UserScript==
  2. // @name        Webtoon scroll-no-more
  3. // @icon        https://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Naver_Line_Webtoon_logo.png/128px-Naver_Line_Webtoon_logo.png
  4. // @description Quality of life improvements for webtoons.com
  5. // @match       https://www.webtoons.com/en/*
  6. // @version     1.1
  7. // @grant       none
  8. // @esversion   11
  9. // @license     MIT
  10. // @namespace https://greasyfork.org/users/1368219
  11. // ==/UserScript==
  12.  
  13. // Fill horizontal space with comics
  14. document.getElementById("_viewerBox")?.style.setProperty("width", 'auto');
  15.  
  16. // Add borders to images so reading order is clear (they sometimes don't exactly line up with actual panels)
  17. Array.from(document.getElementsByClassName("_images")).forEach(function(element) {
  18.     element.style.border = '1px solid grey';
  19. });
  20.  
  21. // Remove gaps between images
  22. document.getElementById("_imageList")?.style.setProperty('font-size', '0');
  23.  
  24. Array.from(document.getElementsByClassName('_images')).forEach(function(element) {
  25.     // Load all images immediately
  26.     element.src = element.dataset.url;
  27.     // Slight vertical gap between images
  28.     element.style.marginBottom = '20px';
  29. });
  30.  
  31. // left and right arrows for navigation
  32. document.onkeydown = function(e) {
  33.     if (e.keyCode == '37') {
  34.         var elements = document.querySelector("._prevEpisode")?.click();
  35.     } else if (e.keyCode == '39') {
  36.         var elements = document.querySelector("._nextEpisode")?.click();
  37.     }
  38. };