A Userscript to add "Scroll To Latest Assignment" to Cengage

cengage_scroll.user.js

// ==UserScript==
// @name         Cengage Scroll
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Adds a button to cengage to scroll to the first assignment that's not completed already.
// @author       You
// @match        https://ng.cengage.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=ng.cengage.com
// @grant        none
// ==/UserScript==

(function() {
  'use strict';

  function waitForElm(selector) {
    return new Promise(resolve => {
      if (document.querySelectorAll(selector).length > 0) {
        return resolve(document.querySelectorAll(selector));
      }

      const observer = new MutationObserver(mutations => {
        if (document.querySelectorAll(selector).length > 0) {
          resolve(document.querySelectorAll(selector));
          observer.disconnect();
        }
      });

      observer.observe(document.body, {
        childList: true,
        subtree: true
      });
    });
  }

  // wait for the .ViewButtons to load

  waitForElm(".ViewButtons").then(() => {
    // add a button with a v that scrolls to the first incomplete assignment
    //
    // example html
    // <span class="ViewButtons__wrapper"><button aria-label="Outline View" role="tab" aria-selected="false" aria-controls="outlineViewTab" class="ViewButtons__button ViewButtons__button--outline" id="outlineViewPane" tabindex="0" title="Outline View"><span class="icon icon-list3"></span></button></span>

    const span = document.createElement("span");
    span.classList.add("ViewButtons__wrapper");

    const button = document.createElement("button");
    button.setAttribute("aria-label", "Scroll to first incomplete assignment");
    button.setAttribute("role", "tab");
    button.setAttribute("aria-selected", "false");
    button.setAttribute("aria-controls", "scrollToFirstIncompleteAssignment");
    button.classList.add("ViewButtons__button");
    button.classList.add("ViewButtons__button--outline");
    button.setAttribute("id", "scrollToFirstIncompleteAssignment");
    button.setAttribute("tabindex", "0");
    button.setAttribute("title", "Scroll to first incomplete assignment");

    const span2 = document.createElement("span");
    span2.classList.add("icon");
    span2.classList.add("icon-arrow-down2");

    button.appendChild(span2);
    span.appendChild(button);

    document.querySelector(".ViewButtons").appendChild(span);

    // add a click handler to the button

    document.querySelector("#scrollToFirstIncompleteAssignment").addEventListener("click", function() {
      document.querySelector(".activity:not(.done):not(.activity--non-scorable)").scrollIntoView();
    });
  });
})();