v2.1 Update

edizbaha · Aug 18, 2024 · 02c0dc1 · 02c0dc1
1 parent ab88f35
commit 02c0dc1
Show file tree

Hide file tree

Showing 9 changed files with 311 additions and 127 deletions.
diff --git a/README.md b/README.md
@@ -1,7 +1,7 @@
 <img src="./icon.png" height="128">
 
 # status.lol bookmarklet
-> ***Version: 1.3***
+> ***Version: 2.1***
 
 *A simple bookmarklet extension for [status.lol](https://status.lol).*
 

diff --git a/background.js b/background.js
@@ -1,45 +1,78 @@
-// Fixed the issue of opening options.html in Chrome update
+function checkForUpdates() {
+    fetch('https://ediz.paste.lol/status-bookmarklet/raw')
+        .then(response => response.json())
+        .then(data => {
+            const currentVersion = chrome.runtime.getManifest().version;
+            const newVersion = data.version;
+
+            if (compareVersions(currentVersion, newVersion) < 0) {
+                const changelogLines = data.changelog.split('\n').filter(line => line.trim() !== '');
+
+                chrome.storage.local.set({
+                    version: newVersion,
+                    changelog: changelogLines,
+                    url: data.url
+                }, () => {
+                    chrome.tabs.create({ url: chrome.runtime.getURL('update.html') });
+                });
+            }
+        })
+        .catch(error => console.error('Update check failed:', error));
+}
+
+function compareVersions(v1, v2) {
+    const v1Parts = v1.split('.').map(Number);
+    const v2Parts = v2.split('.').map(Number);
+
+    while (v1Parts.length < v2Parts.length) v1Parts.push(0);
+    while (v2Parts.length < v1Parts.length) v2Parts.push(0);
+
+    for (let i = 0; i < v1Parts.length; i++) {
+        if (v1Parts[i] > v2Parts[i]) return 1;
+        if (v1Parts[i] < v2Parts[i]) return -1;
+    }
+    return 0;
+}
+
+
+
 chrome.runtime.onInstalled.addListener((details) => {
-    // Check if the reason for onInstalled event is "install" or "update"
     if (details.reason === "install" || details.reason === "update") {
-        // Open the options page of the extension
-        chrome.runtime.openOptionsPage();
+        checkForUpdates();
     }
-});
 
-// Create a context menu item with id "myContextMenuItem" and title "status.lol Bookmarklet"
-// This context menu item will be shown when user right-clicks on a page, selection, or link
-chrome.runtime.onInstalled.addListener(() => {
     chrome.contextMenus.create({
         id: "myContextMenuItem",
         title: "status.lol Bookmarklet",
         contexts: ["page", "selection", "link"]
     });
 });
 
-// Add a listener for clicks on the "myContextMenuItem" context menu item
-// When the context menu item is clicked, it opens a new popup window with a link to status.lol
+chrome.runtime.onStartup.addListener(() => {
+    checkForUpdates();
+});
+
 chrome.contextMenus.onClicked.addListener((info, tab) => {
     if (info.menuItemId === "myContextMenuItem") {
         chrome.storage.sync.get('address', (data) => {
             const address = data.address || 'foobar';
             chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
-                const title = encodeURIComponent(tabs[0].title);
-                const url = encodeURIComponent(tabs[0].url);
-                const link = `https://home.omg.lol/address/${address}/statuslog-bookmarklet?title=${title}&url=${url}`;
-                chrome.windows.create({
-                    url: link,
-                    type: "popup",
-                    width: 700,
-                    height: 670,
-                });
+                if (tabs.length > 0) {
+                    const title = encodeURIComponent(tabs[0].title);
+                    const url = encodeURIComponent(tabs[0].url);
+                    const link = `https://home.omg.lol/address/${address}/statuslog-bookmarklet?title=${title}&url=${url}`;
+                    chrome.windows.create({
+                        url: link,
+                        type: "popup",
+                        width: 700,
+                        height: 670,
+                    });
+                }
             });
         });
     }
 });
 
