Major update to UI to mirror the web client, and created options page…

… to automatically link created links to the set passphrase
brainpolo · May 12, 2023 · 0ddcdaa · 0ddcdaa
1 parent 5b9bcba
commit 0ddcdaa
Show file tree

Hide file tree

Showing 8 changed files with 143 additions and 189 deletions.
diff --git a/background.js b/background.js
@@ -1,3 +1,30 @@
+chrome.contextMenus.create({
+  id: "link-selector",
+  title: "open link routed through pli.sh",
+  contexts: ["link"]
+});
+
+
+
+
+chrome.contextMenus.onClicked.addListener(function(info, tab) {
+  if (info.menuItemId === "link-selector") {
+    (async () => {
+      try {
+        let url = await fetchData(info.linkUrl, 1);  // link/mode
+        console.log("Routed link: " + url);
+        if (!/^https?:\/\//i.test(url)) {
+          url = 'https://' + url;
+        }
+        chrome.tabs.create({ url: url });
+      } catch (error) {
+        console.error(`Failed to fetch data: ${error}`);
+      }
+    })();
+  }  
+});
+
+
 async function copyToClipboard(text) {
   try {
     await navigator.clipboard.writeText(text);
@@ -8,15 +35,29 @@ async function copyToClipboard(text) {
   }
 }
 
+function getPassphrase() {
+  return new Promise((resolve, reject) => {
+    chrome.storage.local.get('passphrase', (data) => {
+      if (chrome.runtime.lastError) {
+        return reject(chrome.runtime.lastError);
+      }
+      resolve(data.passphrase);
+    });
+  });
+}
+
+
 async function fetchData(tabUrl, mode) {
-    const apiEndpoint = 'https://pli.sh/ify';
+  const apiEndpoint = 'https://pli.sh/ify';
+  let passphrase = await getPassphrase();
 
   try {
     const requestData = {
         url: tabUrl,
-        mode: mode
+        mode: mode,
+        passphrase: passphrase
     };
-
+    console.log("Request data: " + JSON.stringify(requestData))
     const response = await fetch(apiEndpoint, {
       method: 'POST',
       headers: {
@@ -34,6 +75,7 @@ async function fetchData(tabUrl, mode) {
   }
 }
 
+
 chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
   fetchData(request.tabUrl, request.mode)
     .then((data) => {
@@ -44,5 +86,5 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
       sendResponse({ success: false });
     });
 
-  return true; // Keep the message channel open until sendResponse is called
+  return true;
 });
diff --git a/css/popup.css b/css/popup.css
@@ -1,119 +1,52 @@
-/* ! Base Body Styles */
 body {
-width: 300px;
-height: 50px;
+width: 200px;
+height: 185px;
 margin: 0;
 padding: 0;
-
-text-align: center;
-
-border-radius: 10px;
-
-}
-
-
-button {
-  border: none;
-  background-color: #333333;
 }
 
 .mode-button.active {
     transform: scale(1.25);
-
     border-radius: 5px;
     background-color: #007bff;
 }
 
-body.light-theme,
-body:not(.dark-theme) {
-  color: #000000;
-  background-color: #ffffff;
-}
-
-button.light-theme,
-button:not(.dark-theme) {
-  color: #000000;
-  background-color: #f0f0f0;
-}
-
-
-body.dark-theme {
-  color: #ffffff;
-  background-color: #1a1a1a;
-}
-
-button.dark-theme {
-  color: #ffffff;
-  background-color: #333333;
-}
-
-
-.popup-title {
-    position: absolute;
-    top: 0;
-    left: 0;
-
-    margin: 10px;
-    padding: 5px;
-
-    color: #5046e5;
-}
-.popup-title a {
-    color: #5046e5;
-}
-
-
-#color-theme-container {
-    position: absolute;
-    top : 0;
-    right: 0;
-
-    display: flex;
-
-    margin: 10px;
-    padding: 10px;
-}
-
-#color-theme-container button {
-        cursor: pointer;
-}
-
-
 #mode-container {
     display: flex;
+    flex-direction: column;
     align-items: center;
     justify-content: center;
-
-    margin: 10px;
-    padding: 10px;
-
+    margin: 5px;
+    padding: 5px;
+    background-color: #5046e5;;
+    border-radius: 10px;
 }
 
-
 #mode-container button {
-    width: 85px;
-    height: auto;
+    width: 75px;
+    height: 75px;
     margin: 5px;
-    padding: 0;
+    padding: 5px;
+    font-size: small;
 
     cursor: pointer;
-    text-align: center;
+    align-self: center;
+    color: white;
+    background-color: #5046e5;;
 
+    border: none;
     border-radius: 5px;
+    outline: silver solid 1px;
     box-shadow: inset 0 0 6px #b0b0b0;
 }
 
 
 #mode-container button:hover {
     transition: transform 0.15s ease-in-out;
