Added image nodes support

content.js

@@ -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;
+  }
+
 }
 
 

popup.html

@@ -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>

src/src/popup.js

@@ -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();
 
 });

src/src/popup/acontent-service.js

@@ -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;
         }

src/src/popup/content-service.js

@@ -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>";
 

src/src/popup/imgcontent-service.js

@@ -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;

src/src/popup/popup-service.js

@@ -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());
             });
         });