step: can save/load/delete drafts on input/focus/submit

Author: Liooo

package.json

@@ -0,0 +1,27 @@
+{
+  "name": "github-comment-draft",
+  "version": "1.0.0",
+  "description": "Lets you stop whining over the long github comment loss",
+  "private": true,
+  "scripts": {
+    "build": "webpack",
+    "watch": "webpack --watch"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "pretty-quick --staged"
+    }
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "clean-webpack-plugin": "^0.1.19",
+    "copy-webpack-plugin": "^4.5.2",
+    "husky": "^1.0.0-rc.13",
+    "prettier": "^1.14.2",
+    "pretty-quick": "^1.6.0",
+    "webpack": "^4.17.1",
+    "webpack-cli": "^3.1.0"
+  }
+}

src/content-script.js

@@ -0,0 +1,46 @@
+import { get, set, remove } from "./storage";
+
+const FOCUS_COLOR = "darkblue";
+const FOCUS_STYLES = [
+  { key: "border-color", value: `${FOCUS_COLOR}` },
+  { key: "box-shadow", value: `0 0 10px ${FOCUS_COLOR}` }
+];
+
+function doShit(elem, pathname) {
+  const elemId = elem.id;
+
+  FOCUS_STYLES.forEach(({ key, value }) => {
+    elem.style.setProperty(key, value, "important");
+    elem.nextElementSibling.style.setProperty(key, value, "important")
+  });
+  const draft = elem.value;
+  if (!draft) {
+    elem.value = get(`drafts:${pathname}:${elemId}`);
+  }
+
+  elem.addEventListener("blur", function() {
+    FOCUS_STYLES.forEach(({ key, value }) => {
+      elem.style.setProperty(key, "");
+      elem.nextElementSibling.style.setProperty(key, "")
+    })
+  });
+
+  elem.addEventListener("input", function(e) {
+    const draft = e.target.value;
+    if (!draft) return;
+    set(`drafts:${pathname}:${elemId}`, draft);
+  });
+
+  elem.closest("form").addEventListener("submit", function() {
+    remove(`drafts:${pathname}:${elemId}`);
+  });
+}
+
+function onFocusAny(e) {
+  if (e.target.tagName !== "TEXTAREA") return;
+  const pathname = location.pathname;
+  doShit(e.target, pathname);
+}
+
+// seems like the easiest certain way to cover all we want
+document.addEventListener("focus", onFocusAny, true);

src/manifest.json

@@ -0,0 +1,14 @@
+{
+  "name": "Github Comment Draft",
+  "version": "1.0.0",
+  "description": "Lets you stop whining over the long github comment loss",
+  "manifest_version": 2,
+  "permissions": ["activeTab"],
+  "content_scripts": [
+    {
+      "run_at": "document_start",
+      "matches": ["https://github.com/*"],
+      "js": ["content-script.js"]
+    }
+  ]
+}

src/storage.js

@@ -0,0 +1,10 @@
+const PREFIX = "github-comment-draft:";
+
+export const set = (key, value) => {
+  localStorage.setItem(`${PREFIX}${key}`, value);
+  return value;
+};
+
+export const get = key => localStorage.getItem(`${PREFIX}${key}`);
+
+export const remove = key => localStorage.removeItem(`${PREFIX}${key}`);

webpack.config.js

@@ -0,0 +1,16 @@
+const path = require("path");
+const CopyWebpackPlugin = require("copy-webpack-plugin");
+const CleanWebpackPlugin = require("clean-webpack-plugin");
+
+module.exports = {
+  mode: "production",
+  entry: { "content-script": "./src/content-script.js" },
+  output: {
+    path: path.resolve(__dirname, "dist"),
+    filename: "[name].js"
+  },
+  plugins: [
+    new CleanWebpackPlugin(["dist"]),
+    new CopyWebpackPlugin(["src/manifest.json"])
+  ]
+};