0.2.0 (#1)

* Added Form * one-time connection * chore:Sanitized Codebase * 0.2.0 Co-authored-by: whois-this <[email protected]>
Swarag-N · Nov 9, 2020 · d39ea58 · d39ea58
1 parent a6d24bb
commit d39ea58
Show file tree

Hide file tree

Showing 6 changed files with 164 additions and 25 deletions.
diff --git a/src/background.js b/src/background.js
diff --git a/src/content.js b/src/content.js
@@ -1,21 +1,30 @@
+"use strict";
 console.log("Using Dev-Helper");
 
-test = document.getElementsByTagName("body");
+const bodyElement = document.getElementsByTagName("body");
+let formData = {};
+let borderProperties = `${formData.size}px ${formData.color} ${formData.bStyle}`;
+// let borderProperties = "1px dashed #0000FF"
 
 function devHelper(event) {
   // highlight the mouseover target
-  event.target.style.border = "1px dashed #0000FF";
+  event.target.style.border = borderProperties;
+
   // reset the border after a short delay
   setTimeout(function () {
     event.target.style.border = "";
   }, 500);
 }
 
-function DevHelperController(command, sender, sendResponse) {
-  if (command.activate) {
-    test[0].addEventListener("mouseover", devHelper, false);
+function DevHelperController(commands, sender, sendResponse) {
+  console.log(commands);
+  if (commands.onoffswitch) {
+    formData = commands;
+    borderProperties = `${formData.size}px ${formData.color} ${formData.bStyle}`;
+    bodyElement[0].addEventListener("mouseover", devHelper, { passive: true });
   } else {
-    test[0].removeEventListener("mouseover", devHelper);
+    bodyElement[0].removeEventListener("mouseover", devHelper);
   }
 }
+
 chrome.runtime.onMessage.addListener(DevHelperController);
diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,26 @@
+let devForm = document.getElementById("customization");
+console.log(devForm);
+
+function readFormData() {
+  let formData = Object.fromEntries(
+    new FormData(document.querySelector("form")).entries()
+  );
+  return formData;
+}
+
+function formEventHandler() {
+  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);
+
+// devForm.addEventListener("input", () => {
+//     chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
+//       let commands = readFormData();
+//       chrome.tabs.sendMessage(tabs[0].id, commands);
+//     });
+//   });
diff --git a/src/manifest.json b/src/manifest.json
@@ -2,17 +2,17 @@
   "manifest_version": 2,
   "name": "Dev Helper",
   "description": "Chrome Extension for Web Developer",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "author": "Swarag Naryanasetty",
   "browser_action": {
+    "default_title": "Dev Helper",
+    "default_popup": "popup.html"
   },
   "content_scripts": [
     {
       "matches": ["<all_urls>"],
-      "js": ["content.js"]
+      "js": ["content.js"],
+      "run_at": "document_idle"
     }
-  ],
-  "background":{
-      "scripts":["background.js"]
-  }
+  ]
 }
diff --git a/src/popup.html b/src/popup.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Dev-Helper</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    Choose Your Customization Options
+    <form id="customization">
+      <table>
+        <thead>
+          <tr>
+            Choose Border Properties
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>Border Size</td>
+            <td>
+              <input type="number" min="1" name="size" id="size" value="1" />
+            </td>
+          </tr>
+          <tr>
+            <td>Border Color</td>
+            <td>
+              <input type="color" name="color" id="color" value="#2719e6" />
+            </td>
+          </tr>
+          <tr>
+            <td>Border Style</td>
+            <td>
+              <select name="bStyle" id="bStyle">
+                <option value="dotted">dotted border</option>
+                <option value="dashed">dashed border</option>
+                <option value="solid">solid border</option>
+                <option value="double">double border</option>
+                <option value="groove">3D grooved border</option>
+                <option value="ridge">3D ridged border</option>
+                <option value="inset">3D inset border</option>
+                <option value="outset">3D outset border</option>
+                <option value="none">None</option>
+              </select>
+            </td>
+          </tr>
+          <tr>
+            <input type="reset" />
+          </tr>
+        </tbody>
+      </table>
+      <center>
+        <div class="onoffswitch">
+          <input
+            type="checkbox"
+            name="onoffswitch"
+            class="onoffswitch-checkbox"
+            id="myonoffswitch"
+          />
+          <label class="onoffswitch-label" for="myonoffswitch"></label>
+        </div>
+      </center>
+    </form>
+    <script src="index.js"></script>
+  </body>
+</html>
diff --git a/src/style.css b/src/style.css
@@ -0,0 +1,51 @@
+.onoffswitch {
+  position: relative;
+  width: 48px;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+}
+.onoffswitch-checkbox {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+}
+.onoffswitch-label {
+  display: block;
+  overflow: hidden;
+  cursor: pointer;
+  height: 11px;
+  padding: 0;
+  line-height: 11px;
+  border: 0px solid #ffffff;
+  border-radius: 23px;
+  background-color: #9e9e9e;
+}
+.onoffswitch-label:before {
+  content: "";
+  display: block;
+  width: 23px;
+  margin: -6px;
+  background: #ffffff;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 33px;
+  border-radius: 23px;
+  box-shadow: 0 6px 12px 0px #757575;
+}
+.onoffswitch-checkbox:checked + .onoffswitch-label {
+  background-color: #42a5f5;
+}
+.onoffswitch-checkbox:checked + .onoffswitch-label,
+.onoffswitch-checkbox:checked + .onoffswitch-label:before {
+  border-color: #42a5f5;
+}
+.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
+  margin-left: 0;
+}
+.onoffswitch-checkbox:checked + .onoffswitch-label:before {
+  right: 0px;
+  background-color: #2196f3;
+  box-shadow: 3px 6px 18px 0px rgba(0, 0, 0, 0.2);
+}