First commit

.gitignore

@@ -0,0 +1 @@
+assets/

README.md

@@ -0,0 +1,54 @@
+![logo](../assets/logo.png?raw=true)
+
+# JustLines - Chrome extension
+> Draw lines in your browser changing colors and pen sizes scrolling the mouse wheel
+<p align="center">
+  <img src="../assets/demo.gif?raw=true" alt="demo" />
+</p>
+
+JustLines is a Chrome extension to quickly draw simple colored lines in your browser. You can do it on remote or local sites and even pdf files.
+
+You can use it during presentation to highlight some contents or draw simple schemas.
+
+I like to use these kind of tools during presentations and I needed a quick way to change colors and pen size without using popups or options menu but do it keeping the mouse at the current position on the draw. So I decided to use mouse wheel as main controller to change colors and pen size.
+
+## Getting started
+
+* automatic installation: directly from Chrome Web Store (coming soon)
+* manual installation:
+  * download and extract the archive of the [latest release](https://github.com/camandel/JustLines/releases/latest)
+  * or clone the repository:
+    ```shell
+    git clone https://github.com/camandel/JustLines.git
+    ```
+  * Enable `Developer mode` in [Chrome extension](chrome://extensions/)
+  * Press `Load unpacked` and select the direcotry `extension` from the previously cloned repo
+  * Open a web page and click on the icon <img src="../assets/icon-disabled.png?raw=true" alt="icon-disabled" /> to enter drawing mode
+  * Change color (scrolling `mouse wheel`) and pen size (press `Shift` while scrolling `mouse wheel`)
+  * Press `left button` and start moving the mouse to draw a line
+
+
+## Features
+
+* press `Ctrl+Shit+S` or click on the extension icon to enable/disable drawing mode
+* you can also press `ESC` to disable drawing mode
+* keep `left button` pressed and move the mouse to draw
+* change pen colors scrolling the `mouse wheel`
+* change pen size pressing `Shift` and scroll the `mouse wheel`
+* clear draw pressing `Space` or leaving drawing mode
+
+
+## Contributing
+
+If you'd like to contribute, please fork the repository and use a feature branch. Pull requests are warmly welcome.
+
+
+## Links
+
+- Repository: https://github.com/camandel/JustLines
+- Issue tracker: https://github.com/camandel/JustLines/issues
+- Demo video: https://www.youtube.com/watch?v=hXOa06qxchw
+
+## Licensing
+
+The code in this project is licensed under GNU General Public License v3.0.

extension/background.js

@@ -0,0 +1,26 @@
+// start as disabled
+chrome.storage.local.set({ status: "disabled" });
+
+chrome.browserAction.onClicked.addListener(function () {
+    // change status from action icon
+    chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
+        var activeTab = tabs[0];
+        chrome.tabs.sendMessage(activeTab.id, { message: "change_status" });
+    });
+});
+
+chrome.commands.onCommand.addListener(function (command) {
+    // change status from command
+    if (command === "toggle") {
+        chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
+            var activeTab = tabs[0];
+            chrome.tabs.sendMessage(activeTab.id, { "message": "change_status" });
+        });
+    }
+});
+
+chrome.runtime.onMessage.addListener(function (request) {
+    // change action icon and save new status
+    chrome.browserAction.setIcon({ path: `img/icon19-${request.cmd}.png` });
+    chrome.storage.local.set({ status: `${request.cmd}` });
+});

extension/content.css

@@ -0,0 +1,25 @@
+#JustLines-canvas {
+    margin: 0;
+    padding: 0;
+    position: fixed;
+    z-index: 99999999;
+}
+
+.cursor {
+    background: red;
+    width: 12px;
+    height: 12px;
+    border: 2px solid rgb(41, 41, 41);
+    border-radius: 50%;
+    position: fixed;
+    transform: translate(-50%, -50%);
+    pointer-events: none;
+    z-index: 99999999;
+}
+
+.prepare-canvas {
+    margin: 0 !important;
+    padding: 0 !important;
+    overflow: "hidden" !important;
+    cursor: none !important;
+}

extension/content.js

