chrome-extension: add page for link list

Signed-off-by: Victor Login <batazor111@gmail.com>
shortlink-org · Dec 15, 2022 · e226dc4 · e226dc4
1 parent 9a108b2
commit e226dc4
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 9 deletions.
diff --git a/internal/extension/chrome-extension/links.html b/internal/extension/chrome-extension/links.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>ShortLink</title>
+    <meta content="width=device-width, initial-scale=1.0" name="viewport">
+    <link href="https://cdn.jsdelivr.net/npm/daisyui@2.42.1/dist/full.css" rel="stylesheet" type="text/css"/>
+</head>
+
+<body>
+<div class="card w-96 bg-base-100 shadow-xl">
+    <header class="card-body items-center text-center">
+        <h2 class="card-title">ShortLink</h2>
+
+        <script src="/page.js"></script>
+</div>
+</div>
+
+<script src="popup.js"></script>
+</body>
+</html>
diff --git a/internal/extension/chrome-extension/page.js b/internal/extension/chrome-extension/page.js
@@ -0,0 +1,24 @@
+chrome.runtime.onMessage.addListener(function (message, sender, sendResponse) {
+    addURLToContainer(message);
+    sendResponse("OK");
+});
+
+function addURLToContainer(links) {
+    // Create the list
+    var list = document.createElement("ul");
+
+    // Loop through the array of items
+    for (var i = 0; i < links.length; i++) {
+        // Create a list item for each item in the array
+        var item = document.createElement("li");
+
+        // Set the item's inner HTML to include the link and text
+        item.innerHTML = "<a href='" + links[i].href + "'>" + links[i].text + "</a>";
+
+        // Add the item to the list
+        list.appendChild(item);
+    }
+
+    // Add the list to the page
+    document.body.appendChild(list);
+}
diff --git a/internal/extension/chrome-extension/popup.js b/internal/extension/chrome-extension/popup.js
@@ -23,7 +23,7 @@ grabBtn.addEventListener("click",() => {
  */
 function grabURL() {
     const links = document.querySelectorAll("a")
-    return Array.from(links).map(link => ({href: link.href, text: link.innerText}))
+    return Array.from(links).map(link => ({href: link.href, text: link.text}))
 }
 
 function onResult(frames) {
@@ -33,13 +33,21 @@ function onResult(frames) {
     }
 
     const links = frames.map(frame => frame.result)
-                        .reduce((r1,r2)=>r1.concat(r2))
+        .reduce((r1, r2) => r1.concat(r2))
 
-    window.navigator.clipboard
-        .writeText(links.join("\n"))
-        .then(() => {
-            alert("Links copied to clipboard")
-            window.close()
-        })
-        .catch(() => alert("Could not copy links to clipboard"))
+    openURLPage(links)
+}
+
+function openURLPage(links) {
+    chrome.tabs.create({
+        url: chrome.runtime.getURL("links.html"),
+        active: false,
+    }, (tab) => {
+        setTimeout(() => {
+            chrome.tabs.sendMessage(tab.id, links, (resp) => {
+                // Wait for the tab to finish loading
+                chrome.tabs.update(tab.id, {active: true});
+            })
+        }, 500)
+    })
 }