Hide Amazon Cart

Auto-hide annoying cart sidebar

Vous devrez installer une extension telle que Tampermonkey, Greasemonkey ou Violentmonkey pour installer ce script.

Vous devrez installer une extension telle que Tampermonkey ou Violentmonkey pour installer ce script.

Vous devrez installer une extension telle que Tampermonkey ou Violentmonkey pour installer ce script.

Vous devrez installer une extension telle que Tampermonkey ou Userscripts pour installer ce script.

Vous devrez installer une extension telle que Tampermonkey pour installer ce script.

Vous devrez installer une extension de gestionnaire de script utilisateur pour installer ce script.

(J'ai déjà un gestionnaire de scripts utilisateur, laissez-moi l'installer !)

Vous devrez installer une extension telle que Stylus pour installer ce style.

Vous devrez installer une extension telle que Stylus pour installer ce style.

Vous devrez installer une extension telle que Stylus pour installer ce style.

Vous devrez installer une extension du gestionnaire de style pour utilisateur pour installer ce style.

Vous devrez installer une extension du gestionnaire de style pour utilisateur pour installer ce style.

Vous devrez installer une extension du gestionnaire de style pour utilisateur pour installer ce style.

(J'ai déjà un gestionnaire de style utilisateur, laissez-moi l'installer!)

// ==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
    }
  );
})();