From 39cd28eb2b00564ae488f268d8b8e766a852c128 Mon Sep 17 00:00:00 2001 From: Andy McKay Date: Wed, 8 Feb 2017 08:15:40 -0800 Subject: [PATCH] an example using contextualIdentities (#179) --- contextual-identities/README.md | 13 +++++++ contextual-identities/background.js | 0 contextual-identities/context.css | 18 ++++++++++ contextual-identities/context.html | 14 ++++++++ contextual-identities/context.js | 54 +++++++++++++++++++++++++++++ contextual-identities/identity.svg | 1 + contextual-identities/manifest.json | 21 +++++++++++ 7 files changed, 121 insertions(+) create mode 100644 contextual-identities/README.md create mode 100644 contextual-identities/background.js create mode 100644 contextual-identities/context.css create mode 100644 contextual-identities/context.html create mode 100644 contextual-identities/context.js create mode 100644 contextual-identities/identity.svg create mode 100644 contextual-identities/manifest.json diff --git a/contextual-identities/README.md b/contextual-identities/README.md new file mode 100644 index 0000000..76c435a --- /dev/null +++ b/contextual-identities/README.md @@ -0,0 +1,13 @@ +# Contextual Identities + +## What it does + +Lists existing identities, lets you create new tabs with an identity and remove all tabs from an identity. For more information on contextual identities: https://wiki.mozilla.org/Security/Contextual_Identity_Project/Containers + +## What it shows + +How to use the contextualIdentities API. Please note: you must have contextualIdentities enabled. You can do that by going to about:config and setting the `privacy.userContext.enabled` preference to true. If you are using web-ext you can do this by running: + +web-ext run --pref privacy.userContext.enabled=true + +Icon from: https://www.iconfinder.com/icons/290119/card_id_identification_identity_profile_icon#size=128, License: "Free for commercial use". diff --git a/contextual-identities/background.js b/contextual-identities/background.js new file mode 100644 index 0000000..e69de29 diff --git a/contextual-identities/context.css b/contextual-identities/context.css new file mode 100644 index 0000000..91381cc --- /dev/null +++ b/contextual-identities/context.css @@ -0,0 +1,18 @@ +html, body { + width: 350px; +} + +a { + margin: 10px; + display: inline-block; +} + +.panel { + margin: 5px; +} + +span.identity { + width: 100px; + display: inline-block; + margin-left: 1em; +} diff --git a/contextual-identities/context.html b/contextual-identities/context.html new file mode 100644 index 0000000..72a823c --- /dev/null +++ b/contextual-identities/context.html @@ -0,0 +1,14 @@ + + + + + + + + +
+
+
+ + + diff --git a/contextual-identities/context.js b/contextual-identities/context.js new file mode 100644 index 0000000..8732f6e --- /dev/null +++ b/contextual-identities/context.js @@ -0,0 +1,54 @@ +function eventHandler(event) { + if (event.target.dataset.action == 'create') { + browser.tabs.create({ + url: 'about:blank', + cookieStoreId: event.target.dataset.identity + }); + } + if (event.target.dataset.action == 'close-all') { + browser.tabs.query({ + cookieStoreId: event.target.dataset.identity + }).then((tabs) => { + browser.tabs.remove(tabs.map((i) => i.id)); + }); + } + event.preventDefault(); +} + +function createOptions(node, identity) { + for (let option of ['Create', 'Close All']) { + let a = document.createElement('a'); + a.href = '#'; + a.innerText = option; + a.dataset.action = option.toLowerCase().replace(' ', '-'); + a.dataset.identity = identity.cookieStoreId; + a.addEventListener('click', eventHandler); + node.appendChild(a); + } +} + +var div = document.getElementById('identity-list'); + +if (browser.contextualIdentities === undefined) { + div.innerText = 'browser.contextualIdentities not available. Check that the privacy.userContext.enabled pref is set to true, and reload the add-on.'; +} else { + browser.contextualIdentities.query({}) + .then((identities) => { + if (!identities.length) { + div.innerText = 'No identities returned from the API.'; + return; + } + + for (let identity of identities) { + let row = document.createElement('div'); + let span = document.createElement('span'); + span.className = 'identity'; + span.innerText = identity.name; + span.style = `color: ${identity.color}`; + console.log(identity); + row.appendChild(span); + createOptions(row, identity); + div.appendChild(row); + } + }); +} diff --git a/contextual-identities/identity.svg b/contextual-identities/identity.svg new file mode 100644 index 0000000..90bf628 --- /dev/null +++ b/contextual-identities/identity.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/contextual-identities/manifest.json b/contextual-identities/manifest.json new file mode 100644 index 0000000..cbf2ef5 --- /dev/null +++ b/contextual-identities/manifest.json @@ -0,0 +1,21 @@ +{ + "browser_action": { + "browser_style": true, + "default_title": "Contextual Identities", + "default_popup": "context.html", + "default_icon": { + "128": "identity.svg" + } + }, + "homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/contextual-identities", + "manifest_version": 2, + "name": "Contextual Identities", + "version": "1.0", + "permissions": [ + "contextualIdentities", + "cookies" + ], + "icons": { + "128": "identity.svg" + } +}