diff --git a/webextension/css/popup.css b/webextension/css/popup.css index 5430043..e17c620 100644 --- a/webextension/css/popup.css +++ b/webextension/css/popup.css @@ -28,26 +28,6 @@ table.unstriped tbody tr { background-color: #fefefe; } -[data-identity-icon="fingerprint"] { - --identity-icon: url('/img/usercontext.svg#fingerprint'); - --identity-icon-color: #00a7e0; -} - -[data-identity-icon="briefcase"] { - --identity-icon: url('/img/usercontext.svg#briefcase'); - --identity-icon-color: #ff9216; -} - -[data-identity-icon="dollar"] { - --identity-icon: url('/img/usercontext.svg#dollar'); - --identity-icon-color: #7dc14c; -} - -[data-identity-icon="cart"] { - --identity-icon: url('/img/usercontext.svg#cart'); - --identity-icon-color: #ee5195; -} - .userContext-icon { background-image: var(--identity-icon); background-position: center center; diff --git a/webextension/js/popup.js b/webextension/js/popup.js index 4a6128b..0f5e236 100644 --- a/webextension/js/popup.js +++ b/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 = ` -
+
${identity.name} > `; - 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', ()=> {