-    transform: scale(1.15);
-
+    transform: scale(1.1);
     box-shadow: 0 0 6px #000000;
-
-
 }
 
-
 #successMessage {
 display: none;
 

diff --git a/manifest.json b/manifest.json
@@ -9,15 +9,27 @@
     "48": "images/icon-48.png",
     "128": "images/icon-128.png"
   },
+  "options_page": "options.html",
   "action": {
     "default_popup": "popup.html",
     "default_title": "plish",
     "default_icon": "images/icon-48.png"
   },
   "permissions": [
-    "activeTab"
+    "activeTab",
+    "storage",
+    "contextMenus"
   ],
   "background": {
     "service_worker": "background.js"
+  },
+  "commands": {
+    "triggerExtension": {
+      "description": "Trigger the extension",
+      "suggested_key": {
+        "default": "Ctrl+Shift+Y",
+        "mac": "Command+Shift+Y"
+      }
+    }
   }
 }
diff --git a/options.html b/options.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+
+<body>
+    <h1>pli.sh options</h1>
+    <hr/>
+    <br/>
+    <form id="options-form">
+      <label for="passphrase">Your passphrase (you can change this as frequently as you like, passphrases are not linked to your identity)</label><br>
+      <input type="text" id="passphrase" name="passphrase"><br>
+      <input type="submit" value="Save">
+    </form>
+
+<script src="options.js"></script>
+</body>
+
+</html>
diff --git a/options.js b/options.js
@@ -0,0 +1,16 @@
+document.addEventListener('DOMContentLoaded', restoreOptions);
+
+document.querySelector('#options-form').addEventListener('submit', saveOptions);
+
+function saveOptions(e) {
+  e.preventDefault();
+  chrome.storage.local.set({
+    passphrase: document.querySelector('#passphrase').value
+  });
+}
+
+function restoreOptions() {
+  chrome.storage.local.get('passphrase', (data) => {
+    document.querySelector('#passphrase').value = data.passphrase || '';
+  });
+}
diff --git a/popup.html b/popup.html
@@ -7,37 +7,37 @@
 
   <body>
 
-    <h2 class="popup-title">
-        <a href="https://pli.sh" target="_blank" rel="noopener noreferrer"
-        >pli.sh/ify</a> page
-    </h2>
-    <div id="color-theme-container">
-        <button id="color_mode1" class="mode-button" value="1">🔅</button>
-        <button id="color_mode2" class="mode-button" value="2">🌚</button>
-        <button id="color_mode3" class="mode-button" value="3">⚡️</button>
-    </div>
-    <br/>
-    <br/>
+
+
     <div id="successMessage">✅ copied to clipboard!</div>
+
+    <main>
     <div id="mode-container">
-        <button id="mode1" value="1" style="background-color: #17a34a">
-            <b>provisional</b>
-            <br/>
-            2h no-use
-        </button>
-        <button id="mode2" value="2" style="background-color: #3c82f6">
-            <b>planned</b>
-            <br/>
-            2d no-use
-        </button>
-        <button id="mode3" value="3" style="background-color: #6b7280">
-            <b>persistent</b>
-            <br/>
-            2w no-use
-        </button>
+        <div>
+            <button class="link-mode-button" value="0">
+                <b>prompt</b><br/>
+                ♽ 1h
+            </button>
+            <button  class="link-mode-button" value="1">
+                <b>provisional</b><br/>
+                ♽ 2d
+            </button>
+        </div>
+        <div>
+
+            <button class="link-mode-button" value="2">
+                <b>planned</b><br/>
+                ♽ 2w
+            </button>
+            <button class="link-mode-button" value="3">
+                <b>persistent</b><br/>
+                ♽ 6m
+            </button>
+        </div>
     </div>
+</main>
 
 <script src="popup.js"></script>
-<script src="theme.js"></script>
-  </body>
+</body>
+
 </html>
diff --git a/popup.js b/popup.js
@@ -44,11 +44,7 @@ function sendMessage(tabUrl, mode) {
     const queryOptions = { active: true, currentWindow: true };
     const [tab] = await chrome.tabs.query(queryOptions);
     const tabUrl = tab.url;
-
-    const mode1Button = document.getElementById('mode1');
-    const mode2Button = document.getElementById('mode2');
-    const mode3Button = document.getElementById('mode3');
-
+
    const handleClick = async (event) => {
     const mode = event.target.value;
     try {
@@ -64,7 +60,9 @@ function sendMessage(tabUrl, mode) {
     }
 };
 
-    mode1Button.addEventListener('click', (event) => handleClick(event));
-    mode2Button.addEventListener('click', (event) => handleClick(event));
-    mode3Button.addEventListener('click', (event) => handleClick(event));
+const modeButtons = document.querySelectorAll('.link-mode-button');
+  modeButtons.forEach((button) => {
+    button.addEventListener('click', (event) => handleClick(event));
+  });
+
 })();