messageBox.js

globalThis.addMessageBox = function () {
  if (document.querySelector(".helper-message-box")) {
    return;
  }
  const messageBox = `
  <section class="helper-extension-persistent helper-message-box block_html block card mb-3" role="complementary" data-block="html" aria-labelledby="instance-330654-header">
    <div class="card-body p-3">
      <h5 class="card-title d-inline">Message from HKU Moodle Helper</h5>
      <div class="card-text content mt-3">
        <div class="no-overflow">
          <p><span style="font-size:11.0pt;font-family:&quot;Calibri&quot;,sans-serif;color:black">
            This is a message generated by the Chrome extension <i>HKU Moodle Helper</i> that you installed.
          </span></p>
          <p><span style="font-size:11.0pt;font-family:&quot;Calibri&quot;,sans-serif;color:black">
            As many of you have noticed, Moodle underwent renovation, and it's unclear just how it would affect the extension yet. 
          </span></p>
          <p><span style="font-size:11.0pt;font-family:&quot;Calibri&quot;,sans-serif;color:black">
            The extension will still be maintained, provided it's still relevant in new semesters to come. 
            In the meantime, please consider becoming a dev in <a href="https://github.com/AENeuro/HKU-Moodle-Helper" target="_blank">HKU Moodle Helper</a>.
            Any PR or suggestions are welcomed, of course.
          </span></p>
        </div>
        <div class="footer"></div>
      </div>
    </div>
  </section>
`;

  const targetElement = document.getElementById("block-region-side-post");
  if (targetElement && targetElement.firstElementChild) {
    targetElement.firstElementChild.insertAdjacentHTML("beforebegin", messageBox);
  } else if (targetElement) {
    targetElement.insertAdjacentHTML("afterbegin", messageBox);
  }
}