Adding in content notification to look more browser like.

webextension/js/content-script.js

@@ -0,0 +1,53 @@
+async function delayAnimation(delay = 350) {
+  return new Promise((resolve) => {
+    setTimeout(resolve, delay);
+  });
+}
+
+async function doAnimation(element, property, value) {
+  return new Promise((resolve) => {
+    const handler = () => {
+      resolve();
+      element.removeEventListener("transitionend", handler);
+    };
+    element.addEventListener("transitionend", handler);
+    window.requestAnimationFrame(() => {
+      element.style[property] = value;
+    });
+  });
+}
+/*
+async function awaitEvent(eventName) {
+  return new Promise((resolve) => {
+    const handler = () => {
+      resolve();
+      divElement.removeEventListener(eventName, handler);
+    };
+    divElement.addEventListener(eventName, handler);
+  });
+}
+*/
+
+async function addMessage(message) {
+  const divElement = document.createElement("div");
+  divElement.classList.add("container-notification");
+  // For the eager eyed, this is an experiment. It is however likely that a website will know it is "contained" anyway
+  divElement.innerText = message.text;
+
+  const imageElement = document.createElement("img");
+  imageElement.src = browser.extension.getURL("/img/container-site-d-24.png");
+  divElement.prepend(imageElement);
+
+  document.body.appendChild(divElement);
+
+  await delayAnimation(100);
+  await doAnimation(divElement, "transform", "translateY(0)");
+  await delayAnimation(2000);
+  await doAnimation(divElement, "transform", "translateY(-100%)");
+
+  divElement.remove();
+}
+
+browser.runtime.onMessage.addListener((message) => {
+  addMessage(message);
+});