Highlight or Hide Specific Divs on Taobao

Highlight or hide specific divs and links on Taobao search results based on toggle

  1. // ==UserScript==
  2. // @name Highlight or Hide Specific Divs on Taobao
  3. // @namespace http://tampermonkey.net/
  4. // @version 0.2
  5. // @description Highlight or hide specific divs and links on Taobao search results based on toggle
  6. // @author max5555
  7. // @match https://s.taobao.com/search?*
  8. // @grant GM_addStyle
  9. // @license MIT
  10. // ==/UserScript==
  11.  
  12. (function() {
  13. 'use strict';
  14.  
  15. // Add slider to the page
  16. const sliderHTML = `
  17. <div style="position:fixed; right:10px; top:10px; z-index:9999; background-color: white; padding: 5px; border: 1px solid #ccc; border-radius: 5px;">
  18. Highlight specific divs:
  19. <label class="switch">
  20. <input type="checkbox" id="toggleDivs" checked>
  21. <span class="slider round"></span>
  22. </label>
  23. </div>
  24. `;
  25. document.body.insertAdjacentHTML('beforeend', sliderHTML);
  26.  
  27. let highlightEnabled = true; // Slider is enabled by default
  28.  
  29. function updateDivs() {
  30. // Highlight or hide Tmall divs
  31. const tmallDivs = document.querySelectorAll('div a[href^="//detail.tmall.com/"]');
  32. tmallDivs.forEach(div => updateDivVisibility(div, '4px solid red'));
  33.  
  34. // Highlight or hide Taobao links
  35. const taobaoLinks = document.querySelectorAll('a[href*="click.simba.taobao.com/"]');
  36. taobaoLinks.forEach(link => updateDivVisibility(link, '4px solid orange'));
  37. }
  38.  
  39. function updateDivVisibility(element, borderStyle) {
  40. const parentDiv = element.closest('div');
  41. if (parentDiv) {
  42. if (highlightEnabled) {
  43. parentDiv.style.border = borderStyle; // Highlight with specified border
  44. parentDiv.style.display = ''; // Ensure the div is visible
  45. } else {
  46. parentDiv.style.display = 'none'; // Hide the div
  47. }
  48. }
  49. }
  50.  
  51. document.getElementById('toggleDivs').addEventListener('change', (event) => {
  52. highlightEnabled = event.target.checked;
  53. updateDivs();
  54. });
  55.  
  56. // Use MutationObserver to handle dynamically loaded content
  57. const observer = new MutationObserver(() => {
  58. updateDivs();
  59. });
  60.  
  61. // Start observing the target node for configured mutations
  62. observer.observe(document.body, {
  63. childList: true,
  64. subtree: true
  65. });
  66.  
  67. // Initial update
  68. updateDivs();
  69. })();