feat!: add labels from remote JSON to links a web pages as a browser …

…extension

README.md

@@ -1,15 +1,141 @@
-# <img src="public/icons/icon_48.png" width="45" align="left"> Linklabeler
+# <img src="public/icons/app-icon-48.png" width="45" align="left"> Link Labeler
 
-My Chrome Extension
+Link Labeler is a browser extension designed to enhance information related to links on web pages. By using this extension, users can gain more insight into the underlying resources that a link is pointing to.
 
 ## Features
 
-- Feature 1
-- Feature 2
+- Labels library retrieval: The extension is capable of retrieving labels from multiple sources. Labels need to be organized in JSON format and hosted on an HTTP server or accessible via API. The JSON schema is described in the extension's GitHub repository documentation.
+- Auto-labeling on page load: Labels are automatically displayed for identified links when the extension is enabled. The information from libraries is stored locally and needs to be refreshed if changes are made.
+- Local storage clearing: Data can be easily removed at any time.
 
-## Install
+## Roadmap 
 
-[**Chrome** extension]() <!-- TODO: Add chrome extension link inside parenthesis -->
+- Library editor
+- Authentication
+
+Please feel free to contribute or provide feedback in the [issues](https://github.com/ivanignatiev/linkslabeler/issues)
+
+## Use cases
+
+- Marking danger links: Users can label links that are potentially dangerous or malicious.
+- Providing information about resources in Cloud or Hosting providers portals: Links to resources in cloud or hosting provider portals can be labeled to provide additional information.
+- Marking broken links: Links that are broken or no longer functional can be labeled for easy identification.
+
+
+# User Guide
+
+## Label links
+
+1. Install (Publishing to Google Chrome Web Store is in progress) [**Chrome** extension](https://chrome.google.com/webstore/category/extensions) <!-- TODO: Add chrome extension link inside parenthesis -->
+
+2. Make avalable a library of labels in JSON format over HTTP/HTTPS (See [Data Structure](#data-structure))
+
+3. Add URL to the library in the extension pop-up, each separate URL in a new line
+
+4. Click "Refresh & Label links" button
+
+5. From this moment links will be labeled each time you open any web page. Auto-refresh from sources is not supported yet. If any of sources are changed you need to click "Refresh & Label Links" button manually.
+
+## Remove Labels
+
+1. Click "Clear Hashes" button
+
+# Data Structure
+
+## Chrome Storage - Sync
+
+```json
+{
+  "sources": [ 
+    {
+      "url": "<remote json url>"
+    }
+  ]
+}
+```
+
+## Chrome Storage - Local
+
+```json
+"hashes": {
+  "<md5-hash>": {
+    "labels": [
+      {
+        "caption": "<label-text>",
+        "style": "primary|success|info|warning|danger|light|dark",
+      }
+    ]
+  }
+}
+```
+
+## Labels library in remote JSON (file, or API)
+
+```json
+{
+  "version": 1,
+  "hashes": {
+    "<md5-hash-1-of-href-attribure>": {
+        "metadata": {
+          "hash": {
+            "href": "https://*****/****/***.json"
+          }
+        },
+        "labels": [
+          {
+            "caption": "<label-1-1-text>",
+            "style": "primary"
+          },
+          {
+            "caption": "<label-1-2-text>",
+            "style": "success"
+          }
+        ]
+    },
+    "<md5-hash-2-of-link-text>": {
+        "metadata": {
+          "hash": {
+            "text": "<link-2-text>"
+          },
+        },
+        "labels": [
+          {
+            "caption": "<label-2-1-text>",
+            "style": "info"
+          }
+        ]
+    },
+    "<md5-hash-3-of-href-attribure-and-text>": {
+        "metadata": {
+          "hash": {
+            "href": "https://*****/****/***.json",
+            "text": "<link-3-text>"
+          }
+        },
+        "labels": [
+          {
+            "caption": "<label-3-1-text>",
+            "style": "warning"
+          },
+          {
+            "caption": "<label-3-2-text>",
+            "style": "danger"
+          },
+          {
+            "caption": "<label-3-3-text>",
+            "style": "light"
+          },
+          {
+            "caption": "<label-3-4-text>",
+            "style": "dark"
+          },
+        ]
+    }
+  }
+}
+```
+
+Sample library can be found [here](test/json-samples/).
 
 ## Contribution
 
@@ -19,3 +145,6 @@ Suggestions and pull requests are welcomed!.
 
 This project was bootstrapped with [Chrome Extension CLI](https://github.com/dutiyesh/chrome-extension-cli)
 
+# License
+
+[MIT](LICENSE)

package.json

@@ -1,7 +1,7 @@
 {
   "name": "linklabeler",
   "version": "0.1.0",
-  "description": "My Chrome Extension",
+  "description": "Add labels to links on a page.",
   "private": true,
   "scripts": {
     "watch": "webpack --mode=development --watch --config config/webpack.config.js",
@@ -20,5 +20,8 @@
     "webpack": "^5.79.0",
     "webpack-cli": "^4.10.0",
     "webpack-merge": "^5.8.0"
+  },
+  "dependencies": {
+    "crypto-js": "^4.1.1"
   }
 }

public/contentStyle.css

@@ -0,0 +1,44 @@
+/* Custom CSS classes for labels */
+.linklabeler-label {
+  padding: 3px 6px;
+  margin-left: 5px;
+  font-size: 60%;
+  font-weight: bold;
+  border-radius: 3px;
+  cursor: pointer;
+}
+
+.linklabeler-label-primary {
+  background-color: #007bff;
+  color: #fff;
+}
+
+.linklabeler-label-success {
+  background-color: #28a745;
+  color: #fff;
+}
+
+.linklabeler-label-info {
+  background-color: #17a2b8;
+  color: #fff;
+}
+
+.linklabeler-label-warning {
+  background-color: #ffc107;
+  color: #000;
+}
+
+.linklabeler-label-danger {
+  background-color: #dc3545;
+  color: #fff;
+}
+
+.linklabeler-label-light {
+  background-color: #f8f9fa;
+  color: #000;
+}
+
+.linklabeler-label-dark {
+  background-color: #343a40;
+  color: #fff;
+}

public/manifest.json

@@ -1,19 +1,23 @@
 {
   "manifest_version": 3,
-  "name": "Linklabeler",
+  "name": "Links Labeler",
   "version": "0.1.0",
-  "description": "My Chrome Extension",
+  "description": "Add labels to links on a page.",
   "icons": {
-    "16": "icons/icon_16.png",
-    "32": "icons/icon_32.png",
-    "48": "icons/icon_48.png",
-    "128": "icons/icon_128.png"
+    "16": "icons/app-icon-16.png",
+    "48": "icons/app-icon-48.png",
+    "128": "icons/app-icon-128.png"
   },
   "background": {
     "service_worker": "background.js"
   },
   "action": {
-    "default_title": "Linklabeler",
+    "default_icon": {
+      "16": "icons/app-action-16.png",
+      "48": "icons/app-action-48.png",
+      "128": "icons/app-action-128.png"
+    },
+    "default_title": "Link Labeler",
     "default_popup": "popup.html"
   },
   "permissions": [
@@ -27,6 +31,9 @@
       "run_at": "document_idle",
       "js": [
         "contentScript.js"
+      ],
+      "css": [
+        "contentStyle.css"
       ]
     }
   ]

public/popup.html

@@ -2,31 +2,20 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <title>My Chrome Extension</title>
+    <title>Links Labeler</title>
     <link rel="stylesheet" href="popup.css" />
   </head>
   <body>
     <div class="app">
-      <p class="counter-label">Counter</p>
-      <div id="counter" class="counter"></div>
+      <div>
+        <textarea id="sourcesTxtarea" class="textarea-sources"></textarea>
+      </div>
       <div class="button-container">
-        <button id="decrementBtn" class="button">-</button>
-        <button id="incrementBtn" class="button">+</button>
+        <button id="refreshBtn" class="button">Refresh & Label Links</button>
+        <button id="clearHashesBtn" class="button">Clear Hashes</button>
       </div>
-
-      <hr class="divider" />
-
-      <p class="title">Chrome Extension is Ready!</p>
-      <p class="subtitle">Start by updating <code>popup.html</code></p>
     </div>
 
     <script src="popup.js"></script>
-
-    <!--
-      This HTML file opens when you click on icon from the toolbar.
-
-      To begin the development, run `npm run watch`.
-      To create a production bundle, use `npm run build`.
-    -->
   </body>
 </html>