diff --git a/source/common/pages/popup/monitoring/monitoring.js b/source/common/pages/popup/monitoring/monitoring.js
index dffd98866201e7f6c51505a7b59396454821ab1a..1b874e1dc7b76c4336c1b2f54fa59988dc6a016d 100644
--- a/source/common/pages/popup/monitoring/monitoring.js
+++ b/source/common/pages/popup/monitoring/monitoring.js
@@ -10,6 +10,14 @@ $(".ui.dropdown").dropdown()
function initializeEye(){
$(".eye").click(function() {
+ var message = {recipient: "popup.js", type : "monInc"}
+ if($(this).hasClass("slash")){
+ platform.runtime.sendMessage(message)
+ }else{
+ message.type = "monDec"
+ platform.runtime.sendMessage(message)
+ }
+
$(this).toggleClass("eye icon eye slash icon");
});
}
@@ -39,8 +47,7 @@ document.addEventListener("DOMContentLoaded", function() {
platform.tabs.getSelected(null, function(tab){
var url = new URL(tab.url)
- var domain = url.hostname
- platform.cookies.getAll({domain:domain},displayInformation)
+ platform.cookies.getAll({url:url.origin},displayInformation)
});
})
@@ -71,4 +78,4 @@ function createListElement(referenceListItem, cookie){
const referenceContentNode = node.querySelector(".content")
referenceContentNode.innerText = cookie.value
return node
-}
+}
\ No newline at end of file
diff --git a/source/common/pages/popup/popup.html b/source/common/pages/popup/popup.html
index 33f820effd7a9dd7de136c8d6dd29c6d637b43fc..777a3c761207872f3fcb8568883d6e169d94360f 100644
--- a/source/common/pages/popup/popup.html
+++ b/source/common/pages/popup/popup.html
@@ -34,7 +34,7 @@
<span>
Site is collecting
<h1 id="MonitoringText">
- 20
+ 0
</h1>
pieces of information.
</span>
diff --git a/source/common/pages/popup/popup.js b/source/common/pages/popup/popup.js
index 3c6abdadf46ef923c1af2463456bf92391d7f223..560493a8aa42c9a9eeb716cd99a61a21ea197c90 100644
--- a/source/common/pages/popup/popup.js
+++ b/source/common/pages/popup/popup.js
@@ -1,6 +1,11 @@
"use strict"
const platform = chrome
+var monCount = null
+var sharCount = null
+var totalSecCount = null
+var secCount = 0
+
// TODO: Move to platform
// List of pages on which extension is forbidden for security considerations.
@@ -91,19 +96,21 @@ document.addEventListener("DOMContentLoaded", function() {
platform.tabs.getSelected(null, function(tab){
var url = new URL(tab.url)
- var domain = url.hostname
- console.log("Main domain:"+domain)
- platform.cookies.getAll({domain:domain},initMonitoring)
+ console.log("Main url:"+url.origin)
+ platform.cookies.getAll({url:url.origin},initMonitoring)
});
var sharingCount = 0
for (var domain in data.domains){
+ totalSecCount++
if (data.domains[domain].thirdparty === true){
sharingCount++
}
}
+ sharCount = sharingCount
+ setSharing(sharCount)
+ setSecurity(secCount)
- initSharing(sharingCount)
}
const message = {recepient: "cookiestore.js", request: {reason: "data", section: "own"}, tabId: tabId}
@@ -153,6 +160,24 @@ document.addEventListener("DOMContentLoaded", function() {
})
})
+platform.runtime.onMessage.addListener(function(message, sender, sendResponse){
+ if (platform.runtime.id !== sender.id){
+ console.warn("Some other extension sent a messsage. We ignored it.", message, sender)
+ return
+ }
+
+ if (message.recipient !== "popup.js") return
+ console.log("Message received inside popup.js with type: " + message.type)
+
+ if(message.type == "monInc") setMonitoring(++monCount)
+ else if(message.type == "monDec") setMonitoring(--monCount)
+ else if(message.type == "sharInc") setSharing(++sharCount)
+ else if(message.type == "sharDec") setSharing(--sharCount)
+ else if(message.type == "sharReset") {sharCount = 0; setSharing(sharCount)}
+ else if(message.type == "secInc") setSecurity(++secCount)
+ else if(message.type == "secDec") setSecurity(--secCount)
+})
+
/* dynamically sharinglvl is changed, function is called */
/* class to store the lvl */
/*
@@ -179,22 +204,37 @@ var SecurityText = document.getElementById("SecurityText");
var SharingText = document.getElementById("SharingText");
var MonitoringText = document.getElementById("MonitoringText");
-
function initMonitoring(mainCookies){
console.log("Retrieved cookies for main domain and trying to set monitoring")
- var count = mainCookies.length
- MonitoringTextChange(mainCookies.length)
- if(count > 40) count = 40
- var range = (count / 40) * 100
+ console.log("Monitoring cookies count: " + mainCookies.length)
+ var count = mainCookies.length
+ if(count > 40) count = 40
+ monCount = count
+ setMonitoring(monCount)
+}
- rangeChange(range)
+function setMonitoring(count){
+ MonitoringTextChange(count)
+ var range = (count / 40) * 100
+ rangeChange(range)
}
-function initSharing(sharingCount){
+function setSharing(sharingCount){
sharingTextChange(sharingCount)
sharingchange(sharingCount)
}
+function setSecurity(secCount){
+ var percentage = Math.round((secCount / totalSecCount) * 100)
+ SecurityTextChange(percentage + "%")
+ if(percentage == 100){
+ securitychange(2)
+ }
+ else{
+ securitychange(4)
+ }
+}
+
/*Function that dynamically change the logo of sharing*/
function sharingchange(lvl){
var image= document.getElementById('sharingimage');
diff --git a/source/common/pages/popup/security/security.css b/source/common/pages/popup/security/security.css
index 26dcff25292af3209ae5bf7a82a8fd4bcf71bff7..2375a9585e96f667cef9dce59d39a5c5f87505ed 100644
--- a/source/common/pages/popup/security/security.css
+++ b/source/common/pages/popup/security/security.css
@@ -4,5 +4,17 @@
}
#securityimage{
- float: left;
+ float: left;
+}
+
+#listspace {
+ height: 365px;
+}
+
+#securityimage{
+ float: left;
+}
+
+.filter-title{
+ margin-bottom: 5px;
}
diff --git a/source/common/pages/popup/security/security.html b/source/common/pages/popup/security/security.html
index 8e85299829ee89e501c50f6f2c6057b3d2a0d6ca..dcdf6c38f183506dc0fa69088a2e43480ced48c5 100644
--- a/source/common/pages/popup/security/security.html
+++ b/source/common/pages/popup/security/security.html
@@ -13,221 +13,75 @@
</head>
<body>
- <!-- the first row -->
- <div id="allContent">
-
- <div class="ui container main-content">
- <div class="row">
- <div class="ui grid">
- <!-- first filter -->
- <div class="left aligned eight wide fluid column">
- <h4 class="filter-title">Website Security</h4>
- <!-- filter dropdowns -->
- <div class="ui fluid selection dropdown">
- <i class="dropdown icon"></i>
- <span class="default text">Select Filter</span>
- <div class="menu">
- <div class="item">
- Any
- </div>
- <div class="item">
- <div class="ui grid">
- <div class="twelve wide column">
- <text>
- Secure by default
- </text>
- </div>
- <div class="four wide column">
- <div id="securityimage">
- <img src="/img-t/security1.png" alt="placeholder for image" width="28" width="28">
- </div>
- </div>
- </div>
- </div>
- <div class="item">
- <div class="ui grid">
- <div class="twelve wide column">
- <text>
- Under Protection
- </text>
- </div>
- <div class="four wide column">
- <div id="securityimage">
- <img src="/img-t/security2.png" alt="placeholder for image" width="28" width="28">
- </div>
- </div>
- </div>
- </div>
- <div class="item">
- <div class="ui grid">
- <div class="twelve wide column">
- <text>
- Vulnerable
- </text>
- </div>
- <div class="four wide column">
- <div id="securityimage">
- <img src="/img-t/security3.png" alt="placeholder for image" width="28" width="28">
- </div>
- </div>
- </div>
- </div>
- <div class="item">
- <div class="ui grid">
- <div class="twelve wide column">
- <text>
- Insecure
- </text>
- </div>
- <div class="left aligned four wide column">
- <div id="securityimage">
- <img src="/img-t/security4.png" alt="placeholder for image" width="28" width="28">
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
-
- <!-- second filter -->
- <div class="left aligned eight wide fluid column">
- <h4 class="filter-title">Threat Level</h4>
- <div class="ui fluid selection dropdown">
- <i class="dropdown icon"></i>
- <span class="default text">Select Filter</span>
- <div class="menu">
- <div class="item">
- Any
- </div>
- <div class="item">
- <i class="cog right floated icon"></i> Tampering possible
- </div>
- <div class="item">
- <i class="bug right floated icon"></i> Tampering detected
- </div>
- <div class="item">
- <i class="user secret right floated icon"></i> Snooping
- </div>
- <div class="item">
- <i class="tint right floated icon"></i> Leaked
- </div>
- </div>
- </div>
- </div>
- </div>
+<!-- the first row -->
+<div class="ui container main-content">
+ <div class="row">
+ <div class="ui grid">
+ <!-- first filter -->
+ <div class="left aligned eight wide fluid column">
+ <h4 class="filter-title">Website Security</h4>
+ <!-- filter dropdowns -->
+ <select id="select-security" class="ui fluid dropdown">
+ <option>Any</option>
+ <option>Secure</option>
+ <option>Insecure</option>
+ </select>
</div>
- <br>
+ <!-- second filter -->
+ <div class = "left aligned eight wide fluid column">
+ <!-- filter names -->
+ <h4 class="filter-title">Threat level</h4>
+ <!-- filter dropdowns -->
+ <select id="select-threat" class="ui fluid dropdown">
+ <option>Any</option>
+ <option>Tampering possible</option>
+ <option>Tampering detected</option>
+ <option>Snooping</option>
+ <option>Leaked</option>
+ </select>
+ </div>
- <div id="list-segment">
- <!-- the websites list -->
- <div class="ui styled accordion">
- <div class="title">
- <div class="acc-title">
- <i class="dropdown icon"></i>
- Amazon.com
- <i class="unlock icon"></i>
- </div>
+ </div>
+ </div>
- </div>
- <div class="content">
- <div class="ui bulleted list">
- <div class="item">Account login information
- <i class="lock icon right floated"></i>
- </div>
- <div class="item">Shipping default address<i class="unlock icon right floated"></i> <i class="cog icon"></i>
- </div>
- <div class="item">Credit card information <i class="lock icon right floated"></i>
- </div>
- </div>
- </div>
+ <div id="safe" class="hide">
+ <div class="ui icon message olive">
+ <i class="smile icon"></i>
+ <div class="content">
+ <p>None of your information is shared with any other website</p>
+ </div>
+ </div>
+ </div>
- <div class="title">
- <div class="acc-title">
- <i class="dropdown icon"></i>
- Facebook.com
- <i class="info icon"></i>
- </div>
- </div>
- <div class="content">
- <div class="ui bulleted list">
- <div class="item">Personal information <i class="lock icon right floated"></i>
- </div>
- <div class="item">Browser information <i class="unlock icon right floated"></i> <i class="tint icon"></i>
- </div>
- </div>
- </div>
+ <br><!-- TODO: refactor by adding proper section sizes and remove this <br> -->
- <div class="title">
- <div class="acc-title">
- <i class="dropdown icon"></i>
- Wechat.com
- <i class="lock icon"></i>
- </div>
- </div>
- <div class="content">
- <div class="ui bulleted list">
- <div class="item">Personal information <i class="lock icon right floated"></i>
- </div>
- <div class="item">Browser information <i class="lock icon right floated"></i>
- </div>
- </div>
- </div>
- <div class="title">
- <div class="acc-title">
- <i class="dropdown icon"></i>
- Paypal.com
- <i class="check icon"></i>
- </div>
- </div>
- <div class="content">
- <div class="ui bulleted list">
- <div class="item">Personal information <i class="lock icon right floated"></i>
- </div>
- <div class="item">Credit card information <i class="lock icon right floated"></i>
- </div>
- </div>
- </div>
+ <div id="listspace">
+ <div id="list" class="ui styled accordion"></div>
+ </div>
+</div>
- <div class="title">
- <div class="acc-title">
- <i class="dropdown icon"></i>
- Tumblr.com
- <i class="info icon"></i>
- </div>
+<!-- This is a reference list item which will be copied and inserted into the list -->
+<div id="reference-list-item" class="acc-list-item">
+ <div class="title">
+ <div class="acc-title">
+ <i class="dropdown icon"></i>
+ <div class="domain-title">Title</div>
+ </div>
- </div>
- <div class="content">
- <div class="ui bulleted list">
- <div class="item">Personal information <i class="unlock icon right floated"></i><i class="bug icon"></i>
- </div>
- <div class="item">Non-public user information <i class="unlock icon right floated"></i><i class="tint icon"></i>
- </div>
- </div>
- </div>
+ <div class="acc-toggle">
+ <i class="unlock icon securitylvl"></i>
+ </div>
- <div class="title">
- <div class="acc-title">
- <i class="dropdown icon"></i>
- Giphy.com
- <i class="unlock icon"></i>
- </div>
- </div>
- <div class="content">
- <div class="ui bulleted list">
- <div class="item">Download history <i class="lock icon right floated"></i>
- </div>
- <div class="item">Search history <i class="unlock icon right floated"></i><i class="bug icon"></i>
- </div>
- </div>
- </div>
- </div>
- </div>
- <br>
+ </div>
+ <div class="content">
+ <div class="ui bulleted list">
+ <div class="reference-list-item-content item" class="">Some content here</div>
</div>
</div>
- <ul id="details-security-list" class="list-collapsible"></ul>
+</div>
+
+
</body>
diff --git a/source/common/pages/popup/security/security.js b/source/common/pages/popup/security/security.js
index bb4224b673aea2570ada959421525f84b23e788c..f636e7b7a69db01b1323560d697f9aedb5a634bd 100644
--- a/source/common/pages/popup/security/security.js
+++ b/source/common/pages/popup/security/security.js
@@ -1,17 +1,151 @@
-function initSecurity(){
- console.log("Came inside security")
+const platform = chrome
+var domains = null
+var selectedSecurity = "Any"
+var selectedthreat = "Any"
+
+
+$(".ui.accordion").accordion({
+ selector: {
+ trigger: ".acc-title"
+ }
+})
+
+$("#select-security").dropdown({
+ onChange: function(value, text, selectedItem) {
+ console.log("Category dropdown changed and value is: " + value)
+ selectedSecurity = value
+ filterList()
+ }
+})
+
+$("#select-threat").dropdown({
+ onChange: function(value, text, selectedItem) {
+ console.log("Category dropdown changed and value is: " + value)
+ selectedthreat = value
+ filterList()
+ }
+})
+
+function filterList(type, value){
+ $(".acc-list-item").each(function(){
+ const domain = this.getAttribute("domain")
+ const info = information.domains[domain]
+ var currStateSecurity = selectedSecurity
+ var currStateThreat = selectedthreat
+ var security
+
+ if(info.isSecure == false)
+ security = "Insecure"
+ else {
+ security = "Secure"
+ }
+
+ if(currStateSecurity == "Any") currStateSecurity = security
+ if(currStateThreat == "Any") currStateThreat = info.threat
+
+
+ if(currStateSecurity == security && currStateThreat == info.threat)
+ $(this).removeClass("hide")
+ else {
+ $(this).addClass("hide")
+ }
+
+ })
}
-initSecurity()
+function initializeLock(node){
+ var unlock = node.querySelector(".securitylvl")
+
+ unlock.addEventListener("click", function() {
+ var message = {recipient: "popup.js", type:"secInc"}
+ var domain = this.parentNode.parentNode.parentNode.getAttribute("domain")
+
+ if($(this).hasClass("lock")){
+ message.type = "secDec"
+ platform.runtime.sendMessage(message)
+ information.domains[domain].isSecure = false;
+ }else{
+ platform.runtime.sendMessage(message)
+ information.domains[domain].isSecure = true;
+ }
+
+ $(this).toggleClass("unlock icon lock icon");
+
+
+ });
+}
-$('.ui.accordion').accordion({
- selector: {
- trigger: '.acc-title'
- }
-});
-$('.ui.dropdown').dropdown();
-$('.button').popup({
- on:'click',
- // position:'bottom left'
-});
+document.addEventListener("DOMContentLoaded", function() {
+ const search = document.location.search
+ const tabId = parseInt(search.substring("?tabId=".length))
+
+ // Remember reference list item
+ const referenceListItem = document.getElementById("reference-list-item")
+ referenceListItem.parentNode.removeChild(referenceListItem)
+
+ // Remember reference to the list
+ const listNode = document.getElementById("list")
+
+ const message = {recepient: "cookiestore.js", request: {reason: "data", section: "security"}, tabId: tabId}
+
+
+ function displayInformation(details){
+ console.log("Retrieved domain information", details)
+ information = details
+
+ displayList(referenceListItem, listNode)
+ }
+
+ platform.runtime.sendMessage(message, displayInformation)
+})
+
+function displayList(referenceListItem, listNode){
+ var count = 0
+ for (domain in information.domains){
+ information.domains[domain].isSecure = false;
+ retrieveCookies(domain, information.domains[domain], referenceListItem, listNode)
+ count++
+ }
+ if(count == 0){
+ $(".row").addClass("hide")
+ $("#safe").removeClass("hide");
+ }
+}
+
+function retrieveCookies(domain, details, referenceListItem, listNode){
+ platform.cookies.getAll({domain:domain},function(cookies){
+ console.log("Retrieved cookies for domain:"+domain+". Count:"+cookies.length)
+ const itemNode = createListElement(referenceListItem, domain, details, cookies)
+ listNode.appendChild(itemNode)
+ initializeLock(itemNode)
+ })
+}
+
+function createListElement(referenceListItem, domain, details, contents){
+ var node = referenceListItem.cloneNode(true)
+ // Delete duplicate id
+ node.removeAttribute("id")
+ node.setAttribute("domain", domain)
+
+// Display content
+ node.querySelector(".domain-title").innerText = domain
+ /*if(domain.isShared && !domain.isShared){
+ node.querySelector("acc-toggle").classList.remove("checked")
+ }*/
+
+ const referenceContentNode = node.querySelector(".reference-list-item-content")
+ const contentParent = referenceContentNode.parentNode
+ referenceContentNode.parentNode.removeChild(referenceContentNode)
+ if (contents.length === 0){
+ var contentNode = referenceContentNode.cloneNode(true)
+ contentNode.innerText = "No information is saved right now, however some information might be collected and shared in the future."
+ contentParent.appendChild(contentNode)
+ }
+ for (content of contents){
+ var contentNode = referenceContentNode.cloneNode(true)
+ contentNode.innerText = "Name: " + content.name + "\nValue: " + content.value
+ contentParent.appendChild(contentNode)
+ }
+ return node
+}
diff --git a/source/common/pages/popup/sharing/sharing.js b/source/common/pages/popup/sharing/sharing.js
index 2168bd4a3f0b3519876af914d0e552f9c5814277..cef7652a1f3b30532cb5c5a9b494fbcc12ed7877 100644
--- a/source/common/pages/popup/sharing/sharing.js
+++ b/source/common/pages/popup/sharing/sharing.js
@@ -30,11 +30,24 @@ $("#select-state").dropdown({
})
function initializeCheckbox(){
- $(".ui.checkbox").checkbox() //Initialize after dynamic DOM addition
+ $(".ui.checkbox").checkbox({
+ onChecked: function () {
+ platform.runtime.sendMessage({recipient: "popup.js", type: "sharInc"})
+ var domain = this.parentNode.parentNode.parentNode.getAttribute("domain")
+ information.domains[domain].isShared = true
+ },
+ onUnchecked: function () {
+ platform.runtime.sendMessage({recipient: "popup.js", type: "sharDec"})
+ var domain = this.parentNode.parentNode.parentNode.getAttribute("domain")
+ information.domains[domain].isShared = false
+ }
+ }) //Initialize after dynamic DOM addition
}
+
$("#disableAll").click(function(){
$('.ui.checkbox').checkbox('uncheck');
+ platform.runtime.sendMessage({recipient: "popup.js", type: "sharReset"})
})
//$('.ui.checkbox').checkbox('attach events', '#disableAll', 'check');
@@ -69,7 +82,7 @@ function displayList(referenceListItem, listNode){
var count = 0
for (domain in information.domains){
if (information.domains[domain].thirdparty === true){
-
+ information.domains[domain].isShared = true
retrieveCookies(domain, information.domains[domain], referenceListItem, listNode)
count++
}
@@ -135,7 +148,7 @@ function filterList(type, value){
const info = information.domains[domain]
const sameCategory = selectedCategory === "All" || info.category === undefined || (info.category && selectedCategory === info.category.category)
- const realState = information.sharingToggle[domain] ? information.sharingToggle[domain] : information.sharingToggleDefault
+ const realState = info.isShared
const sameState = selectedState === "All" || realState === selectedState
if(sameCategory && sameState)
this.classList.remove("hide")