⚡ feat(version): add version to popup

Author: aashutoshrathi

README.md

@@ -11,6 +11,28 @@ Unstable internet connection is already a pain, when you have to access some rem
 
 This extension will help you to update your IP address in the access list with just one click.
 
+## Installation
+
+[link-chrome]: https://chrome.google.com/webstore/detail/mongo-ip-updater/cklilnpehpogpeoeklbefjbjafcnlofj 'Version published on Chrome Web Store'
+
+[<img src="https://raw.githubusercontent.com/alrra/browser-logos/90fdf03c/src/chrome/chrome.svg" width="48" alt="Chrome" valign="middle">][link-chrome] [<img valign="middle" src="https://img.shields.io/chrome-web-store/v/cklilnpehpogpeoeklbefjbjafcnlofj.svg?label=%20">][link-chrome] and other Chromium browsers
+
+
+### Development
+
+- Get it locally -
+
+  ```sh
+  $ git clone https://github.com/aashutoshrathi/mongo-ip-updater.git
+  ```
+
+  **OR**
+
+  Download the latest version here: [Mongo IP Updater ✨](https://github.com/aashutoshrathi/mongo-ip-updater/archive/master.zip)
+
+- Go to `chrome://extensions/` & enable Developer Mode.
+- Click on Load Unpacked Extension and Open/Select the folder.
+
 ## Demo 📺
 
 ![Mongo NAL Upsert Demo](https://s3.ap-south-1.amazonaws.com/shared.aashutosh.dev/ip-updater-0.1.0.gif)

src/background.js

@@ -2,8 +2,9 @@ const MANIFEST = chrome.runtime.getManifest();
 const onInstalled = async () => {
     const sites = MANIFEST.content_scripts.map((t) => t.matches).flat();
     const tabs = await chrome.tabs.query({ url: sites });
+    chrome.storage.sync.set({ version: `v${MANIFEST.version}` });
     await Promise.all(Array.from(tabs, (tab) => chrome.tabs.reload(tab.id)));
-}
+};
 
 // reload pages on install
 chrome.runtime.onInstalled.addListener(onInstalled);

src/content.js

@@ -86,7 +86,7 @@ const runIt = async (values) => {
 window.onload = () => {
   chrome.runtime.onMessage.addListener(
     async (request, sender, sendResponse) => {
-      if (request.action === "upsert") {
+      if (request.action === "UPSERT_IP_ENTRY") {
         await runIt(request.values);
       }
       return;

src/options/index.css

@@ -39,6 +39,10 @@ input {
   flex-direction: row;
 }
 
+.space-between {
+  justify-content: space-between;
+}
+
 
 .f-1 {
   flex: 1;
@@ -82,6 +86,10 @@ input {
   margin-bottom: 0;
 }
 
+.ml-6 {
+  margin-left: 6px;
+}
+
 .lazy {
   font-size: 12px;
   align-self: flex-end;
@@ -110,6 +118,11 @@ input {
   background-color: #5464db;
 }
 
+#version {
+  font-size: 12px;
+  maring-left: 30px !important;
+}
+
 .submit {
   margin-top: 10px;
   letter-spacing: 1.2px;

src/options/index.html

@@ -10,9 +10,12 @@
       <div class="icon-container">
         <img class="icon" src="../../icons/icon.png" />
       </div>
-      <div class="vflex f-1 text-center">
+      <div class="vflex f-1 ml-6">
         <p class="heading">MONGO IP UPDATER</p>
-        <i class="lazy">&nbsp;&nbsp;&nbsp;for the supa hackas</i>
+        <div class="hflex space-between">
+          <span id="version"></span>
+          <i class="lazy">&nbsp;&nbsp;&nbsp;for the supa hackas</i>
+        </div>
       </div>
     </div>
     <div>

src/options/index.js

@@ -22,6 +22,12 @@ document.addEventListener("DOMContentLoaded", function () {
     }
   });
 
+  chrome.storage.sync.get("version", function (data) {
+    if (data.version) {
+      document.querySelector('#version').innerHTML = data.version;
+    }
+  });
+
   // Fill in the current IP
   updateIpField();
 
@@ -46,7 +52,7 @@ document.addEventListener("DOMContentLoaded", function () {
       const name = document.querySelector('input[name="name"]').value;
       const ip = document.querySelector("input[name='ip']").value;
       await chrome.tabs.sendMessage(tab.id, {
-        action: "upsert",
+        action: "UPSERT_IP_ENTRY",
         values: {
           name,
           ip,