Ray/peji-inspektor-crx
Ray/peji-inspektor-crx
1
0
Fork 0
Code Pull Requests Actions Packages Releases Activity

Added image nodes support

Browse Source
This commit is contained in:
Ray 2024-11-17 00:19:48 +00:00
parent def6a30a2e
commit 12da6f7776
8 changed files with 574 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
content.js
View File

@ -1,6 +1,6 @@
class MessagingService {
async GetNodes(sender, callback) {
async GetHyperlinkNodes(sender, callback) {
const a = this;
const nodes = await document.body.getElementsByTagName("a");
let result = [];
@ -8,7 +8,7 @@ class MessagingService {
for (let i=0; i<nodes.length; i++) {
result.push({
innerText: nodes[i].innerText ?? "",
innerHTML: nodes[i].innerHTML ?? "",
innerHTML: a.#encodeHtml(nodes[i].innerHTML),
href: (nodes[i].getAttribute("href") ?? "").trim(),
title: (nodes[i].getAttribute("title") ?? "").trim(),
target: nodes[i].getAttribute("target") ?? "",
@ -25,10 +25,45 @@ class MessagingService {
await callback(result);
}
async GetImageNodes(sender, callback) {
const a = this;
const nodes = await document.body.getElementsByTagName("img");
let result = [];
for (let i=0; i<nodes.length; i++) {
result.push({
src: (nodes[i].getAttribute("src") ?? ""),
alt: (nodes[i].getAttribute("alt") ?? ""),
srcset: nodes[i].getAttribute("srcset") ?? "",
usemap: nodes[i].getAttribute("usemap") ?? "",
width: nodes[i].getAttribute("width") ?? "",
height: nodes[i].getAttribute("height") ?? "",
occurrence: 1
});
}
await callback(result);
}
async GetLocation(sender, callback) {
callback(document.location.href);
}
#encodeHtml(htmlContent) {
const map = {
"&": "&amp;",
"<": "&lt;",
">": "&gt;",
'"': "&quot;",
"'": "&#39;",
};
let result = (htmlContent ?? "").replace("\r", "").replace("\n", "\\n").replace("\t", "\\t");
result = result.replace(/[&<>"']/g, (char) => map[char]);
return result;
}
}

2
popup.dist.js
View File

File diff suppressed because one or more lines are too long

163
popup.html
View File

@ -97,101 +97,80 @@
</div>
</div>
<div class="tab-pane fade" id="nav-images" role="tabpanel" aria-labelledby="nav-images-tab" tabindex="0">...</div>
<div class="tab-pane fade" id="nav-images" role="tabpanel" aria-labelledby="nav-images-tab" tabindex="0">
<div class="container-fluid">
<div class="pt-2 pb-2 mb-2 border-bottom">
<div class="row mb-2">
<label for="textBox2" class="col-sm-2 col-form-label fw-bold">Search</label>
<div class="col-sm-10">
<div class="input-group input-group-sm">
<input type="text" class="form-control" role="textbox" id="textBox2" />
<select class="form-select pe-0 input-group-text" name="comboBox1">
<option value="alt">Alternative Text</option>
<option value="src" selected>Source</option>
</select>
<button type="button" class="btn btn-secondary input-group-text">&#10005;</button>
</div>
</div>
</div>
<div class="row mt-2 mb-2">
<div class="col-2"></div>
<div class="col-5">
<div class="input-group input-group-sm">
<button class="btn btn-primary" type="button">Load Results</button>
<select class="form-select" name="comboBox2">
<option value="table" selected>Table</option>
<option value="csv">CSV</option>
<option value="links">Links</option>
</select>
</div>
</div>
<div class="col-5 px-0">
<div class="pt-2" role="label"></div>
</div>
</div>
</div>
<div class="fw-bold clearfix cursor-pointer" data-bs-toggle="collapse" data-bs-target="#collapsPanel3" aria-expanded="false" aria-controls="collapsPanel3">&#11208;&nbsp;Options</div>
<div class="row pb-2 mb-2 border-bottom collapse" id="collapsPanel3">
<div class="col-sm-2"></div>
<div class="col-sm-10">
<div class="row px-0" role="options"></div>
</div>
</div>
<div class="fw-bold clearfix cursor-pointer" data-bs-toggle="collapse" data-bs-target="#collapsPanel4" aria-expanded="false" aria-controls="collapsPanel4">&#11208;&nbsp;Filters</div>
<div class="row collapse" id="collapsPanel4">
<div class="col-sm-2"></div>
<div class="col-sm-10">
<div class="row px-0" role="filters"></div>
</div>
</div>
<div class="row pb-2 mb-2 border-bottom"></div>
<div class="row pt-2 mb-2">
<div class="col px-0">
<table class="table table-bordered table-hover table-sm table-striped">
<thead></thead>
<tbody></tbody>
</table>
<textarea class="form-control font-monospace text-sm px-1 py-1" rows="16"></textarea>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="nav-disabled" role="tabpanel" aria-labelledby="nav-disabled-tab" tabindex="0">...</div>
</div>
<!-- <p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p> -->
<!-- <div id="body"> -->
<!-- <p>
<button id="button1">Hyperlinks</button>
<button id="button2">Images</button>
</p>
<textarea id="memoBox1" style="width: 100%" rows="16"></textarea>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<div class="table">
<div class="row">
<div class="column-1">Hide Watched Videos</div>
<div class="column-2">
<label class="switch switch-primary">
<input id="switch1" type="checkbox" />
<span class="switch-slider"></span>
</label>
</div>
</div>
<div class="row">
<div class="column-1">Hide Resumeable Videos</div>
<div class="column-2">
<label class="switch switch-primary">
<input id="switch2" type="checkbox" />
<span class="switch-slider"></span>
</label>
</div>
</div>
<div class="row">
<div class="column-1">Hide Removed Videos</div>
<div class="column-2">
<label class="switch switch-primary">
<input id="switch3" type="checkbox" />
<span class="switch-slider"></span>
</label>
</div>
</div>
<div class="row">
<div class="column-1">Hide On Middle-Click</div>
<div class="column-2">
<label class="switch switch-primary">
<input id="switch4" type="checkbox" />
<span class="switch-slider"></span>
</label>
</div>
</div>
<div class="row">
<hr />
</div>
<div class="row">
<div class="column-1">Bypass Shorts</div>
<div class="column-2">
<label class="switch switch-primary">
<input id="switch5" type="checkbox" />
<span class="switch-slider"></span>
</label>
</div>
</div>
<div class="row">
<div class="column-1">Hide Shorts Section</div>
<div class="column-2">
<label class="switch switch-primary">
<input id="switch6" type="checkbox" />
<span class="switch-slider"></span>
</label>
</div>
</div>
</div> -->
<!-- </div> -->
<!-- <script type="module" src="popup1.js"></script> -->
</body>
</html>

7
src/src/popup.js
View File

@ -1,14 +1,17 @@
// src/popup.js
import PopupService from './popup/popup-service.js';
import AContentService from './popup/acontent-service.js';
import ImgContentService from './popup/imgcontent-service.js';
const popupService = new PopupService();
const acontentService = new AContentService(popupService);
const aContentService = new AContentService(popupService);
const imgContentService = new ImgContentService(popupService);
document.addEventListener("DOMContentLoaded", async function(event) {
acontentService.InitialiseComponents();
aContentService.InitialiseComponents();
imgContentService.InitialiseComponents();
});

6
src/src/popup/acontent-service.js
View File

@ -234,7 +234,7 @@ class AContentService extends ContentService {
}
}
// Hide Blank Links
// Hide blank links
if (a.#getCheckBox(15)) {
if (String.isNullOrWhitespace(item.href)) {
continue;
@ -267,7 +267,7 @@ class AContentService extends ContentService {
// Show anchor as html
let text = (a.#getCheckBox(1) ? item.innerHTML : item.innerText);
// Hide Blank Anchors
// Hide blank anchors
if (a.#getCheckBox(14)) {
if (String.isNullOrWhitespace(text)) {
continue;
@ -365,7 +365,7 @@ class AContentService extends ContentService {
return false;
}
const result = a.Container.querySelectorAll("input[id='checkbox" + num + "']");
const result = a.Container.querySelectorAll("input[name='checkbox" + num + "']");
if (result.length <= 0) {
return false;
}

2
src/src/popup/content-service.js
View File

@ -5,7 +5,7 @@ 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 += "<input class=\"form-check-input\" type=\"checkbox\" role=\"switch\" id=\"checkbox" + num + "\" name=\"checkbox" + num + "\" " + (checked ? "checked" : "") + ">";
html += "<label class=\"form-check-label\" for=\"checkbox" + num + "\">" + label + "</label>";
html += "</div>";

444
src/src/popup/imgcontent-service.js Normal file
View File

@ -0,0 +1,444 @@
import '../../../literyz-js/extensions.dist.js';
import ContentService from './content-service.js';
class ImgContentService extends ContentService {
#containerPanel = null;
#popupService = null;
constructor(popupService) {
super();
this.#popupService = popupService;
}
InitialiseComponents() {
const a = this;
a.Clear();
a.#initialiseComponents_Options();
a.#initialiseComponents_Filters();
a.Button1.addEventListener('click', async function (e) {
a.Button2.disabled = true;
a.TextBox1.value = "";
await a.Search();
a.Button2.disabled = false;
});
a.Button2.addEventListener('click', async function (e) {
a.Button2.disabled = true;
await a.Search();
a.Button2.disabled = false;
});
}
#initialiseComponents_Options() {
const a = this;
let col1 = "";
col1 += a.GenerateCheckBox(203, "Sort By Source URL", true);
col1 += a.GenerateCheckBox(204, "Resolve Relative URL", false);
let col2 = "";
col2 += a.GenerateCheckBox(202, "Trim Alternate Text", true);
let html = a.GenerateCols(col1, col2);
a.SetHtml(a.Panel1, html);
}
#initialiseComponents_Filters() {
const a = this;
let col1 = "";
col1 += a.GenerateCheckBox(212, "Hide External Links", false);
col1 += a.GenerateCheckBox(205, "Hide Duplicates", true);
col1 += a.GenerateCheckBox(214, "Hide Blank Alternate Text", false);
col1 += a.GenerateCheckBox(215, "Hide Blank Source URL", true);
let col2 = "";
col2 += a.GenerateCheckBox(206, "Show Alternative Text", true);
col2 += a.GenerateCheckBox(207, "Show Source Set", false);
col2 += a.GenerateCheckBox(208, "Show Image Map", false);
// col2 += a.GenerateCheckBox(209, "Show Width", false);
// col2 += a.GenerateCheckBox(210, "Show Height", false);
col2 += a.GenerateCheckBox(210, "Show Count", false);
let html = a.GenerateCols(col1, col2);
a.SetHtml(a.Panel2, html);
}
get Button1() {
const a = this;
if (a.Container == null) {
return null;
}
return a.Container.querySelectorAll("button")[0];
}
get Button2() {
const a = this;
if (a.Container == null) {
return null;
}
return a.Container.querySelectorAll("button")[1];
}
get Container() {
const a = this;
if (a.#containerPanel == null) {
a.#containerPanel = document.getElementById("nav-images");
}
return a.#containerPanel;
}
get Label1() {
const a = this;
if (a.Container == null) {
return null;
}
return a.Container.querySelectorAll("[role='label']")[0];
}
get MemoBox1() {
const a = this;
if (a.Container == null) {
return null;
}
return a.Container.querySelectorAll("textarea")[0];
}
get Panel1() {
const a = this;
if (a.Container == null) {
return null;
}
return a.Container.querySelectorAll("div[role='options']")[0];
}
get Panel2() {
const a = this;
if (a.Container == null) {
return null;
}
return a.Container.querySelectorAll("div[role='filters']")[0];
}
get Table1() {
const a = this;
if (a.Container == null) {
return null;
}
return a.Container.querySelectorAll("table")[0];
}
get TextBox1() {
const a = this;
if (a.Container == null) {
return null;
}
return a.Container.querySelectorAll("input[role='textbox']")[0];
}
Clear() {
const a = this;
a.Table1.style.display = 'none';
a.MemoBox1.style.display = 'none';
a.SetHtml(a.Panel1, "");
a.SetHtml(a.Panel2, "");
}
async Search() {
const a = this;
a.Label1.innerText = "";
a.Table1.style.display = 'none';
a.MemoBox1.style.display = 'none';
const result = await a.#popupService.GetImages();
const totalCount = result.length;
const newResults = await a.#filterResult(result.copy());
if (newResults.length == totalCount) {
a.Label1.innerText = "Showing " + totalCount + " result" + (totalCount == 1 ? "" : "s");
} else {
a.Label1.innerText = "Showing " + newResults.length + " of " + totalCount + " result" + (totalCount == 1 ? "" : "s");
}
switch (a.#getComboBox(2)) {
case "table":
a.#renderTable(newResults);
break;
case "csv":
a.#renderCSV(newResults);
break;
case "links":
a.#renderLinks(newResults);
break;
default:
break;
}
}
async #filterResult(items) {
const a = this;
const currentUrl = await a.#popupService.GetLocation();
const currentHostname = (new URL(currentUrl)).hostname;
let result = [];
for (let i=0; i<items.length; i++) {
const item = items[i];
// Hide source
if (a.#getCheckBox(215)) {
if (String.isNullOrWhitespace(item.src)) {
continue;
}
}
const absoluteUrl = new URL(item.src, currentUrl);
// Hide external links
if (a.#getCheckBox(212)) {
if (currentHostname != absoluteUrl.hostname) {
continue;
}
}
// Hide blank alternative text
if (a.#getCheckBox(214)) {
if (String.isNullOrWhitespace(item.alt)) {
continue;
}
}
// Resolve source
const src = (a.#getCheckBox(204) ? absoluteUrl.href : item.src);
const alt = (a.#getCheckBox(202) ? item.alt.trim() : item.alt);
// Search term
if (!String.isNullOrWhitespace(a.TextBox1.value)) {
if (a.#getComboBox(201) == "alt") {
if (!alt.toLowerCase().includes(a.TextBox1.value.toLowerCase())) {
continue;
}
} else {
if (!src.toLowerCase().includes(a.TextBox1.value.toLowerCase())) {
continue;
}
}
}
result.push({
src: src,
alt: (a.#getCheckBox(206) ? alt : ""),
srcset: (a.#getCheckBox(207) ? item.srcset : ""),
usemap: (a.#getCheckBox(208) ? item.usemap : ""),
occurrence: ""
});
}
// Show occurrence
if (a.#getCheckBox(210)) {
// 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(205)) {
result = result.distinct();
}
// Sort by source
if (a.#getCheckBox(203)) {
result = result.orderBy("src");
}
return result;
}
#generateTHeader() {
const a = this;
const columns = [
{ id: 206, name: "Alternative Text" },
{ id: 207, name: "Source Set" },
{ id: 208, name: "Image Map" },
{ id: 210, name: "Count" }
];
let html = "";
html += "<th>Source</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.Container == null) {
return false;
}
const result = a.Container.querySelectorAll("input[name='checkbox" + num + "']");
if (result.length <= 0) {
return false;
}
return result[0].checked;
}
#getComboBox(num) {
const a = this;
if (a.Container == null) {
return "";
}
const result = a.Container.querySelectorAll("select[name='comboBox" + num + "']");
if (result.length <= 0) {
return "";
}
return result[0].value;
}
#renderTable(results) {
const a = this;
const thead = a.Table1.querySelectorAll("thead")[0];
const tbody = a.Table1.querySelectorAll("tbody")[0];
thead.innerHTML = "";
tbody.innerHTML = "";
a.Table1.style.display = 'table';
// Write thead
thead.innerHTML = "<tr>" + a.#generateTHeader() + "</tr>";
// Write tbody
for (let i=0; i<results.length; i++) {
const item = results[i];
let row = [ item.src ];
if (a.#getCheckBox(206)) {
row.push(item.alt);
}
if (a.#getCheckBox(207)) {
row.push(item.srcset);
}
if (a.#getCheckBox(208)) {
row.push(item.usemap);
}
if (a.#getCheckBox(210)) {
row.push(item.occurrence);
}
tbody.innerHTML += a.GenerateRow(row);
}
}
#renderCSV(results) {
const a = this;
a.MemoBox1.value = "";
a.MemoBox1.style.display = 'inline-block';
for (let i=0; i<results.length; i++) {
const item = results[i];
let row = [ item.src ];
if (a.#getCheckBox(206)) {
row.push(item.alt);
}
if (a.#getCheckBox(207)) {
row.push(item.srcset);
}
if (a.#getCheckBox(208)) {
row.push(item.usemap);
}
if (a.#getCheckBox(210)) {
row.push(item.occurrence);
}
a.MemoBox1.value += a.GenerateCSVLine("\t", row);
a.MemoBox1.value += "\n";
}
}
#renderLinks(results) {
const a = this;
a.MemoBox1.value = "";
a.MemoBox1.style.display = 'inline-block';
for (let i=0; i<results.length; i++) {
const item = results[i];
a.MemoBox1.value += a.GenerateCSVLine("\t", [ item.src ]);
a.MemoBox1.value += "\n";
}
}
}
export default ImgContentService;

14
src/src/popup/popup-service.js
View File

@ -11,10 +11,20 @@ class PopupService {
async GetHyperlinks() {
const a = this;
const baseUrl = await a.GetLocation();
return new Promise(function(resolve) {
a.SendMessage("GetNodes", async function(payload) {
a.SendMessage("GetHyperlinkNodes", async function(payload) {
resolve(payload.copy());
});
});
}
async GetImages() {
const a = this;
return new Promise(function(resolve) {
a.SendMessage("GetImageNodes", async function(payload) {
resolve(payload.copy());
});
});