diff --git a/pages/statistics/statistics.css b/pages/statistics/statistics.css
new file mode 100644
index 00000000..34be8896
--- /dev/null
+++ b/pages/statistics/statistics.css
@@ -0,0 +1,314 @@
+/**
+ * Sections
+ */
+
+body {
+ background-color: #f0f0f0;
+ color: #555;
+ cursor: default;
+ font-family: 'Noto Sans', Arial, sans-serif !important;
+ font-size: 75%;
+ margin: 0 auto;
+ overflow-y: auto;
+ overflow-x: hidden;
+ padding: 0px 15px 0px 15px;
+}
+
+header {
+ align-items: center;
+ border-bottom: solid #d3d3d3 1px;
+ display: flex;
+ position: relative;
+ padding: 8px;
+}
+
+.panel {
+ overflow: hidden;
+ padding: 10px 8px;
+}
+
+.panel:not(:last-child) {
+ border-bottom: 1px solid #d8d8d8;
+}
+
+.subpanel {
+ overflow: hidden;
+}
+
+footer {
+ overflow: hidden;
+ padding: 8px;
+}
+
+/**
+ * Fonts
+ */
+
+@font-face {
+ font-family: 'Noto Sans';
+ font-style: normal;
+ font-weight: 400;
+ src: url('../../modules/noto-sans/noto-sans.woff2')
+ format('woff2');
+}
+
+@font-face {
+ font-family: 'Noto Sans';
+ font-style: normal;
+ font-weight: 600;
+ src: url('../../modules/noto-sans/noto-sans-bold.woff2')
+ format('woff2');
+}
+
+@font-face {
+ font-family: 'Noto Sans';
+ font-style: italic;
+ font-weight: 400;
+ src: url('../../modules/noto-sans/noto-sans-italic.woff2')
+ format('woff2');
+}
+
+/**
+ * Headings
+ */
+
+.heading {
+ font-size: 14px;
+ font-weight: 600;
+ padding-left: 0;
+ width: 100%;
+}
+
+.subheading {
+ font-weight: 600;
+ margin-bottom: 2px;
+ text-align: center;
+}
+
+/**
+ * Lists
+ */
+
+.list {
+ margin: 0;
+ padding: 8px 0 0;
+ min-width: 300px;
+}
+
+.list-item {
+ background-color: #f7f7f7;
+ border: 1px solid #e4e4e4;
+ color: #737373;
+ font-weight: 600;
+ list-style: none;
+ margin: 0;
+ padding: 10px;
+}
+
+.sublist {
+ align-items: center;
+ background-color: #ececec;
+ border: 1px solid #e0e0e0;
+ box-shadow: inset 0 2px 10px #e2e2e2;
+ list-style: none;
+ padding-left: 8px;
+ padding: 0;
+ margin-top: 0px;
+}
+
+.sublist:last-child {
+ border-bottom: 1px solid #e0e0e0;
+}
+
+.sublist-item {
+ border-bottom: 1px solid #e0e0e0;
+ color: #737373;
+ font-weight: 600;
+ padding: 10px;
+}
+
+.sublist-item:last-child {
+ border-bottom: none;
+}
+
+.cdn-list {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+}
+
+#get-stats-btn {
+ color: white;
+}
+
+/**
+ * Icons
+ */
+
+.icon {
+ margin-right: 6px;
+}
+
+.icon-logo {
+ height: 26px;
+ padding: 14px 6px 14px 8px;
+ width: 26px;
+}
+
+/**
+ * Buttons
+ */
+
+#donate-button {
+ -moz-user-select: none;
+ user-select: none;
+ color: #5f5f5f;
+ cursor: pointer;
+ float: right;
+ font-size: 12px;
+ padding: 5px;
+}
+
+#donate-button:hover {
+ transform: scale(1.3);
+}
+
+#donate-button-svg {
+ background-size: cover;
+ width: 15px;
+ height: 15px;
+}
+
+#donate-button-svg {
+ background-image: url("../../icons/donate.svg");
+}
+
+/**
+ * Miscellaneous
+ */
+
+.badge {
+ background-color: #6bb798;
+ border-radius: 10px;
+ color: #fff;
+ font-family: monospace;
+ font-size: 13px;
+ font-weight: 600;
+ margin-right: 8px;
+ padding: 3px 15px;
+}
+
+.counter {
+ font-size: 36px;
+ font-weight: 600;
+ margin-top: 4px;
+ text-align: center;
+}
+
+.description {
+ color: #777;
+ font-style: italic;
+ margin: 0 6px;
+ text-align: center;
+}
+
+.label-version {
+ color: #6aac91;
+ font-size: 9px;
+}
+
+.label-domain {
+ color: #bbb;
+ display: flex;
+ font-style: italic;
+ overflow: hidden;
+ padding: 6px 0 0 4px;
+ white-space: nowrap;
+}
+
+.side-note {
+ color: #a5a5a5;
+ font-style: italic;
+ font-weight: 400;
+}
+
+/**
+ * Compatibility
+ */
+
+@media (prefers-color-scheme: dark) {
+
+ /**
+ * Sections
+ */
+
+ body {
+ background-color: #404040;
+ color: #f9f9fa;
+ }
+
+ header {
+ border-bottom-color: #292929;
+ }
+
+ /**
+ * Lists
+ */
+
+ .list-item {
+ background-color: #484848;
+ border-color: #292929;
+ color: #f0f0f0;
+ }
+
+ .sublist {
+ background-color: #323232;
+ border-color: #292929;
+ box-shadow: inset 0 2px 10px #292929;
+ }
+
+ .sublist:last-child {
+ border-bottom-color: #292929;
+ }
+
+ .sublist-item {
+ border-bottom-color: #2c2c2c;
+ color: #f0f0f0;
+ }
+
+ /**
+ * Links
+ */
+
+ .link-text {
+ color: #7d7d7d;
+ }
+
+ .link-text:hover {
+ color: #dadada;
+ }
+
+ /**
+ * Miscellaneous
+ */
+
+ .badge {
+ color: #2d5042;
+ }
+
+ .description {
+ color: #dadada;
+ }
+
+ .label-domain {
+ color: #717171;
+ }
+
+ .panel:not(:last-child) {
+ border-bottom-color: #292929;
+ }
+
+ .side-note {
+ color: #888;
+ }
+}
diff --git a/pages/statistics/statistics.html b/pages/statistics/statistics.html
new file mode 100644
index 00000000..2e0ea569
--- /dev/null
+++ b/pages/statistics/statistics.html
@@ -0,0 +1,46 @@
+
+
+
+
+
+
+ LocalCDN | Statistics
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ LocalCDN
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/pages/statistics/statistics.js b/pages/statistics/statistics.js
new file mode 100644
index 00000000..67f95ca5
--- /dev/null
+++ b/pages/statistics/statistics.js
@@ -0,0 +1,187 @@
+/**
+ * Details of Requests
+ * Belongs to LocalCDN.
+ *
+ * @author nobody42
+ * @since 2020-02-26
+ * @license MPL 2.0
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+'use strict';
+
+/**
+ * Overview
+ */
+
+var statistics = {};
+
+/**
+ * Private Methods
+ */
+
+statistics._renderContents = function () {
+
+ helpers.insertI18nContentIntoDocument(document);
+ helpers.insertI18nTitlesIntoDocument(document);
+
+ statistics._renderNonContextualContents();
+ statistics._renderContextualContents();
+};
+
+statistics._renderNonContextualContents = function () {
+
+ let donationButtonElement, versionLabelElement, version;
+
+ version = chrome.runtime.getManifest().version;
+
+ donationButtonElement = document.getElementById('donate-button');
+ donationButtonElement.addEventListener('mouseup', statistics._onDonationButtonClicked);
+
+ versionLabelElement = document.getElementById('version-label');
+ versionLabelElement.innerText = helpers.formatVersion(version);
+};
+
+statistics._renderInjectionPanel = function (statisticData) {
+
+ let websiteContextElement, injectionOverviewElement;
+
+ websiteContextElement = document.getElementById('website-context');
+ injectionOverviewElement = statistics._createInjectionOverviewElement(statisticData);
+
+ websiteContextElement.append(injectionOverviewElement);
+};
+
+statistics._renderContextualContents = function () {
+
+ if (Object.keys(statisticData).length > 0) {
+ statistics._renderInjectionPanel(statisticData);
+ }
+};
+
+statistics._createInjectionOverviewElement = function (statisticData) {
+
+ let divOutline = document.createElement('div');
+ divOutline.setAttribute('class', 'cdn-list');
+
+ for (let source in statisticData) {
+
+ let injectionOverviewElement = document.createElement('div');
+ injectionOverviewElement.setAttribute('class', 'list');
+
+ let injectionGroupHeaderElement, injectionGroupElement, cdn;
+
+ cdn = statisticData[source];
+
+ injectionGroupHeaderElement = statistics._createInjectionGroupHeaderElement(source, cdn);
+ injectionGroupElement = statistics._createInjectionGroupElement(source, cdn);
+
+ injectionOverviewElement.appendChild(injectionGroupHeaderElement);
+ injectionOverviewElement.appendChild(injectionGroupElement);
+
+ divOutline.appendChild(injectionOverviewElement);
+ }
+
+ return divOutline;
+};
+
+statistics._createInjectionGroupHeaderElement = function (source, cdn) {
+
+ let injectionGroupHeaderElement, badgeElement, badgeTextNode, cdnNameTextNode;
+
+ injectionGroupHeaderElement = document.createElement('li');
+ injectionGroupHeaderElement.setAttribute('class', 'list-item');
+
+ badgeElement = document.createElement('span');
+ badgeElement.setAttribute('class', 'badge');
+
+ badgeTextNode = document.createTextNode(cdn.length);
+ badgeElement.appendChild(badgeTextNode);
+
+ cdnNameTextNode = document.createTextNode(helpers.determineCdnName(source));
+
+ injectionGroupHeaderElement.appendChild(badgeElement);
+ injectionGroupHeaderElement.appendChild(cdnNameTextNode);
+
+ return injectionGroupHeaderElement;
+};
+
+statistics._createInjectionGroupElement = function (source, cdn) {
+
+ let injectionGroupElement;
+
+ injectionGroupElement = document.createElement('ul');
+ injectionGroupElement.setAttribute('class', 'sublist');
+
+ for (let injection of cdn) {
+
+ let injectionElement = statistics._createInjectionElement(injection);
+ injectionGroupElement.appendChild(injectionElement);
+ }
+
+ return injectionGroupElement;
+};
+
+statistics._createInjectionElement = function (injection) {
+
+ let injectionElement, filename, name, nameTextNode, noteElement, noteTextNode;
+
+ injectionElement = document.createElement('li');
+ injectionElement.setAttribute('class', 'sublist-item');
+ filename = helpers.extractFilenameFromPath(injection.path);
+
+ // If bundle empty, use filename
+ if (injection.bundle === ''){
+ name = helpers.determineResourceName(filename);
+ } else {
+ name = injection.bundle + ' (Bundle)'
+ }
+
+ nameTextNode = document.createTextNode(`- ${name}`);
+ injectionElement.appendChild(nameTextNode);
+
+ if (injection.version !== null) {
+ noteElement = document.createElement('span');
+ noteElement.setAttribute('class', 'side-note');
+ let versionNode = (injection.version === 'beta') ? ` ${injection.version}` : ` v${injection.version}`;
+ noteTextNode = document.createTextNode(versionNode);
+ noteElement.appendChild(noteTextNode);
+ injectionElement.appendChild(noteElement);
+ }
+
+ return injectionElement;
+};
+
+
+/**
+ * Event Handlers
+ */
+
+statistics._onDocumentLoaded = function () {
+
+ chrome.storage.local.get([Setting.STATISTIC_DATA], function (items) {
+ statisticData = items.statisticData;
+ statistics._renderContents();
+ });
+
+};
+
+statistics._onDonationButtonClicked = function () {
+
+ chrome.tabs.update({
+ 'url': chrome.extension.getURL('pages/donate/donate.html'),
+ 'active': (event.button === 0)
+ });
+
+};
+
+
+/**
+ * Initializations
+ */
+
+let statisticData;
+document.addEventListener('DOMContentLoaded', statistics._onDocumentLoaded);