Bookmarklet to display image pairs listed in a file on the current GCP bucket path

gcp-bucket-display-image-pairs-in-file-bookmarklet.js

javascript: (function() {
  let filteredInputId = document.getElementById("filterInputId");
  if (filteredInputId) {
    filteredInputId.remove();
  }

  let table = document.getElementsByTagName("table")[0];
  table.parentNode.insertAdjacentHTML("beforebegin", '<input id="filterInputId" type="file">');

  let url = location.protocol + '//' + location.host + location.pathname;
  url = url.split(';')[0];
  url = url.replace("https://console.cloud.google.com/storage/browser", "https://storage.cloud.google.com");

  document.getElementById('filterInputId').addEventListener('change', function() {
    var fileReader = new FileReader();
    fileReader.onload = function(e) {
      let imageNames = e.target.result.trim().split(/[\r\n]+/g);

      let imageElements = imageNames.map(name => {
        let imagePair = name.split(" ");
        let paths = imagePair.map(path => {return url + '/' + path.trim()});
        let element = "<div style='border: 2px dashed red;display: inline-flex;'>" + 
                      "<img height=200 src='" + paths[0] + "' title='" + imagePair[0] + "'/>" +
                      "<img height=200 src='" + paths[1] + "' title='" + imagePair[1] + "'/></div>";
        return element;
      });

      imageElements = Array.from(new Set(imageElements));
      let imageGrid = document.getElementById("imageGrid");
      if (imageGrid) {
        imageGrid.remove();
      }
      table.insertAdjacentHTML("beforebegin", "<div id='imageGrid'>" + imageElements.join("") + "</div>");
    };
    fileReader.readAsText(this.files[0]);
  })
})();