for #5: define styles in popup for containers

webextension/js/popup.js

@@ -1,15 +1,33 @@
 browser.contextualIdentities.query({}).then(identites=> {
+  let customContainerStyles = '';
+  const identitiesListElement = document.querySelector('.identities-list');
+
   identites.forEach(identity=> {
-    console.log('identity: ', identity);
     const identityRow = `
     <tr>
-      <td><div class="userContext-icon" data-identity-icon="${identity.icon}" data-identity-icon-color="${identity.color}"></div></td>
+      <td><div class="userContext-icon" data-identity-name="${identity.name}"></div></td>
       <td>${identity.name}</td>
       <td>&gt;</td>
     </tr>`;
 
-    document.querySelector('.identities-list').innerHTML += identityRow;
+    const customContainerStyle = `
+    [data-identity-name="${identity.name}"] {
+      --identity-icon: url('/img/usercontext.svg#${identity.icon}');
+      --identity-icon-color: ${identity.color};
+    }`;
+
+    customContainerStyles += customContainerStyle;
+    identitiesListElement.innerHTML += identityRow;
   });
+
+  const customContainerStyleElement = document.createElement('style');
+
+  customContainerStyleElement.type = 'text/css';
+  customContainerStyleElement.appendChild(document.createTextNode(customContainerStyles));
+
+  const head = document.head;
+
+  head.appendChild(customContainerStyleElement);
 });
 
 document.querySelector('#edit-containers-link').addEventListener('click', ()=> {