OLX UA Specific AdCard Hider with Toggle

Hide specific divs on OLX UA with a toggle slider

  1. // ==UserScript==
  2. // @name OLX UA Specific AdCard Hider with Toggle
  3. // @namespace http://tampermonkey.net/
  4. // @version 0.1
  5. // @description Hide specific divs on OLX UA with a toggle slider
  6. // @author max5555
  7. // @grant none
  8. // @license MIT
  9. // @match https://www.olx.ua/uk/*
  10. // ==/UserScript==
  11.  
  12. (function() {
  13. 'use strict';
  14.  
  15. // Function to hide divs with the specific ID pattern that contains the adCard-featured
  16. function hideSpecificAdCards() {
  17. if (!document.getElementById('adCardToggleSlider').checked) return;
  18.  
  19. const allDivs = document.querySelectorAll('div[id]');
  20. allDivs.forEach(div => {
  21. const idPattern = /^[0-9]+$/; // Matches IDs that are purely numeric
  22. if (idPattern.test(div.id) && div.querySelector('div[data-testid="adCard-featured"]')) {
  23. div.style.display = 'none';
  24. }
  25. });
  26. }
  27.  
  28. // Function to show divs again
  29. function showSpecificAdCards() {
  30. const allDivs = document.querySelectorAll('div[id]');
  31. allDivs.forEach(div => {
  32. const idPattern = /^[0-9]+$/; // Matches IDs that are purely numeric
  33. if (idPattern.test(div.id) && div.querySelector('div[data-testid="adCard-featured"]')) {
  34. div.style.display = 'block';
  35. }
  36. });
  37. }
  38.  
  39. // Create a slider at the top right for toggling
  40. const sliderHTML = `
  41. <div style="position: fixed; top: 10px; right: 10px; z-index: 9999; background-color: white; padding: 5px; border: 1px solid #ccc;">
  42. <label>
  43. Hide Ad Card:
  44. <input id="adCardToggleSlider" type="checkbox" checked>
  45. </label>
  46. </div>
  47. `;
  48. document.body.insertAdjacentHTML('beforeend', sliderHTML);
  49.  
  50. // Attach event listener to the slider
  51. document.getElementById('adCardToggleSlider').addEventListener('change', function() {
  52. if (this.checked) {
  53. hideSpecificAdCards();
  54. } else {
  55. showSpecificAdCards();
  56. }
  57. });
  58.  
  59. // Initial hiding of the divs
  60. hideSpecificAdCards();
  61.  
  62. // Using a MutationObserver to handle dynamic loading of content
  63. const observer = new MutationObserver(() => {
  64. if (document.getElementById('adCardToggleSlider').checked) {
  65. hideSpecificAdCards();
  66. }
  67. });
  68. observer.observe(document.body, {
  69. childList: true,
  70. subtree: true
  71. });
  72. })();