peji-inspektor-crx/popup.js

644 lines
19 KiB
JavaScript
Raw Normal View History

2024-11-10 00:24:12 +00:00
class PopupService {
async SendMessage(eventName, callback) {
chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, { event: eventName }, callback);
});
}
async GetHyperlinks() {
const a = this;
const baseUrl = await a.GetLocation();
return new Promise(function(resolve) {
a.SendMessage("GetNodes", async function(payload) {
// let result = {
// items: payload.copy(),
// totalCount: payload.length,
// distinctCount: 0
// };
// result.items = result.items.orderBy("innerText");
// result.items = result.items.distinct();
// result.distinctCount = result.items.length;
// Populate occurrence counter
// for (let i=0; i<result.items.length; i++) {
// result.items[i].occurrence = payload.filter(item => JSON.stringify(item) === JSON.stringify(result.items[i])).length;
// }
// resolve(result);
// console.log(payload);
resolve(payload.copy());
});
});
}
async GetLocation() {
const a = this;
return new Promise(function(resolve) {
a.SendMessage("GetLocation", function(payload) {
resolve(payload);
});
});
}
}
class ContentService {
GenerateCheckBox(num, label, checked) {
let html = "";
html += "<div class=\"form-check form-switch\">";
html += "<input class=\"form-check-input\" type=\"checkbox\" role=\"switch\" id=\"checkbox" + num + "\" " + (checked ? "checked" : "") + ">";
html += "<label class=\"form-check-label\" for=\"checkbox" + num + "\">" + label + "</label>";
html += "</div>";
return html;
}
GenerateCols(...args) {
let html = "";
for (let i=0; i<args.length; i++) {
html += "<div class=\"col\">" + args[i] + "</div>";
}
return html;
}
GenerateRow(...args) {
const a = this;
if (args.length === 1) {
if (Object.getDataType(args[0]) == "array") {
args = args[0];
}
}
let result = "";
for (let i=0; i<args.length; i++) {
result = result + a.GenerateRowCell(args[i]);
}
return "<tr>" + result + "</tr>";
}
GenerateRowCell(value) {
return "<td class=\"\"><input type=\"text\" class=\"display\" readonly=\"readonly\" value=\"" + value + "\" /></td>";
}
}
class AContentService extends ContentService {
ContainerPanel = null;
Panel1 = null;
Button1 = null;
Button2 = null;
Label1 = null;
Table1 = null;
#PopupService = null;
#TableLabel = "Results";
constructor(popupService) {
super();
this.#PopupService = popupService;
}
InitialiseComponents(){
const a = this;
a.ContainerPanel = document.getElementById("nav-hyperlinks");
a.Panel1 = a.ContainerPanel.querySelectorAll("div[role='options']")[0];
a.Button1 = a.ContainerPanel.querySelectorAll("button")[0];
a.Button2 = a.ContainerPanel.querySelectorAll("button")[1];
a.Label1 = a.ContainerPanel.querySelectorAll("span[role='table-heading']")[0];
a.Table1 = a.ContainerPanel.querySelectorAll("table")[0];
a.Clear();
let col1 = "";
col1 += a.GenerateCheckBox(1, "Show Anchor as HTML", false);
col1 += a.GenerateCheckBox(3, "Sort By Anchor Text", true);
col1 += a.GenerateCheckBox(2, "Trim Anchor Text", true);
col1 += a.GenerateCheckBox(4, "Resolve Relative URL", false);
col1 += a.GenerateCheckBox(12, "Hide External Links", true);
let col2 = "";
col2 += a.GenerateCheckBox(5, "Hide Duplicates", true);
col2 += a.GenerateCheckBox(14, "Hide Blank Anchors", true);
col2 += a.GenerateCheckBox(15, "Hide Blank Links", true);
col2 += a.GenerateCheckBox(11, "Hide Fragments", true);
col2 += a.GenerateCheckBox(13, "Hide Mailto/Tel", true);
let col3 = "";
col3 += a.GenerateCheckBox(6, "Show Title", true);
col3 += a.GenerateCheckBox(7, "Show Target", false);
col3 += a.GenerateCheckBox(8, "Show Rel", false);
col3 += a.GenerateCheckBox(9, "Show Type", false);
col3 += a.GenerateCheckBox(10, "Show Occurrence", false);
let html = a.GenerateCols(col1, col2, col3);
a.#writeOptionsPanel(html);
a.Button1.addEventListener('click', async function (e) {
a.Button1.disabled = true;
await a.Search();
a.Button1.disabled = false;
});
}
Clear() {
const a = this;
a.#writeOptionsPanel("");
a.#clearTable();
}
async Search() {
const a = this;
const thead = a.Table1.querySelectorAll("thead")[0];
const tbody = a.Table1.querySelectorAll("tbody")[0];
a.#clearTable();
// Write thead
thead.innerHTML = "<tr>" + a.#generateTHeader() + "</tr>";
const result = await a.#PopupService.GetHyperlinks();
const totalCount = result.length;
a.Label1.innerText = a.#TableLabel + " (" + totalCount + ")";
const newResults = await a.#filterSearch(result.copy());
if (newResults.length != totalCount) {
a.Label1.innerText = a.#TableLabel + " (" + newResults.length + "/" + totalCount + ")";
}
for (let i=0; i<newResults.length; i++) {
const item = newResults[i];
let row = [ item.text, item.href ];
if (a.#getCheckBox(6)) {
row.push(item.title);
}
if (a.#getCheckBox(7)) {
row.push(item.target);
}
if (a.#getCheckBox(8)) {
row.push(item.rel);
}
if (a.#getCheckBox(9)) {
row.push(item.type);
}
if (a.#getCheckBox(10)) {
row.push(item.occurrence);
}
tbody.innerHTML += a.GenerateRow(row);
}
}
#clearTable() {
const a = this;
a.Label1.innerText = a.#TableLabel;
const thead = a.Table1.querySelectorAll("thead")[0];
const tbody = a.Table1.querySelectorAll("tbody")[0];
thead.innerHTML = "";
tbody.innerHTML = "";
}
async #filterSearch(items) {
const a = this;
const currentUrl = await popupService.GetLocation();
const currentHostname = (new URL(currentUrl)).hostname;
let result = [];
for (let i=0; i<items.length; i++) {
const item = items[i];
// Hide fragments
if (a.#getCheckBox(11)) {
if (item.href.startsWith("#")) {
continue;
}
}
// Hide Blank Links
if (a.#getCheckBox(15)) {
if (String.isNullOrWhitespace(item.href)) {
continue;
}
}
// Hide mailto/tel
if (a.#getCheckBox(13)) {
if (item.href.toLowerCase().startsWith("telno:") || item.href.toLowerCase().startsWith("mailto:")) {
continue;
}
}
const absoluteUrl = new URL(item.href, currentUrl);
// Hide external links
if (a.#getCheckBox(12)) {
if (currentHostname != absoluteUrl.hostname) {
continue;
}
}
// Show anchor as html
let text = (a.#getCheckBox(1) ? item.innerHTML : item.innerText);
// Hide Blank Anchors
if (a.#getCheckBox(14)) {
if (String.isNullOrWhitespace(text)) {
continue;
}
}
// Resolve relative url
const href = (a.#getCheckBox(4) ? absoluteUrl.href : item.href);
// Trim anchor text
if (a.#getCheckBox(2)) {
text = text.trim();
}
result.push({
text: text,
href: href,
title: (a.#getCheckBox(6) ? item.title : ""),
target: (a.#getCheckBox(7) ? item.target : ""),
rel: (a.#getCheckBox(8) ? item.rel : ""),
type: (a.#getCheckBox(9) ? item.type : ""),
occurrence: ""
});
}
// Show occurrence
if (a.#getCheckBox(10)) {
// Calc occurrences, store in cache
let occurrenceCache = [];
for (let i=0; i<result.length; i++) {
const occurrence = result.filter(item => JSON.stringify(item) === JSON.stringify(result[i])).length;
occurrenceCache.push(occurrence);
}
// Update result with occurrence
for (let i=0; i<result.length; i++) {
result[i].occurrence = occurrenceCache[i];
}
}
// Hide duplicates
if (a.#getCheckBox(5)) {
result = result.distinct();
}
// Sort by anchor text
if (a.#getCheckBox(3)) {
result = result.orderBy("text");
}
return result;
}
#generateTHeader() {
const a = this;
const columns = [
{ id: 6, name: "Title" },
{ id: 7, name: "Target" },
{ id: 8, name: "Rel" },
{ id: 9, name: "Type" },
{ id: 10, name: "Occurrence" }
];
let html = "";
html += "<th>Anchor Text</th>";
html += "<th>Address</th>";
for (let i=0; i<columns.length; i++) {
if (a.#getCheckBox(columns[i].id)) {
html += "<th>" + columns[i].name + "</th>";
}
}
return html;
}
#getCheckBox(num) {
const a = this;
if (a.Panel1 == null) {
return false;
}
const result = a.Panel1.querySelectorAll("input[id='checkbox" + num + "']");
if (result.length <= 0) {
return false;
}
return result[0].checked;
}
#writeOptionsPanel(htmlContent) {
const a = this;
if (a.Panel1 == null) {
return;
}
a.Panel1.innerHTML = htmlContent;
}
}
const popupService = new PopupService();
const aContentService = new AContentService(popupService);
document.addEventListener("DOMContentLoaded", async function(event) {
aContentService.InitialiseComponents();
// aContentService.Button1.addEventListener('click', async function (e) {
// const body = aContentService.Table1.querySelectorAll("tbody")[0];
// body.innerHTML = "";
// const result = await popupService.GetHyperlinks();
// for (let i=0; i<result.length; i++) {
// const item = result[i];
// // const absoluteUrl = new URL(item.href, url);
// // memoBox1.innerText = absoluteUrl.hash;
// // console.log(absoluteUrl);
// body.innerHTML += aContentService.GenerateRow(item.innerHTML, item.href, item.title, item.target);
// }
// });
// PageAssetsCRX.HomeApp.mount("#App1");
// const panel2 = document.getElementById("nav-hyperlinks");
// const optionsPanel = panel2.querySelectorAll("div[role='options']")[0];
// optionsPanel.innerHTML = "";
// let html = "";
// html += contentService.GenerateCheckBox(1, "Show Anchor as HTML", false);
// html += contentService.GenerateCheckBox(2, "Trim Anchor Text", true);
// html += contentService.GenerateCheckBox(3, "Sort By Anchor Text", true);
// html += contentService.GenerateCheckBox(4, "Resolve Relative URL", true);
// html += contentService.GenerateCheckBox(5, "Hide Duplicates", true);
// html += contentService.GenerateCheckBox(6, "Show Title", true);
// html += contentService.GenerateCheckBox(7, "Show Target", true);
// html += contentService.GenerateCheckBox(8, "Show Rel", true);
// html += contentService.GenerateCheckBox(9, "Show Type", true);
// html += contentService.GenerateCheckBox(10, "Show Occurrence", true);
// optionsPanel.innerHTML = html;
// const label1 = document.getElementById("label1");
// const button1 = document.getElementById("button1");
// const checkbox1 = document.getElementById("checkbox1");
// const table1 = document.getElementById("table1");
// const memoBox1 = document.getElementById("memoBox1");
// const messageService = new MessageService();
// memoBox1.focus();
// button1.addEventListener('click', async function (e) {
// const body = table1.getElementsByTagName("tbody")[0];
// body.innerHTML = "";
// const result = await popupService.GetHyperlinks();
// for (let i=0; i<result.items.length; i++) {
// const item = result.items[i];
// // const absoluteUrl = new URL(item.href, url);
// // memoBox1.innerText = absoluteUrl.hash;
// // console.log(absoluteUrl);
// body.innerHTML += popupService.GenerateRow(item.innerHTML, item.href, item.title, item.target);
// }
// });
// memoBox1.innerText = await popupService.GetLocation();
// const body = table1.getElementsByTagName("tbody")[0];
// body.innerHTML = "";
// const result = await popupService.GetHyperlinks();
// for (let i=0; i<result.items.length; i++) {
// const item = result.items[i];
// // const absoluteUrl = new URL(item.href, url);
// // memoBox1.innerText = absoluteUrl.hash;
// // console.log(absoluteUrl);
// body.innerHTML += popupService.GenerateRow(item.text, item.href, item.title, item.target);
// }
// for (let i=0; i<result.items.length; i++) {
// const item = result.items[i];
// body.innerHTML += popupService.GenerateRow(item.text, item.href, item.title, item.occurrence);
// }
/*
popupService.SendMessage("GetNodes", async function(payload) {
const body = table1.getElementsByTagName("tbody")[0];
body.innerHTML = "";
let result = payload;
const totalCount = result.length;
result = result.distinct();
result = result.orderBy("text");
const distinctCount = result.length;
if (totalCount <= 0) {
label1.innerHTML = "Hyperlinks (0)";
} else if (totalCount == distinctCount) {
label1.innerHTML = "Hyperlinks (" + totalCount + ")";
} else {
label1.innerHTML = "Hyperlinks (" + distinctCount + "/" + totalCount + ")";
}
// memoBox1.innerText = JSON.stringify(e);
for( let i=0; i<result.length; i++) {
body.innerHTML += popupService.GenerateRow(result[i].text, result[i].href, result[i].title);
}
});
*/
/*
chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, { event: "GetNodes" }, async function(payload) {
const body = table1.getElementsByTagName("tbody")[0];
body.innerHTML = "";
let result = payload;
const totalCount = result.length;
result = result.distinct();
result = result.orderBy("text");
const distinctCount = result.length;
if (totalCount <= 0) {
label1.innerHTML = "Hyperlinks (0)";
} else if (totalCount == distinctCount) {
label1.innerHTML = "Hyperlinks (" + totalCount + ")";
} else {
label1.innerHTML = "Hyperlinks (" + distinctCount + "/" + totalCount + ")";
}
// memoBox1.innerText = JSON.stringify(e);
for( let i=0; i<result.length; i++) {
body.innerHTML += popupService.GenerateRow(result[i].text, result[i].href, result[i].title);
}
});
// chrome.tabs.sendMessage(tabs[0].id, { data: "hello" }, response => {
// Print response on popup.html
// var msg = document.createElement("h3");
// msg.innerHTML = "H1:" + response;
// document.getElementById("container”).appendChild(msg);
// memoBox1.innerHTML = response;
// alert("!");
// });
});
*/
// document.getElementsByTagName("a").array.forEach(e => {
// memoBox1.innerHTML += e.href + "\n";
// });
// var switch1 = document.getElementById("switch1");
// var switch2 = document.getElementById("switch2");
// var switch3 = document.getElementById("switch3");
// var switch4 = document.getElementById("switch4");
// var switch5 = document.getElementById("switch5");
// var switch6 = document.getElementById("switch6");
// // read local storage
// chrome.storage.local.get(['switch1'], function(result) {
// switch1.checked = result.switch1;
// });
// chrome.storage.local.get(['switch2'], function(result) {
// switch2.checked = result.switch2;
// });
// chrome.storage.local.get(['switch3'], function(result) {
// switch3.checked = result.switch3;
// });
// chrome.storage.local.get(['switch4'], function(result) {
// switch4.checked = result.switch4;
// });
// chrome.storage.local.get(['switch5'], function(result) {
// switch5.checked = result.switch5;
// });
// chrome.storage.local.get(['switch6'], function(result) {
// switch6.checked = result.switch6;
// });
// // set values
// switch1.addEventListener('change', function (e) {
// chrome.storage.local.set({ switch1: e.target.checked}, function() {
// // do nothing
// });
// });
// switch2.addEventListener('change', function (e) {
// chrome.storage.local.set({ switch2: e.target.checked}, function() {
// // do nothing
// });
// });
// switch3.addEventListener('change', function (e) {
// chrome.storage.local.set({ switch3: e.target.checked}, function() {
// // do nothing
// });
// });
// switch4.addEventListener('change', function (e) {
// chrome.storage.local.set({ switch4: e.target.checked}, function() {
// // do nothing
// });
// });
// switch5.addEventListener('change', function (e) {
// chrome.storage.local.set({ switch5: e.target.checked}, function() {
// // do nothing
// });
// });
// switch6.addEventListener('change', function (e) {
// chrome.storage.local.set({ switch6: e.target.checked}, function() {
// // do nothing
// });
// });
});