-// Add a listener for clicks on the extension's action button
-// When the button is clicked, it opens a new popup window with a link to status.lol
 chrome.action.onClicked.addListener((tab) => {
     chrome.storage.sync.get('address', (data) => {
         const address = data.address || 'foobar';
@@ -53,4 +86,4 @@ chrome.action.onClicked.addListener((tab) => {
             height: 670,
         });
     });
-});
+});
diff --git a/emoji.js b/emoji.js
@@ -0,0 +1,23 @@
+(function() {
+    'use strict';
+
+    function updateEmoji() {
+        chrome.storage.sync.get('emoji', (data) => {
+            const emoji = data.emoji || '👀';
+
+            fetch('https://api.omg.lol/statuslog/emoji/' + encodeURIComponent(emoji))
+                .then((response) => response.json())
+                .then((data) => {
+                    let emojiImg = document.getElementById('emoji_img');
+                    let glyph = document.getElementById('glyph');
+                    if (emojiImg && glyph) {
+                        emojiImg.setAttribute('src', data.response.img);
+                        glyph.value = data.response.emoji;
+                    }
+                })
+                .catch((error) => console.error('API request error:', error));
+        });
+    }
+
+    window.addEventListener('load', updateEmoji);
+})();
diff --git a/firefox-manifest.json b/firefox-manifest.json
@@ -1,10 +1,9 @@
 {
     "manifest_version": 3,
     "name": "status.lol Bookmarklet",
-    "version": "1.3",
+    "version": "2.1",
     "description": "A simple bookmarklet extension for status.lol.",
-    "icons":
-    {
+    "icons": {
         "512": "icon.png"
     },
     "host_permissions": [
@@ -15,25 +14,26 @@
         "storage",
         "contextMenus"
     ],
-    "background":
-    {
-        "scripts": ["background.js"]
+    "background": {
+        "service_worker": "background.js"
     },
-    "action":
-    {
+    "action": {
         "default_icon": "icon.png",
         "default_title": "status.lol Bookmarklet"
     },
-    "options_ui":
-    {
+    "options_ui": {
         "page": "options.html",
         "open_in_tab": true
     },
-    "browser_specific_settings":
-    {
-        "gecko":
-        {
+    "browser_specific_settings": {
+        "gecko": {
             "id": "[email protected]"
         }
-    }
-}
+    },
+    "content_scripts": [
+        {
+            "matches": ["https://home.omg.lol/address/*/statuslog-bookmarklet*"],
+            "js": ["emoji.js"]
+        }
+    ]
+}
diff --git a/manifest.json b/manifest.json
@@ -1,32 +1,34 @@
 {
-    "manifest_version": 3,
-    "name": "status.lol Bookmarklet",
-    "version": "1.3",
-    "description": "A simple bookmarklet extension for status.lol.",
-    "icons":
+  "manifest_version": 3,
+  "name": "status.lol Bookmarklet",
+  "version": "2.1",
+  "description": "A simple bookmarklet extension for status.lol.",
+  "icons": {
+    "512": "icon.png"
+  },
+  "host_permissions": [
+    "https://home.omg.lol/*"
+  ],
+  "permissions": [
+    "activeTab",
+    "storage",
+    "contextMenus"
+  ],
+  "background": {
+    "service_worker": "background.js"
+  },
+  "action": {
+    "default_icon": "icon.png",
+    "default_title": "status.lol Bookmarklet"
+  },
+  "options_ui": {
+    "page": "options.html",
+    "open_in_tab": true
+  },
+  "content_scripts": [
     {
-        "512": "icon.png"
-    },
-    "host_permissions": [
-        "https://home.omg.lol/*"
-    ],
-    "permissions": [
-        "activeTab",
-        "storage",
-        "contextMenus"
-    ],
-    "background":
-    {
-        "service_worker": "background.js"
-    },
-    "action":
-    {
-        "default_icon": "icon.png",
-        "default_title": "status.lol Bookmarklet"
-    },
-    "options_ui":
-    {
-        "page": "options.html",
-        "open_in_tab": true
+      "matches": ["https://home.omg.lol/address/*/statuslog-bookmarklet*"],
+      "js": ["emoji.js"]
     }
-}
+  ]
+}
diff --git a/options.html b/options.html
@@ -1,42 +1,51 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <title>status.lol Bookmarklet - Options</title>
-    <link rel="stylesheet" href="https://cdn.cache.lol/css/style.css?v=2023-01-29">
-  </head>
-  <style>
-    .logotype {
-      font-family: 'VC Honey Black Banner';
-    }
-
-    body {
-      background: var(--gray-8) !important;
-      color: var(--gray-1) !important;
-    }
-
-    main .container,
-    main .box {
-      background: var(--gray-9);
-    }
-  </style>
-  <main>
-    <div style="margin-bottom: .5em; font-size: 2em;" class="logotype">
-      <span class="blue-4-fg">status</span><span class="blue-7-fg">.</span><span class="blue-4-fg">lol Bookmarklet</span>
-      <img src="https://static.omg.lol/img/blue-prami.svg" style="width: 1.3em; margin-left: .2em; margin-bottom: -.3em;" alt="Prami">
+<head>
+  <title>status.lol Bookmarklet - Options</title>
+  <link rel="stylesheet" href="https://cdn.cache.lol/css/style.css?v=2023-01-29">
+</head>
+<style>
+  .logotype {
+    font-family: 'VC Honey Black Banner';
+  }
+  body {
+    background: var(--gray-8) !important;
+    color: var(--gray-1) !important;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+  }
+  main .container,
+  main .box {
+    background: var(--gray-9);
+  }
+</style>
+<main>
+  <div style="margin-bottom: .5em; font-size: 2em;" class="logotype">
+    <span class="blue-4-fg">status</span><span class="blue-7-fg">.</span><span class="blue-4-fg">lol Bookmarklet</span>
+    <img src="https://static.omg.lol/img/blue-prami.svg" style="width: 1.3em; margin-left: .2em; margin-bottom: -.3em;" alt="Prami">
+  </div>
+  <div class="flex">
+    <div class="box basis" style="--basis: 20em;">
+      <form>
+        <p>
+          <label for="address">omg.lol Address</label>
+          <input name="address" id="address" type="text" placeholder="foobar" spellcheck="false" autocapitalize="none" autocomplete="off">
+        </p>
+        <p>
+          <label for="emoji">Default Emoji</label>
+          <input name="emoji" id="emoji" type="text" placeholder="&#x1F440;" spellcheck="false" autocapitalize="none" autocomplete="off">
+        </p>
+        <button type="button" class="blue-7-bg white-fg" id="saveButton">
+          <i class="fa-solid fa-floppy-disk"></i> Save
+        </button>
+      </form>
     </div>
-    <div class="flex">
-      <div class="box basis" style="--basis: 20em;">
-        <form>
-          <p>
-            <label for="address">omg.lol Address</label>
-            <input name="address" id="address" type="text" placeholder="foobar" spellcheck="false" autocapitalize="none" autocomplete="off">
-          </p>
-          <button class="blue-7-bg white-fg" id="saveButton">
-            <i class="fa-solid fa-floppy-disk"></i> Save </button>
-        </form>
-      </div>
-    </div>
-  </main>
-  <script src="options.js"></script>
-  </body>
+  </div>
+</main>
+<script src="options.js"></script>
+</body>
 </html>
diff --git a/options.js b/options.js
@@ -1,33 +1,27 @@
 document.addEventListener("DOMContentLoaded", () => {
-  // Get the saved address from storage
-  chrome.storage.sync.get('address', (data) => {
-    // Get the input element for the address
+  chrome.storage.sync.get(['address', 'emoji'], (data) => {
     const addressInput = document.getElementById('address');
-    // Get the saved address from storage, or set it to an empty string if it doesn't exist
-    const savedaddress = data.address || '';
-    // Set the value of the address input element to the saved address
-    addressInput.value = savedaddress;
+    const emojiInput = document.getElementById('emoji');
+    const savedAddress = data.address || '';
+    const savedEmoji = data.emoji || '';
+    addressInput.value = savedAddress;
+    emojiInput.value = savedEmoji;
   });
 
-  // Save the address to storage when the Save button is clicked
   const saveButton = document.getElementById('saveButton');
   saveButton.addEventListener('click', () => {
-    // Get the input element for the address
     const addressInput = document.getElementById('address');
-    // Get the new address entered by the user, and remove any leading/trailing white space
-    const newaddress = addressInput.value.trim();
-    // Check if the new address is empty
-    if (newaddress === '') {
-      // If it is, display an alert message and exit the function
+    const emojiInput = document.getElementById('emoji');
+    const newAddress = addressInput.value.trim();
+    const newEmoji = emojiInput.value.trim();
+    if (newAddress === '') {
       alert('Please enter a valid address');
       return;
     }
-    // Save the new address to storage
-    chrome.storage.sync.set({ 'address': newaddress }, () => {
-      // Log a message to the console indicating that the address has been saved
-      console.log(`Address saved: ${newaddress}`);
-      // Display an alert message to the user indicating that the address has been saved
-      alert(`Address saved: ${newaddress}`);
+    chrome.storage.sync.set({ 'address': newAddress, 'emoji': newEmoji }, () => {
+      console.log(`Address saved: ${newAddress}`);
+      console.log(`Emoji saved: ${newEmoji}`);
+      alert(`Address and emoji saved: ${newAddress} - ${newEmoji}`);
     });
   });
-});
+});