Skip to content
Snippets Groups Projects
Commit aa6daeb1 authored by Anton Bershanskiy's avatar Anton Bershanskiy
Browse files

Add notification that extension does not work on select pages 

The notification appears when popup is opened on a protected page.
Currently only Firefox protected pages are supported.
parent d5e14513
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
source/common/pages/popup/popup.css
+ 7
− 4
View file @ aa6daeb1
body { body {
height: 600px;
width: 600px;
margin: 0; margin: 0;
padding: 0; padding: 0;
font-family: sans-serif; font-family: sans-serif;
} }
#content {
height: 600px;
width: 600px;
}
#main-menu { #main-menu {
width: 50%; width: 50%;
height: 100%; height: 100%;
...@@ -15,9 +18,9 @@ body { ...@@ -15,9 +18,9 @@ body {
#details { #details {
width: 50%; width: 50%;
height: 100%;
float: right; float: right;
position: relative; position: relative;
height: 100%;
} }
.main-menu-item { .main-menu-item {
...@@ -50,7 +53,7 @@ body { ...@@ -50,7 +53,7 @@ body {
padding-top: 10px; padding-top: 10px;
} }
h2 { h1, h2, h3, p {
margin: 0; margin: 0;
padding: 5px; padding: 5px;
padding-top: 10px; padding-top: 10px;
......
source/common/pages/popup/popup.html
+ 57
− 51
View file @ aa6daeb1
...@@ -7,60 +7,66 @@ ...@@ -7,60 +7,66 @@
<script src="popup.js" defer></script> <script src="popup.js" defer></script>
</head> </head>
<body> <body>
<div id="message">
<div id="main-menu"> <h1>This is a safe page.</h1>
<div id="main-menu-primary" class="main-menu-item main-menu-item-large"> <p>TODO: make pretty</p>
<h2>Primary resources<img alt="?" class="info" src="/includes/fontawesome/info-circle-solid.svg"></h2>
</div>
<div id="main-menu-thirdparty" class="main-menu-item main-menu-item-large">
<h2>Third-party sources<img alt="?" class="info" src="/includes/fontawesome/info-circle-solid.svg"></h2>
</div>
<div id="main-menu-security" class="main-menu-item main-menu-item-large">
<h2>Security<img alt="?" class="info" src="/includes/fontawesome/info-circle-solid.svg"></h2>
</div>
<div id="main-menu-debug" class="main-menu-item main-menu-item-small">
<h2>Something broke?<img alt="?" class="info" src="/includes/fontawesome/info-circle-solid.svg"></h2>
</div>
</div> </div>
<div id="details">
<div id="details-default" class="details-item"> <div id="content">
<h2>You didn't choose anything yet</h2> <div id="main-menu">
</div> <div id="main-menu-primary" class="main-menu-item main-menu-item-large">
<div id="details-primary" class="details-item"> <h2>Primary resources<img alt="?" class="info" src="/includes/fontawesome/info-circle-solid.svg"></h2>
<h2>You chose Primary</h2> </div>
</div> <div id="main-menu-thirdparty" class="main-menu-item main-menu-item-large">
<div id="details-thirdparty" class="details-item"> <h2>Third-party sources<img alt="?" class="info" src="/includes/fontawesome/info-circle-solid.svg"></h2>
<h2>You chose Thirdparty</h2> </div>
</div> <div id="main-menu-security" class="main-menu-item main-menu-item-large">
<div id="details-security" class="details-item"> <h2>Security<img alt="?" class="info" src="/includes/fontawesome/info-circle-solid.svg"></h2>
<h2>You chose Security</h2> </div>
<div> <div id="main-menu-debug" class="main-menu-item main-menu-item-small">
<select name="site"> <h2>Something broke?<img alt="?" class="info" src="/includes/fontawesome/info-circle-solid.svg"></h2>
<option value="" disabled selected hidden>Site</option>
<option value="any">Any</option>
</select>
<select name="security">
<option value="" disabled selected hidden>Security</option>
<option value="any">Any</option>
<option value="safe">Secure by default</option>
<option value="enabled">Under protection</option>
<option value="disabled">Vulnerable</option>
<option value="insecure">Insecure</option>
</select>
<select name="severity">
<option value="" disabled selected hidden>Severity</option>
<option value="any">Any</option>
<option value="">Tempering possible</option>
<option value="volvo">Tempering detected</option>
<option value="confideniality">Snooping possible</option>
<option value="leak">Leak detected</option>
</select>
</div> </div>
<p>Enabling some of these options may break the site functionality. In that case, you might have to revert back.</p>
<ul id="details-security-list"></ul>
</div> </div>
<div id="details-debug" class="details-item"> <div id="details">
<h2>You chose Debugging</h2> <div id="details-default" class="details-item">
<h2>You didn't choose anything yet</h2>
</div>
<div id="details-primary" class="details-item">
<h2>You chose Primary</h2>
</div>
<div id="details-thirdparty" class="details-item">
<h2>You chose Thirdparty</h2>
</div>
<div id="details-security" class="details-item">
<h2>You chose Security</h2>
<div>
<select name="site">
<option value="" disabled selected hidden>Site</option>
<option value="any">Any</option>
</select>
<select name="security">
<option value="" disabled selected hidden>Security</option>
<option value="any">Any</option>
<option value="safe">Secure by default</option>
<option value="enabled">Under protection</option>
<option value="disabled">Vulnerable</option>
<option value="insecure">Insecure</option>
</select>
<select name="severity">
<option value="" disabled selected hidden>Severity</option>
<option value="any">Any</option>
<option value="">Tempering possible</option>
<option value="volvo">Tempering detected</option>
<option value="confideniality">Snooping possible</option>
<option value="leak">Leak detected</option>
</select>
</div>
<p>Enabling some of these options may break the site functionality. In that case, you might have to revert back.</p>
<ul id="details-security-list"></ul>
</div>
<div id="details-debug" class="details-item">
<h2>You chose Debugging</h2>
</div>
</div> </div>
</div> </div>
......
source/common/pages/popup/popup.js
+ 66
− 24
View file @ aa6daeb1
"use strict" "use strict"
// TODO: Move to platform
// List of pages on which extension is forbidden for security considerations.
const restrictedPrefixes = {
"about:": "Firefox internal page.",
"https://addons.mozilla.org/": "Mozilla extension store (AMO) page.",
"https://testpilot.firefox.com/": "Firefox Test Pilot page."
}
const platform = chrome const platform = chrome
// Notify other pages (background) that popup is open var tabId = null
platform.runtime.sendMessage({popupOpen: true, popupSection: "general"})
platform.tabs.query({active: true, currentWindow: true }, function(activeTabs){
tabId = activeTabs[0].id
console.log(activeTabs)
pageNothingToDo(activeTabs)
// Notify other pages (background) that popup is open
platform.runtime.sendMessage({popupOpen: true, popupSection: "general", tabId: tabId})
})
/* Messaging
// Firefox:
// platform.runtime.sendMessage(message).then(handleResponse, handleError)
// Chrome:
// platform.runtime.sendMessage(message, handleResponse)
// Handle message error
function handleError(error) {
console.log("Error:", error)
}
*/
function pageNothingToDo(activeTabs){
// Check the current page against all restricted pages
var url = activeTabs[0].url
for (const prefix in restrictedPrefixes)
// this is equivalent to startsWith()
if (url.substring(0,prefix.length) === prefix){
// Match found, so we remove all regular content and display explanation
const text = "This is a safe " + restrictedPrefixes[prefix] + "\nThe page is: " + url
// Remove all content
document.body.removeChild(document.getElementById("content"))
// Show explanation and message
var message = document.createElement("P")
message.innerText = text
document.body.appendChild(message)
return true
}
// If page does not match any of the restricted page prefixes, remove message
document.body.removeChild(document.getElementById("message"))
return false
}
/* /*
TODO: uncomment and figure out source of warnings TODO: uncomment and figure out source of warnings
...@@ -122,28 +174,18 @@ document.addEventListener("DOMContentLoaded", function() { ...@@ -122,28 +174,18 @@ document.addEventListener("DOMContentLoaded", function() {
// PREPARE THE NEWLY SELECTED SECTION TAB // PREPARE THE NEWLY SELECTED SECTION TAB
// TODO: live update of all information // TODO: live update of all information
platform.tabs.query({active: true, currentWindow: true }, function(activeTabs){ // TODO: take care of data race with tabId
const tabId = activeTabs[0].id const message = {popupOpen: true, popupSection: selectionNew, tabId: tabId}
console.log(activeTabs)
const message = {popupOpen: true, popupSection: selectionNew, tabId: tabId} switch(selectionNew){
case "security":
function handleError(error) { platform.runtime.sendMessage(message, displaySectionSecurity)
console.log("Error:", error) break
} default:
console.log("Error: section handler missing")
// Firefox: }
// platform.runtime.sendMessage(message).then(displayCookies, handleError)
// Chrome:
switch(selectionNew){
case "security":
platform.runtime.sendMessage(message, displaySectionSecurity)
break
default:
console.log("Error")
}
})
// SWITCH TO THE NEWLY SELECTED SECTION TAB // SWITCH TO THE NEWLY SELECTED SECTION TAB
// If some section was previously selected, unselect its button and hide details // If some section was previously selected, unselect its button and hide details
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment