Amazon - Hide unwanted search results permanently (localStorage)

amazon-search-result-filter.js

/**
 * Running this snippet in the browser console, when being on Amazon's result page,
 * will provide a button to hide results permanently.
 *
 * TODO:
 * - add option to insert and store also a description
 *   for the hidden products (for bugs, drawbacks, or other user notes)
 * - support sync to cloud, in order to not loose the list when clearing
 *   browser cache
 * - support public blacklists to share among users (practically, a rate
 *   system outside of Amazon)
 */


let styles = `
  [data-asin] {
    position: relative;
  }

  .button-container {
    position: absolute;
    top: 0;
    right: 0;
  }

  .toggle-button {
    background-color: #ffffff;
    border: none;
    font-size: 16px;
    cursor: pointer;
  }

  .hidden {
    opacity: 0.2;
  }
`
let styleSheet = document.createElement("style")
styleSheet.innerText = styles
document.head.appendChild(styleSheet)

const getStorageId = productId => `amzHiddenProd_${productId}`

function hideProduct(opts) {
  // Product is currently visible, hide it and add to localStorage
  const storageId = getStorageId(this.productId)
  this.classList.add('hidden');
  localStorage.setItem(storageId, `https://www.amazon.de/dp/${this.productId}`);
  if (!opts?.nolog ?? false)
    console.log(`AmazonHiddenProducts - Hidden productId "${this.productId}": ${this.productTitle} (URL: ${localStorage.getItem(storageId)})`)
}
function restoreProduct(opts) {
  // Product is currently hidden, make it visible and remove from localStorage
  const storageId = getStorageId(this.productId)
  this.classList.remove('hidden');
  localStorage.removeItem(storageId);
  if (!opts?.nolog ?? false)
    console.log(`AmazonHiddenProducts - Restored productId "${this.productId}": ${this.productTitle}`)
}


const amzSearchInitialized = []
//window.onload = () => 
document.querySelectorAll('[data-asin]:not([data-asin=""]):not(:first-child):not(:last-child)').forEach(amzSearchResult => {
  const productTitle = amzSearchResult.productTitle = amzSearchResult.querySelector('[class*="-title-"] h2')?.textContent
  const productId = amzSearchResult.productId = amzSearchResult?.dataset?.asin;
  const storageId = getStorageId(productId)

  const restore = restoreProduct.bind(amzSearchResult)
  const hide = hideProduct.bind(amzSearchResult)

  if (!productId) {
    console.log(amzSearchResult)
    throw new Error(`Unable to get ID for ${productId}`)
  } else {
    amzSearchInitialized.push(productId)
  }

  // Create a button element
  const button = document.createElement('button');
  button.innerText = '👁';
  button.classList.add('toggle-button');
  // Create a container for the button
  const buttonContainer = document.createElement('div');
  buttonContainer.classList.add('button-container');
  buttonContainer.appendChild(button);
  // Add button container to the top-right corner of the amzSearchResult element
  amzSearchResult.appendChild(buttonContainer);

  // Check if productId is in localStorage and update visibility accordingly
  if (localStorage.getItem(storageId) !== null) {
    hide()
  }

  // Add click event listener to the button
  button.addEventListener('click', () => {
    if (localStorage.getItem(storageId) == null) {
      console.log('hiding because localStorage.getItem(storageId) is null', storageId, localStorage.getItem(storageId));
      hide()
    } else {
      restore()
    }
  });
});
console.debug('AmazonHiddenProducts - Initialized search results with IDs: ', amzSearchInitialized)