diff --git a/pages/logging/logging.css b/pages/logging/logging.css
new file mode 100644
index 00000000..db5999fd
--- /dev/null
+++ b/pages/logging/logging.css
@@ -0,0 +1,88 @@
+html {
+ font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, sans-serif;
+}
+
+table {
+ border-collapse: collapse;
+ border-spacing: 0;
+ font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, sans-serif;
+ max-width: 100%;
+ white-space: nowrap;
+}
+
+thead, tbody, th, td {
+ border: 1px solid #a0a0a0;
+}
+
+thead {
+ background-color: #d3d3d3;
+}
+
+table td:first-child {
+ text-align: right;
+}
+
+td {
+ padding: 2px 15px;
+}
+
+.button {
+ background-color: #fafafa;
+ border: 1px solid #5f5f5f;
+ border-radius: 5px;
+ color: #5f5f5f;
+ cursor: pointer;
+ font-size: 14px;
+ margin: 20px 20px 20px 0;
+ padding: 10px;
+}
+
+.button-group {
+ display: flex;
+}
+
+#no-logging-content, #logging-content, #btn-delete {
+ display: none;
+}
+
+#btn-reload:hover {
+ background-color: #ddd;
+}
+
+#btn-delete:hover {
+ background-color: #dd4b39;
+ border-color: #d73925;
+ color: white;
+}
+
+.missing {
+ background-color: #fffbd6;
+}
+
+@media (prefers-color-scheme: dark) {
+ body {
+ background-color: #202023;
+ }
+
+ body, .title-option {
+ color: #aeaeae;
+ }
+
+ thead {
+ background-color: #3c3c3c;
+ }
+
+ .button {
+ background-color: #3c3c3c;
+ border-color: #323232;
+ color: #bbb;
+ }
+
+ #btn-reload:hover {
+ background-color: #2b2b2b;
+ }
+
+ .missing {
+ background-color: #535035;
+ }
+}
diff --git a/pages/logging/logging.html b/pages/logging/logging.html
new file mode 100644
index 00000000..43fcc0f0
--- /dev/null
+++ b/pages/logging/logging.html
@@ -0,0 +1,31 @@
+
+
+
+ LocalCDN Logging
+
+
+
+
+
+
+
+ SimpleLog
+
+ no data
+
+
+
+ # |
+ Initiator |
+ Resource |
+ Redirected to |
+
+
+
+
+
+
+
diff --git a/pages/logging/logging.js b/pages/logging/logging.js
new file mode 100644
index 00000000..ac5dbb9f
--- /dev/null
+++ b/pages/logging/logging.js
@@ -0,0 +1,115 @@
+/**
+ * Logging Page
+ * Belongs to LocalCDN
+ *
+ * @author nobody
+ * @since 2021-02-19
+ *
+ * @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';
+
+
+/**
+ * Logging Page
+ */
+
+var logging = {};
+
+logging._onDocumentLoaded = function () {
+ logging._getLoggingData()
+ .then(logging._generateTable);
+ document.getElementById('btn-delete').addEventListener('click', logging._deleteLogs);
+ document.getElementById('btn-reload').addEventListener('click', logging._resfresh);
+};
+
+logging._generateTable = function () {
+ let data = logging._data;
+ if (data.length === 0) {
+ logging._showTable(false);
+ return;
+ }
+
+ for (let i = data.length - 1; i >= 0; i--) {
+ let tbody, row, cell, content, redirect;
+
+ tbody = document.getElementById('logging-content').getElementsByTagName('tbody')[0];
+ row = tbody.insertRow();
+
+ if (Object.values(data[i])[3]) {
+ row.classList.add('missing');
+ }
+
+ cell = row.insertCell();
+ content = document.createTextNode(i + 1);
+ cell.appendChild(content);
+
+ cell = row.insertCell();
+ content = document.createTextNode(Object.values(data[i])[0]);
+ cell.appendChild(content);
+
+ cell = row.insertCell();
+ content = document.createTextNode(Object.values(data[i])[1]);
+ cell.appendChild(content);
+
+ cell = row.insertCell();
+ if (Object.values(data[i])[2] === '') {
+ redirect = '-';
+ } else {
+ redirect = Object.values(data[i])[2];
+ }
+ content = document.createTextNode(redirect);
+ cell.appendChild(content);
+ }
+
+ logging._showTable(true);
+};
+
+logging._deleteLogs = function () {
+ if (confirm('Are you sure you want to delete these logs?')) {
+ let message = {
+ 'topic': 'logs:delete',
+ 'value': '',
+ };
+
+ chrome.runtime.sendMessage(message);
+ logging._resfresh();
+ }
+};
+
+logging._getLoggingData = function () {
+ return new Promise((resolve) => {
+ let message = {
+ 'topic': 'logs:get'
+ };
+
+ chrome.runtime.sendMessage(message, function (data) {
+ logging._data = data['logs'];
+ resolve();
+ });
+ });
+};
+
+logging._showTable = function (value) {
+ let v1, v2;
+
+ v1 = value ? 'block' : 'none';
+ v2 = value ? 'none' : 'block';
+
+ document.getElementById('logging-content').style.display = v1;
+ document.getElementById('btn-delete').style.display = v1;
+ document.getElementById('no-logging-content').style.display = v2;
+};
+
+logging._resfresh = function () {
+ location.reload();
+};
+
+logging._data = [];
+
+document.addEventListener('DOMContentLoaded', logging._onDocumentLoaded);