felixfoertsch/webextensions-examples
1
0
Fork 0
mirror of https://github.com/mdn/webextensions-examples.git synced 2026-04-17 14:59:12 +02:00
Code Issues Packages Projects Releases Wiki Activity

add webNavigation events and webNavigation UrlFilter example.

Browse Source
This commit is contained in:
Luca Greco
2016-09-13 16:55:37 +02:00
parent dae0202596
commit 65a630b881
7 changed files with 120 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
navigation-stats/README.md Normal file
View File

@@ -0,0 +1,27 @@
# navigation-stats
## What it does ##
The extension includes:
* a background which collects navigation stats using the webNavigation API,
and store the stats using the storage API.
* a browser action with a popup including HTML, CSS, and JS, which renders
the stats stored by the background page
When the user navigate on a website from any of the browser tabs, the background
page collected every completed navigation with the "http" or "https" schemes
(using an UrlFilter for the listener of the webNavigation events)
When the user clicks the browser action button, the popup is shown, and
the stats saved using the storage API are retrived and rendered in the
popup window.
## What it shows ##
* use the webNavigation API to monitor browsing navigation events
* use an UrlFilter to only receive the webNavigation event using
one of the supported criteria.
* use the storage API to persist data over browser reboots and to share it
between different extension pages.

28
navigation-stats/background.js Normal file
View File

@@ -0,0 +1,28 @@
// Load existent stats with the storage API.
chrome.storage.local.get("hostNavigationStats", results => {
// Initialize the saved stats if not yet initialized.
if (!results.hostNavigationStats) {
results = {
hostNavigationStats: {}
};
}
const {hostNavigationStats} = results;
// Monitor completed navigation events and update
// stats accordingly.
chrome.webNavigation.onCompleted.addListener(evt => {
// Filter out any sub-frame related navigation event
if (evt.frameId !== 0) {
return;
}
const url = new URL(evt.url);
hostNavigationStats[url.hostname] = hostNavigationStats[url.hostname] || 0;
hostNavigationStats[url.hostname]++;
// Persist the updated stats.
chrome.storage.local.set(results);
}, { url: [{schemes: ["http", "https"]}]});
});

1
navigation-stats/icons/LICENSE Normal file
View File

@@ -0,0 +1 @@
The icon "icon-32.png" is taken from the IconBeast Lite iconset, and used under the terms of its license (http://www.iconbeast.com/faq/), with a link back to the website: http://www.iconbeast.com/free/.

BIN
navigation-stats/icons/icon-32.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 259 B

24
navigation-stats/manifest.json Normal file
View File

@@ -0,0 +1,24 @@
{
"manifest_version": 2,
"name": "Navigation Stats",
"version": "0.1.0",
"browser_action": {
"default_icon": {
"32": "icons/icon-32.png"
},
"default_title": "Navigation Stats",
"default_popup": "popup.html"
},
"permissions": ["webNavigation", "storage"],
"background": {
"scripts": [ "background.js" ]
},
"icons": {
"32": "icons/icon-32.png"
},
"applications": {
"gecko": {
"strict_min_version": "50.0"
}
}
}

10
navigation-stats/popup.html Normal file
View File

@@ -0,0 +1,10 @@
<!DOCTYPE html>
<html>
<body>
<h3>Top navigated hosts:</h3>
<ul>
<li>No data collected yet...</li>
</ul>
<script src="popup.js"></script>
</body>
</html>

30
navigation-stats/popup.js Normal file
View File

@@ -0,0 +1,30 @@
// Get the saved stats and render the data in the popup window.
chrome.storage.local.get("hostNavigationStats", results => {
if (!results.hostNavigationStats) {
return;
}
const {hostNavigationStats} = results;
const sortedHostnames = Object.keys(hostNavigationStats).sort((a, b) => {
return hostNavigationStats[a] <= hostNavigationStats[b];
});
if (sortedHostnames.length === 0) {
return;
}
let listEl = document.querySelector("ul");
listEl.innerHTML = "";
const MAX_ITEMS = 5;
for (let i=0; i < sortedHostnames.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);
}
});