diff --git a/README.md b/README.md index b06e239..7db7719 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,62 @@ -# Dev Helper +

+ + + +

Dev Helper

+

Dev-Helper is a Chrome Extension to view borders of DOM Elements (on mouse hover).

+

- Chrome Extension for Web Developer +# Preview + +

+ +
+ +

+ + +## 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` + - + - 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. + +

+Made with :heart: by Swarag Naryanasetty +

diff --git a/src/content.js b/src/content.js index 8f38459..3d2f555 100644 --- a/src/content.js +++ b/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) { diff --git a/src/img/icon128.png b/src/img/icon128.png new file mode 100644 index 0000000..d3f96b9 Binary files /dev/null and b/src/img/icon128.png differ diff --git a/src/img/icon16.png b/src/img/icon16.png new file mode 100644 index 0000000..23ab7dd Binary files /dev/null and b/src/img/icon16.png differ diff --git a/src/img/icon32.png b/src/img/icon32.png new file mode 100644 index 0000000..cb6bb47 Binary files /dev/null and b/src/img/icon32.png differ diff --git a/src/img/icon48.png b/src/img/icon48.png new file mode 100644 index 0000000..7dac58a Binary files /dev/null and b/src/img/icon48.png differ diff --git a/src/img/icon512.png b/src/img/icon512.png new file mode 100644 index 0000000..8c46f53 Binary files /dev/null and b/src/img/icon512.png differ diff --git a/src/index.js b/src/index.js index fc6dae7..498784a 100644 --- a/src/index.js +++ b/src/index.js @@ -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); diff --git a/src/manifest.json b/src/manifest.json index 9ed756b..bc7ff92 100644 --- a/src/manifest.json +++ b/src/manifest.json @@ -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": [""],