@@ -0,0 +1,191 @@
+let ctx, canvas, cursor;
+let pen = {
+    x: 0,
+    y: 0,
+    click: false,
+    color: 0,
+    size: 12,
+    colors: ["red", "green", "yellow", "blue", "white", "black"],
+
+    getXpx() {
+        return `${this.x}px`;
+    },
+    getYpx() {
+        return `${this.y}px`;
+    },
+    getColor() {
+        return this.colors[this.color];
+    },
+    getSizePx() {
+        return `${this.size}px`;
+    }
+};
+
+chrome.runtime.onMessage.addListener(function (request) {
+    if (request.message === "change_status") {
+        chrome.storage.local.get("status", data => {
+            if (data.status === "disabled") {
+                draw();
+            } else {
+                removeCanvas();
+            }
+        });
+    }
+},
+);
+
+function createCanvas() {
+
+    document.body.classList.add("prepare-canvas");
+
+    // add div for cursor
+    cursor = document.createElement("div");
+    cursor.id = "JustLines-cursor";
+    cursor.classList.add("cursor");
+    cursor.style.top = pen.getYpx();
+    cursor.style.left = pen.getXpx();
+    document.body.insertBefore(cursor, document.body.firstChild);
+
+    // add canvas
+    canvas = document.createElement("canvas");
+    canvas.id = "JustLines-canvas";
+    ctx = canvas.getContext("2d");
+    document.body.insertBefore(canvas, document.body.firstChild);
+
+    resizeCanvas();
+    setPen();
+
+}
+
+function resizeCanvas() {
+    canvas.width = window.innerWidth;
+    canvas.height = window.innerHeight;
+}
+
+function removeCanvas() {
+    if (canvas) {
+        document.getElementById("JustLines-canvas").remove();
+        document.getElementById("JustLines-cursor").remove();
+
+        document.removeEventListener("mousemove", mouseMoveHandler);
+        document.removeEventListener("mousedown", mouseDownHandler);
+        document.removeEventListener("mouseup", mouseUpHandler);
+        document.removeEventListener("keydown", keyDownHandler);
+        document.removeEventListener("wheel", wheelHandler);
+
+        document.body.classList.remove("prepare-canvas");
+    }
+
+    // change icon
+    chrome.runtime.sendMessage({ cmd: "disabled" });
+}
+
+function wheelHandler(e) {
+    e.preventDefault();
+
+    if (e.shiftKey) {
+        // change size
+        if (e.deltaY > 0) {
+            pen.size += 2;
+        } else {
+            pen.size -= 2;
+        }
+
+        if (pen.size < 3) {
+            pen.size = 3;
+        } else if (pen.size > 35) {
+            pen.size = 35;
+        }
+    } else {
+        // change color
+        if (e.deltaY > 0) {
+            pen.color += 1;
+        } else {
+            pen.color -= 1;
+        }
+        if (pen.color >= pen.colors.length) {
+            pen.color = 0;
+        } else if (pen.color < 0) {
+            pen.color = pen.colors.length - 1;
+        }
+    }
+    setPen();
+}
+
+function keyDownHandler(e) {
+    e.preventDefault();
+    if (e.key === ' ') {
+        // clear draw
+        resizeCanvas();
+    } else if (e.key === "Escape") {
+        // exit
+        removeCanvas();
+    }
+};
+
+function mouseDownHandler(e) {
+    e.preventDefault();
+    if (e.button === 0) {
+        pen.click = true;
+    }
+}
+
+function mouseUpHandler(e) {
+    pen.click = false;
+}
+
+function mouseMoveHandler(e) {
+
+    let lastX, lastY;
+
+    pen.x = e.clientX;
+    pen.y = e.clientY;
+
+    cursor.style.top = pen.getYpx();
+    cursor.style.left = pen.getXpx();
+
+    if (pen.click) {
+        if (pen.x === 0) {
+            pen.x = lastX;
+        } else if (pen.x > canvas.width) {
+            pen.x = canvas.width;
+        }
+
+        if (pen.y === 0) {
+            pen.y = lastY;
+        } else if (pen.y > canvas.height) {
+            pen.y = canvas.height;
+        }
+
+        ctx.lineTo(pen.x, pen.y);
+        ctx.strokeStyle = pen.getColor();
+        ctx.lineWidth = pen.size;
+        ctx.stroke();
+        lastX = pen.x;
+        lastY = pen.y;
+    } else {
+        ctx.beginPath();
+        ctx.moveTo(pen.x, pen.y);
+    }
+}
+
+function setPen() {
+    cursor.style.background = pen.getColor();
+    cursor.style.width = pen.getSizePx();
+    cursor.style.height = pen.getSizePx();
+}
+
+function draw() {
+
+    createCanvas();
+
+    document.addEventListener("mousemove", mouseMoveHandler);
+    document.addEventListener("mousedown", mouseDownHandler, { passive: false });
+    document.addEventListener("mouseup", mouseUpHandler);
+    document.addEventListener("keydown", keyDownHandler, { passive: false });
+    document.addEventListener("wheel", wheelHandler, { passive: false });
+    window.onresize = resizeCanvas();
+
+    // change icon
+    chrome.runtime.sendMessage({ cmd: "enabled" });
+}

extension/manifest.json

@@ -0,0 +1,48 @@
+{
+  "manifest_version": 2,
+  "name": "JustLines",
+  "version": "0.1.0",
+  "description": "Draw lines in your browser and change colors and pen sizes scrolling the mouse wheel",
+  "homepage_url": "https://github.com/camandel/JustLines",
+  "icons": {
+    "16": "img/icon16.png",
+    "32": "img/icon32.png",
+    "48": "img/icon48.png",
+    "128": "img/icon128.png"
+  },
+  "permissions": [
+    "activeTab",
+    "storage"
+  ],
+  "background": {
+    "scripts": [
+      "background.js"
+    ]
+  },
+  "browser_action": {
+    "default_title": "JustLines shortcuts:\n\n- Click the icon to enable/disable drawing mode\n- Ctrl+Shift+S to enable/disable drawing mode\n- ESC to disable drawing mode\n- Mouse wheel to change pen colors\n- Shift+Mouse wheel to change pen size\n- Space to clear the draw\n",
+    "default_icon": "img/icon19-disabled.png"
+  },
+  "content_scripts": [
+    {
+      "matches": [
+        "<all_urls>"
+      ],
+      "js": [
+        "content.js"
+      ],
+      "css": [
+        "content.css"
+      ]
+    }
+  ],
+  "commands": {
+    "toggle": {
+      "suggested_key": {
+        "default": "Ctrl+Shift+S",
+        "mac": "Command+Shift+S"
+      },
+      "description": "Toggle feature"
+    }
+  }
+}