Userscript that adds a search function to Google's periodic table

GooglePeriodicTableSearch.user.js

// ==UserScript==
// @name         Google Periodic Table Search Function
// @version      1.0.0
// @description  Adds a search function to Google's periodic table
// @author       Armster15
// @match        https://www.google.com/search?*
// @match        https://www.google.com/search/?*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=google.com
// @grant        none
// @namespace    https://gist.github.com/Armster15/365487549125f1825c5d5219d8486ace
// @supportURL   https://gist.github.com/Armster15/365487549125f1825c5d5219d8486ace
// ==/UserScript==

(function () {
  "use strict";

  var params = new URLSearchParams(window.location.search);
  var name = params.get("q");
  if (name !== "periodic table") return;

  function contains(selector, text) {
    var elements = document.querySelectorAll(selector);
    return [].filter.call(elements, function (element) {
      return text.toLowerCase() === element.textContent.toLowerCase();
    });
  }

  function findElement(elName, type) {
    // type can either be "name" or "symbol" and must be passed

    var cn;
    if (type === "name") {
      cn = ".QxwhEb";
    } else if (type === "symbol") {
      cn = ".niyLP";
    } else {
      throw new Error(
        "The type parameter in the findElement function must be either 'name' or 'symbol'"
      );
    }

    contains(cn, elName)[0].closest("g-bubble").click();
  }

  var div = document.createElement("div");
  div.innerHTML = `
    <form id="periodic-table-search-form">
      <input name="input" placeholder="Element Name" id="periodic-table-search-input" />
      <button type="submit">Search
      </button>
      <br>
      <label style="font-size: 14px;">
        <input type="radio" name="type" value="name" checked="" data-com.bitwarden.browser.user-edited="yes">
        Name (Hydrogen)
      </label>
      <label style="font-size: 14px;">
        <input type="radio" name="type" value="symbol" data-com.bitwarden.browser.user-edited="yes">
        Symbol (H)
      </label>
    </form>
  `.trim();

  contains(
    `[role="heading"][aria-level="2"]`,
    "Periodic Table"
  )[0].parentElement.appendChild(div);

  document
    .querySelector("#periodic-table-search-form")
    .addEventListener("submit", (e) => {
      e.preventDefault();
      var formData = Object.fromEntries(
        new FormData(document.querySelector("#periodic-table-search-form"))
      ); // { input: "H", type: "symbol" }
      findElement(formData["input"], formData["type"]);
    });
})();