data visualization
This commit is contained in:
parent
e6443a6b49
commit
698afe3d52
4 changed files with 115 additions and 18 deletions
|
@ -6,5 +6,51 @@
|
|||
"popup_text": {
|
||||
"message": "This page uses Piwik",
|
||||
"description": "text shown in popup when clicked on button in navigation bar"
|
||||
},
|
||||
"piwikUsesHTTPS_true": {
|
||||
"message": "Is HTTPS",
|
||||
"description": ""
|
||||
},
|
||||
"piwikUsesHTTPS_false": {
|
||||
"message": "Is not HTTPS",
|
||||
"description": ""
|
||||
},
|
||||
"isPageUTF8_true": {
|
||||
"message": "UTF-8 as recommended",
|
||||
"description": ""
|
||||
},
|
||||
"isPageUTF8_false": {
|
||||
"message": "Using UTF-8 encoding can avoid errors (You are using \"$encoding$\")",
|
||||
"description": "",
|
||||
"placeholders": {
|
||||
"encoding": {
|
||||
"content": "$1",
|
||||
"example": "Encoding of page"
|
||||
}
|
||||
}
|
||||
},
|
||||
"noMixedContent_true": {
|
||||
"message": "ok",
|
||||
"description": ""
|
||||
},
|
||||
"noMixedContent_false": {
|
||||
"message": "Mixed Content Warning!",
|
||||
"description": ""
|
||||
},
|
||||
"noProtocolRelativeURL_true": {
|
||||
"message": "ok",
|
||||
"description": ""
|
||||
},
|
||||
"noProtocolRelativeURL_false": {
|
||||
"message": "Consider using https in the tracking code",
|
||||
"description": ""
|
||||
},
|
||||
"isScriptAsync_true": {
|
||||
"message": "ok",
|
||||
"description": ""
|
||||
},
|
||||
"isScriptAsync_false": {
|
||||
"message": "consider loading the tracing code asynchronously to speed up page load",
|
||||
"description": ""
|
||||
}
|
||||
}
|
30
js/inject.js
30
js/inject.js
|
@ -37,21 +37,32 @@ tests = {
|
|||
return this.scriptObject.getAttribute("src");
|
||||
},
|
||||
piwikUsesHTTPS: function() {
|
||||
return this.parseURL(this.URLtoPiwikJS()).protocol === "https:"
|
||||
return {
|
||||
success: this.parseURL(this.URLtoPiwikJS()).protocol === "https:"
|
||||
}
|
||||
},
|
||||
isURLprotocolRelative: function() {
|
||||
return this.URLtoPiwikJS().startsWith("//");
|
||||
noProtocolRelativeURL: function() {
|
||||
return {
|
||||
success: !this.URLtoPiwikJS().startsWith("//")
|
||||
};
|
||||
},
|
||||
isMixedContent: function() {
|
||||
return this.isPageHTTPS() && !this.piwikUsesHTTPS();
|
||||
noMixedContent: function() {
|
||||
return {
|
||||
success: !(this.isPageHTTPS() && !this.piwikUsesHTTPS())
|
||||
};
|
||||
},
|
||||
|
||||
isScriptAsync: function() {
|
||||
return this.scriptObject.hasAttribute("async") && this.scriptObject.hasAttribute("defer")
|
||||
return {
|
||||
success: this.scriptObject.hasAttribute("async") && this.scriptObject.hasAttribute("defer")
|
||||
}
|
||||
},
|
||||
|
||||
isPageUTF8: function() {
|
||||
return document.characterSet.toLowerCase() === "utf-8";
|
||||
return {
|
||||
success: document.characterSet.toLowerCase() === "utf-8",
|
||||
substitutions: [document.characterSet]
|
||||
};
|
||||
},
|
||||
main: function() {
|
||||
this.scriptObject = this.piwikJSScriptObject();
|
||||
|
@ -60,10 +71,9 @@ tests = {
|
|||
return false;
|
||||
}
|
||||
return {
|
||||
UrltoPiwikJs: this.URLtoPiwikJS(),
|
||||
piwikUsesHTTPS: this.piwikUsesHTTPS(),
|
||||
isURLprotocolRelative: this.isURLprotocolRelative(),
|
||||
isMixedContent: this.isMixedContent(),
|
||||
noProtocolRelativeURL: this.noProtocolRelativeURL(),
|
||||
noMixedContent: this.noMixedContent(),
|
||||
isScriptAsync: this.isScriptAsync(),
|
||||
isPageUTF8: this.isPageUTF8()
|
||||
};
|
||||
|
|
42
js/panel.js
42
js/panel.js
|
@ -2,8 +2,41 @@ document.addEventListener('DOMContentLoaded', function() {
|
|||
var data = {request: {}};
|
||||
|
||||
function printData() {
|
||||
document.querySelector('#response').innerHTML = JSON.stringify(data, null, 4);
|
||||
document.querySelector('#json').innerHTML = JSON.stringify(data, null, 4);
|
||||
function tableCreate() {
|
||||
var tbl = document.querySelector('.table');
|
||||
tbl.innerHTML = "";
|
||||
|
||||
for (var testname in data.inject) {
|
||||
if (data.inject.hasOwnProperty(testname)) {
|
||||
var response = data.inject[testname];
|
||||
var tr = tbl.insertRow();
|
||||
tr.title = testname;
|
||||
var status = tr.insertCell(0), details = tr.insertCell(1);
|
||||
var Result = true;
|
||||
if (response.success === true) {
|
||||
tr.classList.add("table-success");
|
||||
status.innerText = "\u2714"
|
||||
} else if (response.success === false) {
|
||||
tr.classList.add("table-warning");
|
||||
status.innerText = "\u2718"
|
||||
|
||||
} else {
|
||||
Result = false;
|
||||
tr.classList.add("table-active");
|
||||
status.innerText = "?"
|
||||
}
|
||||
status.title = response.success;
|
||||
|
||||
if (Result) {
|
||||
var messageKey = testname + "_" + response.success;
|
||||
details.innerHTML = chrome.i18n.getMessage(messageKey, response.substitutions)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
tableCreate();
|
||||
}
|
||||
|
||||
(function createChannel() {
|
||||
|
@ -25,11 +58,10 @@ document.addEventListener('DOMContentLoaded', function() {
|
|||
|
||||
}());
|
||||
|
||||
|
||||
chrome.runtime.sendMessage({action: "inject", tabId: chrome.devtools.inspectedWindow.tabId});
|
||||
chrome.runtime.sendMessage({action: "request", tabId: chrome.devtools.inspectedWindow.tabId});
|
||||
document.querySelector('#start').addEventListener('click', function() {
|
||||
chrome.runtime.sendMessage({action: "inject", tabId: chrome.devtools.inspectedWindow.tabId});
|
||||
chrome.runtime.sendMessage({action: "request", tabId: chrome.devtools.inspectedWindow.tabId});
|
||||
// chrome.tabs.reload(chrome.devtools.inspectedWindow.tabId);
|
||||
console.log("sent message")
|
||||
// chrome.runtime.sendMessage({action: "request", tabId: chrome.devtools.inspectedWindow.tabId});
|
||||
}, false);
|
||||
});
|
||||
|
|
|
@ -1,10 +1,19 @@
|
|||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css"
|
||||
integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ"
|
||||
crossorigin="anonymous">
|
||||
<!--<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>-->
|
||||
|
||||
<script src="../js/panel.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h2>DevTools panel</h2>
|
||||
<button id="start">Static Test </button>
|
||||
<pre id="response"></pre>
|
||||
<div class="container">
|
||||
<h2>DevTools panel</h2>
|
||||
<button id="start">Static Test</button>
|
||||
<table class="table"></table>
|
||||
<pre id="json"></pre>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
Reference in a new issue