v0.2.1 (#2)

* Added Form

* one-time connection

* chore:Sanitized Codebase

* 0.2.0

* Add Icon &  Sanitize Code

Author: Swarag-N

README.md

@@ -1,3 +1,62 @@
-# Dev Helper
+<p align="center">
+<a href="https://github.com/Swarag-N/Dev-Helper">
+<img src="./src/img/icon512.png" width=150px />
+</a>
+<h1 align="center"> Dev Helper </h1>
+<h4 align="center"> Dev-Helper is a Chrome Extension to view borders of DOM Elements (on mouse hover). <h4>
+</p>
 
- Chrome Extension for Web Developer
+# Preview 
+
+<p align="center">
+<a href="https://github.com/Swarag-N/Dev-Helper"><img src="https://i.imgur.com/JZt85S7.png" title="Popup" /></a>
+<br>
+<a href="https://youtu.be/-X_E_3CDWOw"><img src="https://i.imgur.com/mRLvJqF.gif" title="Functioning of Dev Helper" /></a>
+</p>
+
+
+## Features
+
+- See Borders of DOM Elements useful for Debugging CSS
+- Customizing Options
+  - Border Length `1 - infinity`
+  - Border Color
+    - Select Through Color Box
+    - Give HEX,RGB
+  - Border Type
+    - Dotted
+    - Solid
+    - Dashed
+    - Few More
+- Reset to Default
+
+## Install
+
+- Google Chrome WebStore
+
+  - Coming Soon
+
+- Add Manually
+  - Download Latest Version of `src.zip`
+    - <https://github.com/Swarag-N/Dev-Helper/releases>
+  - Navigate to `chrome://extensions/`
+  - Toggle `Developer Mode` at Top Right Corner
+  - Use `Load unpacked` load the Extracted files from `src.zip` to Browser
+  - Refresh the Tab to start Using Extension
+
+## Contribute
+
+### Local Development
+
+- Clone the source
+
+  ```sh
+  git clone -b develop https://github.com/Swarag-N/Dev-Helper.git
+  ```
+
+- Load up Chrome browser, go to URL `chrome://extensions`, and enable _Developer Mode_
+- Click on `Load Unpacked`, and use the `src` directory as the root.
+
+<p align="center">
+Made with :heart: by <a href="https://github.com/Swarag-N">Swarag Naryanasetty</a>
+</p>

src/content.js

@@ -1,11 +1,17 @@
 "use strict";
 console.log("Using Dev-Helper");
 
+
+// Using const
 const bodyElement = document.getElementsByTagName("body");
 let formData = {};
 let borderProperties = `${formData.size}px ${formData.color} ${formData.bStyle}`;
 // let borderProperties = "1px dashed #0000FF"
 
+/**
+ *
+ * @param {*} event eventHandler
+ */
 function devHelper(event) {
   // highlight the mouseover target
   event.target.style.border = borderProperties;
@@ -16,6 +22,13 @@ function devHelper(event) {
   }, 500);
 }
 
+
+/**
+ * @function DevHelperController Handles the commands come from popup
+ * @param {*} commands contains the border properties user need
+ * @param {*} sender
+ * @param {*} sendResponse
+ */
 function DevHelperController(commands, sender, sendResponse) {
   console.log(commands);
   if (commands.onoffswitch) {

src/img/icon128.png

@@ -1,6 +1,8 @@
 let devForm = document.getElementById("customization");
-console.log(devForm);
 
+/**
+ * @returns formData => Data in the Form
+ */
 function readFormData() {
   let formData = Object.fromEntries(
     new FormData(document.querySelector("form")).entries()
@@ -15,12 +17,5 @@ function formEventHandler() {
   });
 }
 
-devForm.addEventListener("input",formEventHandler,false);
-devForm.addEventListener("reset",formEventHandler,false);
-
-// devForm.addEventListener("input", () => {
-//     chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
-//       let commands = readFormData();
-//       chrome.tabs.sendMessage(tabs[0].id, commands);
-//     });
-//   });
+devForm.addEventListener("input", formEventHandler, false);
+devForm.addEventListener("reset", formEventHandler, false);

src/img/icon16.png

@@ -2,12 +2,19 @@
   "manifest_version": 2,
   "name": "Dev Helper",
   "description": "Chrome Extension for Web Developer",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "author": "Swarag Naryanasetty",
   "browser_action": {
     "default_title": "Dev Helper",
     "default_popup": "popup.html"
   },
+  "icons": {
+    "16": "img/icon16.png",
+    "32": "img/icon32.png",
+    "48": "img/icon48.png",
+    "128": "img/icon128.png",
+    "512":"img/icon512.png"
+  },
   "content_scripts": [
     {
       "matches": ["<all_urls>"],