Hide Amazon Cart

Auto-hide annoying cart sidebar

Voor het installeren van scripts heb je een extensie nodig, zoals Tampermonkey, Greasemonkey of Violentmonkey.

Voor het installeren van scripts heb je een extensie nodig, zoals Tampermonkey of Violentmonkey.

Voor het installeren van scripts heb je een extensie nodig, zoals Tampermonkey of Violentmonkey.

Voor het installeren van scripts heb je een extensie nodig, zoals Tampermonkey of Userscripts.

Voor het installeren van scripts heb je een extensie nodig, zoals {tampermonkey_link:Tampermonkey}.

Voor het installeren van scripts heb je een gebruikersscriptbeheerder nodig.

(Ik heb al een user script manager, laat me het downloaden!)

Voor het installeren van gebruikersstijlen heb je een extensie nodig, zoals {stylus_link:Stylus}.

Voor het installeren van gebruikersstijlen heb je een extensie nodig, zoals {stylus_link:Stylus}.

Voor het installeren van gebruikersstijlen heb je een extensie nodig, zoals {stylus_link:Stylus}.

Voor het installeren van gebruikersstijlen heb je een gebruikersstijlbeheerder nodig.

Voor het installeren van gebruikersstijlen heb je een gebruikersstijlbeheerder nodig.

Voor het installeren van gebruikersstijlen heb je een gebruikersstijlbeheerder nodig.

(Ik heb al een beheerder - laat me doorgaan met de installatie!)

// ==UserScript==
// @name        Hide Amazon Cart
// @namespace   https://github.com/spapadim
// @match       https://www.amazon.com/*
// @run-at      document-start
// @grant       none
// @version     1.0
// @author      [email protected]
// @description Auto-hide annoying cart sidebar
// ==/UserScript==

(function () {
  // Perform the actual DOM modification, assuming sidebar is loaded
  function hideSidebar() {
    var sidebar = document.querySelector("div#nav-flyout-ewc");

    if (!sidebar) {
      console.warn("No cart sidebar element found... skipping.");
      return
    }
    
    const ensureHidden = () => {
      if (sidebar.style.display != "none") {  // Avoid mutation infinite loop...
        console.info("Hiding Amazon cart sidebar")
        // Hide sidebar itself
        sidebar.style.display = "none";
        // Hide "arrow" (margin notch), if present/loaded
        var notchArrow = document.querySelector("div#nav-flyout-anchor");
        if (notchArrow) {
          notchArrow.style.display = "none";
        }
        // Remove HTML body padding (set equal to width of sidebar)
        document.querySelector("body").style.paddingRight = 0;
      }
    };

    // Hide now and...
    ensureHidden();

    // ...register event to re-hide whenever Amazon un-hides (mutation observer
    // is permanent, since sidebar placement/size seem to use JS, not just CSS...)
    const sidebarObserver = new MutationObserver((mutationList, observer) => {
      //console.info("Sidebar attr mutation:", mutationList);
      ensureHidden();
    });
    sidebarObserver.observe(
      sidebar, {
        childList: false,
        attributes: true,
        // attributeOldValue: true,
        attributeFilter: ["style"]
      }
    );
  }
  
  // We could run userscript at document-end instead of doing this, 
  // but then the cart is annoyingly visible for a second or so...
  const docObserver = new MutationObserver((mutationList, observer) => {
    //console.info("Document descendant mutation:", mutationList);
    // Search for sidebar div among all added DOM nodes
    var sidebars = mutationList.flatMap(
      mutation => Array.prototype.find.call(
        mutation.addedNodes, 
        node => node.matches && node.matches("div#nav-flyout-ewc")
      ) || []
    );
    if (sidebars.length > 0) {
      // It appeared, squash it!
      console.info("Detected sidebar div:", sidebars)
      docObserver.disconnect();
      hideSidebar();
    }
  });
  docObserver.observe(
    document, {
      subtree: true,
      childList: true,
      attributes: false,
      characterData: false
    }
  );
})();