mirror of
https://github.com/mdn/webextensions-examples.git
synced 2026-04-16 06:18:35 +02:00
add in navigation types (#305)
This commit is contained in:
@@ -1,17 +1,30 @@
|
||||
// Load existent stats with the storage API.
|
||||
var gettingStoredStats = browser.storage.local.get("hostNavigationStats");
|
||||
var gettingStoredStats = browser.storage.local.get();
|
||||
|
||||
gettingStoredStats.then(results => {
|
||||
// Initialize the saved stats if not yet initialized.
|
||||
if (!results.hostNavigationStats) {
|
||||
if (!results.stats) {
|
||||
results = {
|
||||
hostNavigationStats: {}
|
||||
host: {},
|
||||
type: {}
|
||||
};
|
||||
}
|
||||
|
||||
const {hostNavigationStats} = results;
|
||||
|
||||
// Monitor completed navigation events and update
|
||||
// stats accordingly.
|
||||
browser.webNavigation.onCommitted.addListener((evt) => {
|
||||
if (evt.frameId !== 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
let transitionType = evt.transitionType;
|
||||
results.type[transitionType] = results.type[transitionType] || 0;
|
||||
results.type[transitionType]++;
|
||||
|
||||
// Persist the updated stats.
|
||||
browser.storage.local.set(results);
|
||||
});
|
||||
|
||||
browser.webNavigation.onCompleted.addListener(evt => {
|
||||
// Filter out any sub-frame related navigation event
|
||||
if (evt.frameId !== 0) {
|
||||
@@ -20,8 +33,8 @@ gettingStoredStats.then(results => {
|
||||
|
||||
const url = new URL(evt.url);
|
||||
|
||||
hostNavigationStats[url.hostname] = hostNavigationStats[url.hostname] || 0;
|
||||
hostNavigationStats[url.hostname]++;
|
||||
results.host[url.hostname] = results.host[url.hostname] || 0;
|
||||
results.host[url.hostname]++;
|
||||
|
||||
// Persist the updated stats.
|
||||
browser.storage.local.set(results);
|
||||
|
||||
@@ -2,7 +2,11 @@
|
||||
<html>
|
||||
<body>
|
||||
<h3>Top navigated hosts:</h3>
|
||||
<ul>
|
||||
<ul id="hosts">
|
||||
<li>No data collected yet...</li>
|
||||
</ul>
|
||||
<h3>Top navigation types:</h3>
|
||||
<ul id="types">
|
||||
<li>No data collected yet...</li>
|
||||
</ul>
|
||||
<script src="popup.js"></script>
|
||||
|
||||
@@ -1,32 +1,44 @@
|
||||
// Get the saved stats and render the data in the popup window.
|
||||
var gettingStoredStats = browser.storage.local.get("hostNavigationStats");
|
||||
gettingStoredStats.then(results => {
|
||||
if (!results.hostNavigationStats) {
|
||||
return;
|
||||
}
|
||||
const MAX_ITEMS = 5;
|
||||
|
||||
const {hostNavigationStats} = results;
|
||||
const sortedHostnames = Object.keys(hostNavigationStats).sort((a, b) => {
|
||||
return hostNavigationStats[a] <= hostNavigationStats[b];
|
||||
function sorter(array) {
|
||||
return Object.keys(array).sort((a, b) => {
|
||||
return array[a] <= array[b];
|
||||
});
|
||||
}
|
||||
|
||||
if (sortedHostnames.length === 0) {
|
||||
return;
|
||||
function addElements(element, array, callback) {
|
||||
while(element.firstChild) {
|
||||
element.removeChild(element.firstChild);
|
||||
}
|
||||
|
||||
let listEl = document.querySelector("ul");
|
||||
while(listEl.firstChild)
|
||||
listEl.removeChild(listEl.firstChild);
|
||||
|
||||
const MAX_ITEMS = 5;
|
||||
for (let i=0; i < sortedHostnames.length; i++) {
|
||||
for (let i=0; i < array.length; i++) {
|
||||
if (i >= MAX_ITEMS) {
|
||||
break;
|
||||
}
|
||||
|
||||
const listItem = document.createElement("li");
|
||||
const hostname = sortedHostnames[i];
|
||||
listItem.textContent = `${hostname}: ${hostNavigationStats[hostname]} visit(s)`;
|
||||
listEl.appendChild(listItem);
|
||||
listItem.textContent = callback(array[i]);
|
||||
element.appendChild(listItem);
|
||||
}
|
||||
}
|
||||
|
||||
var gettingStoredStats = browser.storage.local.get();
|
||||
gettingStoredStats.then(results => {
|
||||
if (results.type.length === 0 || results.host.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
let hostElement = document.getElementById("hosts");
|
||||
let sortedHosts = sorter(results.host);
|
||||
addElements(hostElement, sortedHosts, (host) => {
|
||||
return `${host}: ${results.host[host]} visit(s)`;
|
||||
});
|
||||
|
||||
let typeElement = document.getElementById("types");
|
||||
let sortedTypes = sorter(results.type);
|
||||
addElements(typeElement, sortedTypes, (type) => {
|
||||
return `${type}: ${results.type[type]} use(s)`;
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user