big update

.gitignore

@@ -0,0 +1,2 @@
+*.png
+config.js

config.js.example

@@ -0,0 +1,6 @@
+var config = {
+  shlinkUrl: 'https://example.com',
+  shlinkOutUrl : 'https://example.com',
+  shlinkAppUrl : 'https://app.shlink.io/server/xxxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx'
+  shlinkApiKey: 'xxxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx'
+}

manifest.json

@@ -7,7 +7,7 @@
       "service_worker": "background.js"
     },
     "action": {
-      "default_icon": "assets/icon.png",
+      "default_icon": "assets/my-icon.png",
       "default_title": "redirect",
       "default_popup": "popup.html"
     },

popup-func.js

@@ -1,35 +1,7 @@
-const searchButton = document.getElementById('searchButton');
-if (searchButton) {
-    searchButton.addEventListener('click', () => {
-        searchRedirect();
-    })
-}
-const newButton = document.getElementById('newButton');
-if (newButton) {
-    newButton.addEventListener('click', () => {
-        newRedirect();
-    })
-}
-
-function searchRedirect() {
-    const request = new XMLHttpRequest();
-    const url = 'https://url.example.com/rest/v3/short-urls';
-    request.open('GET', url);
-    request.setRequestHeader('X-Api-Key', 'apikeyhere');
-    request.send();
-    request.onload = (e) => {
-        var shortUrls = request.response
-        chrome.tabs.query({active: true, lastFocusedWindow: true}, tabs => {
-            let url = tabs[0].url;
-            alert(shortUrls)
-        });
-    }
-}
-
 function newRedirect () {
     chrome.tabs.query({active: true, lastFocusedWindow: true}, tabs => {
         let currentUrl = tabs[0].url;
-        const url = 'https://url.example.com/rest/v3/short-urls';
+        const url = `${config.shlinkUrl}/rest/v3/short-urls`;
         let sendData = {
             "longUrl": currentUrl,
             "tags": ["Added by BOTv1"]
@@ -37,12 +9,15 @@ function newRedirect() {
         const request = new XMLHttpRequest();
         request.open('POST', url);
         request.setRequestHeader('accept', 'application/json');
-        request.setRequestHeader('X-Api-Key', 'apikeyhere');
+        request.setRequestHeader('X-Api-Key', `${config.shlinkApiKey}`);
         request.setRequestHeader('Content-type', 'application/json');
         request.send(JSON.stringify(sendData));
         request.onload = (e) => {
-            var responseData = request.response;
-            document.getElementById("p1link").innerHTML = responseData;
+            var shortUrlOut = document.getElementById("output-shortUrl")
+            var responseData = JSON.parse(request.response);
+            shortUrlOut.value = `${config.shlinkOutUrl}/${responseData.shortCode}`;
+            var shlinkAppBtnRdUrl = `${config.shlinkAppUrl}/short-code/${responseData.shortCode}/visits`;
+            document.getElementById("p1qr-code").src = `${config.shlinkUrl}/${responseData.shortCode}/qr-code?size=160&format=png&margin=2&errorCorrection=L`;
         }
     });
 }

popup.css

@@ -1,5 +1,5 @@
 .container {
-    width: 360px;
+  width: 420px;
   color: #314d3e;
 }
   

popup.html

@@ -1,10 +1,13 @@
 <link href="popup.css" rel="stylesheet" type="text/css" />
-<script type="module" src="popup-func.js"></script>
-
+<script src="popup-func.js"></script>
 <div class="container">
   <div>
-    <div class="title">redirect</div>
-    <button id="newButton">New</button><button id="searchButton">Search</button>
-    <p id="p1link">[click new to generate a link]</p>
+    <div class="title">Redirect Extention</div>
+    <button id="newButton">New</button>
+    <input id="output-shortUrl" type="text" disabled>
+    <button id="copyShortUrl-btn">Copy ShortUrl</button> <button id="openShlinkApp-btn">Open App</button>
+    <img id="p1qr-code" src="">
   </div>
 </div>
+<script src="config.js"></script>
+<script src="popup.js"></script>

popup.js

@@ -0,0 +1,36 @@
+var shlinkAppBtnRdUrl = `${config.shlinkAppUrl}`;
+
+const searchButton = document.getElementById('searchButton');
+if (searchButton) {
+    searchButton.addEventListener('click', () => {
+        searchRedirect();
+    });
+}
+
+const newButton = document.getElementById('newButton');
+if (newButton) {
+    newButton.addEventListener('click', () => {
+        newRedirect();
+    });
+}
+
+const copyShortUrlBtn = document.getElementById('copyShortUrl-btn');
+if (copyShortUrlBtn) {
+    copyShortUrlBtn.addEventListener('click', () => {
+        copyShortUrl();
+    });
+}
+
+const openShlinkAppBtn = document.getElementById('openShlinkApp-btn');
+if (openShlinkAppBtn) {
+    copyShortUrlBtn.addEventListener('click', () => {
+        chrome.tabs.create({url:shlinkAppBtnRdUrl});
+    });
+}
+
+function copyShortUrl () {
+    var shortUrlOut = document.getElementById("output-shortUrl");
+    shortUrlOut.select();
+    shortUrlOut.setSelectionRange(0, 99999);
+    navigator.clipboard.writeText(shortUrlOut.value);
+}