Tampermonkey script to replace Internet Archive bookreader with Mirador viewer and IIIF content

ia-iiif-viewer.js

// ==UserScript==
// @name         Archive.org IIIF Viewer
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Adds IIIF viewer functionality to archive.org pages
// @author       Raffaele Messuti
// @match        https://archive.org/details/*
// @exclude      https://archive.org/details/@*
// @grant        none
// ==/UserScript==

(function () {
  "use strict";

  let isIIIFActive = false;
  let miradorIframe = null;

  function getIdentifier() {
    const path = window.location.pathname;
    const matches = path.match(/^\/details\/([^\/]+)/);
    return matches ? matches[1] : null;
  }

  function buildManifestUrl(identifier) {
    return `https://iiif.archive.org/iiif/3/${identifier}/manifest.json`;
  }

  function createMiradorIframe(manifestUrl) {
    const iframe = document.createElement("iframe");
    iframe.src = `https://atomotic.github.io/mymirador/?iiif-content=${encodeURIComponent(manifestUrl)}`;
    iframe.style.width = "100%";
    iframe.style.height = "900px";
    iframe.style.border = "none";
    return iframe;
  }

  function toggleIIIFViewer() {
    const identifier = getIdentifier();
    if (!identifier) return;

    const bookReader = document.getElementById("BookReader");
    if (!bookReader) return;

    if (!isIIIFActive) {
      const manifestUrl = buildManifestUrl(identifier);
      miradorIframe = createMiradorIframe(manifestUrl);
      bookReader.style.display = "none";
      bookReader.parentNode.insertBefore(miradorIframe, bookReader);
      isIIIFActive = true;
    } else {
      if (miradorIframe) {
        miradorIframe.remove();
        miradorIframe = null;
      }
      bookReader.style.display = "";
      isIIIFActive = false;
    }
  }

  function createIIIFButton() {
    const container = document.createElement("div");
    Object.assign(container.style, {
      position: "fixed",
      bottom: "20px",
      right: "20px",
      width: "300px",
      backgroundColor: "#e01b3c",
      padding: "15px",
      zIndex: "9999",
      textAlign: "center",
      borderRadius: "8px",
      boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)",
      transition: "transform 0.2s ease-in-out",
    });

    const button = document.createElement("button");
    button.textContent = "View with IIIF";
    Object.assign(button.style, {
      padding: "12px 24px",
      fontSize: "16px",
      fontWeight: "600",
      cursor: "pointer",
      backgroundColor: "#2873ab",
      color: "#ffffff",
      border: "none",
      borderRadius: "6px",
      width: "100%",
      transition: "all 0.2s ease-in-out",
      textTransform: "uppercase",
      letterSpacing: "1px",
    });

    button.addEventListener("mouseenter", () => {
      button.style.backgroundColor = "#1c5c8a";
      button.style.transform = "translateY(-2px)";
    });

    button.addEventListener("mouseleave", () => {
      button.style.backgroundColor = "#2873ab";
      button.style.transform = "translateY(0)";
    });

    button.addEventListener("mousedown", () => {
      button.style.transform = "translateY(1px)";
    });

    button.addEventListener("mouseup", () => {
      button.style.transform = "translateY(-2px)";
    });

    button.addEventListener("click", toggleIIIFViewer);

    container.appendChild(button);
    document.body.appendChild(container);

    container.addEventListener("mouseenter", () => {
      container.style.transform = "scale(1.02)";
    });

    container.addEventListener("mouseleave", () => {
      container.style.transform = "scale(1)";
    });
  }

  function init() {
    createIIIFButton();
  }

  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", init);
  } else {
    init();
  }

  window.addEventListener("load", init);
})();

iaviewer.mp4