Example of adding Open Library borrow buttons to mostrecommendedbooks.com

mostrecommendedbooks.js

function getBooks(container) {
  const reISBN = /((978)?[0-9][0-9]{10}[0-9xX])|((978)?[0-9]{9}[0-9Xx])/;
  const elements = document.getElementsByClassName(container);
  let isbnElementMap = {};
  for (let i=0; i<elements.length; i++) {
    let e = elements.item(i);
    let match = e.innerHTML.match(reISBN);
    if (match) {
      isbnElementMap[match[0]] = e;
    }
  }
  return isbnElementMap;
}

async function addLibraryButton(container, btn) {
  const apiurl = "https://archive.org/services/availability"
  isbnElementMap = getBooks(container);
  let isbns = Object.keys(isbnElementMap);
  let url = apiurl + "?isbn=" + isbns.join(",");
  const response = await fetch(url);
  const data = await response.json();
  return {
    "container": container,
    "btn": btn,
    "isbnElementMap": isbnElementMap,
    "results": data.responses
  }
}

addLibraryButton("book-top-books-container", "book-top-books-button").then(data => {
  let results = data.results;
  for (let isbn in data.isbnElementMap) {
    let availability = results[isbn];
    if (availability && availability.status !== "error") {
      let e = data.isbnElementMap[isbn];
      let btns = e.getElementsByClassName(data.btn)[0];
      let style="background: #2f8cd3; border-radius: 10px; padding: 5px 10px; color: #fff; font-size: .7em;";
      btns.innerHTML = `${btns.innerHTML}<div><a style="${style}" href="https://openlibrary.org/borrow/ia/${availability.identifier}?ref=">Open Library</a></div>`;
    }
  }
});