Adding in content notification to look more browser like.

webextension/background.js

@@ -159,7 +159,7 @@ const assignManager = {
         //storageAction = this.storageArea.remove(info.pageUrl);
         remove = true;
       }
-      await this._setOrRemoveAssignment(info.pageUrl, userContextId, remove);
+      await this._setOrRemoveAssignment(tab.id, info.pageUrl, userContextId, remove);
       this.calculateContextMenu(tab);
     }
   },
@@ -192,7 +192,7 @@ const assignManager = {
     return true;
   },
 
-  async _setOrRemoveAssignment(pageUrl, userContextId, remove) {
+  async _setOrRemoveAssignment(tabId, pageUrl, userContextId, remove) {
     let actionName;
     if (!remove) {
       await this.storageArea.set(pageUrl, {
@@ -205,11 +205,8 @@ const assignManager = {
       await this.storageArea.remove(pageUrl);
       actionName = "removed";
     }
-    browser.notifications.create({
-      type: "basic",
-      title: "Containers",
-      message: `Successfully ${actionName} site to always open in this container`,
-      iconUrl: browser.extension.getURL("/img/onboarding-1.png")
+    browser.tabs.sendMessage(tabId, {
+      text: `Successfully ${actionName} site to always open in this container`
     });
     backgroundLogic.sendTelemetryPayload({
       event: `${actionName}-container-assignment`,
@@ -432,7 +429,7 @@ const messageHandler = {
       case "setOrRemoveAssignment":
         response = browser.tabs.get(m.tabId).then((tab) => {
           const userContextId = assignManager.getUserContextIdFromCookieStore(tab);
-          return assignManager._setOrRemoveAssignment(tab.url, userContextId, m.value);
+          return assignManager._setOrRemoveAssignment(tab.id, tab.url, userContextId, m.value);
         });
         break;
       case "exemptContainerAssignment":

webextension/css/content.css

@@ -0,0 +1,22 @@
+.container-notification {
+  background: #33f70c;
+  color: #003f07;
+  display: block;
+  inline-size: 100vw;
+  offset-block-start: 0;
+  offset-inline-start: 0;
+  padding-block-end: 8px;
+  padding-block-start: 8px;
+  padding-inline-end: 8px;
+  padding-inline-start: 8px;
+  position: fixed;
+  transform: translateY(-100%);
+  transition: transform 0.3s cubic-bezier(0.07, 0.95, 0, 1) 0.3s;
+  z-index: 999999999999;
+}
+
+.container-notification img {
+  block-size: 16px;
+  inline-size: 16px;
+  margin-inline-end: 3px;
+}

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);
+});

webextension/manifest.json

@@ -26,7 +26,6 @@
     "contextualIdentities",
     "history",
     "idle",
-    "notifications",
     "storage",
     "tabs",
     "webRequestBlocking",
@@ -54,5 +53,17 @@
 
   "background": {
     "scripts": ["background.js"]
-  }
+  },
+
+  "content_scripts": [
+    {
+      "matches": ["<all_urls>"],
+      "js": ["js/content-script.js"],
+      "css": ["css/content.css"]
+    }
+  ],
+
+  "web_accessible_resources": [
+    "/img/container-site-d-24.png"
+  ]
 }