Set up extension with simple CSS injection

kallepersson · Sep 15, 2018 · 2632719 · 2632719
commit 2632719
Show file tree

Hide file tree

Showing 15 changed files with 177 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,3 @@
+
+.DS_Store
+in-min.js
diff --git a/RESEARCH.md b/RESEARCH.md
@@ -0,0 +1,8 @@
+##Classes
+.aeN is sidebar
+.L3 is compose button
+
+
+##Things to do
+- Listen to hash changes, update header with title and color
+- Pinned is now Starred. Add switch for toggling this in the current view
diff --git a/clone.sh b/clone.sh
@@ -0,0 +1,12 @@
+#!/bin/bash
+while sleep 1; do	
+	echo "(function(){"  > in-min.js
+	echo "const _css = \`"  >> in-min.js
+	cat in.css >> in-min.js
+	echo "body::after { content: '"  >> in-min.js
+	echo $(date +"%H:%M:%S") >> in-min.js
+	echo "';}"  >> in-min.js
+	echo "\`;"  >> in-min.js
+	cat in.js >> in-min.js
+	echo "})();" >> in-min.js
+done
diff --git a/img/128-store.png b/img/128-store.png
diff --git a/img/icon-128.png b/img/icon-128.png
diff --git a/img/icon-16.png b/img/icon-16.png
diff --git a/img/icon-19.png b/img/icon-19.png
diff --git a/img/icon-256.png b/img/icon-256.png
diff --git a/img/icon-38.png b/img/icon-38.png
diff --git a/img/icon-48.png b/img/icon-48.png
diff --git a/in.css b/in.css
@@ -0,0 +1,46 @@
+/* Compose button */
+.aeN .z0> {
+  height: auto;
+}
+.aeN .z0>.L3 {
+  background-color: #d23f31;
+  height: 56px;
+  width: 56px;
+  border-radius:50%;
+  position: relative;
+  box-shadow: 0 0 4px rgba(0,0,0,.14), 0 4px 8px rgba(0,0,0,.28);
+  position: fixed;
+  right: 15px;
+  bottom: 15px;
+  z-index: 100;
+  text-indent: -9999px;
+  overflow: hidden;
+  padding: 0;
+}
+
+.aeN .z0>.L3::before /* Compose Icon */ ,
+.aeG /* Footer stats */ ,
+.gb_Be img.gb_Wa /* Gmail logo */,
+.gb_Ra .gb_Sa /* GSuite Logo */
+{
+  display: none !important;
+}
+
+/* GSuite button */
+.gb_Ra {
+  border: 0 !important;
+  width: auto !important;
+}
+
+/* Debug element */
+body::after {
+  display: block;
+  position: fixed;
+  bottom: 25px;
+  left: 0;
+  z-index: 9999;
+  background: rgba(0,0,0,0.3);
+  color: #fff;
+  font-family: monospace;
+  font-size: 14;
+}
diff --git a/in.js b/in.js
@@ -0,0 +1,21 @@
+const _styleElement = document.createElement("style");
+_styleElement.innerText = _css;
+
+const init = (evt) => {
+  document.head.appendChild(_styleElement);
+  console.log("ready", _styleElement.parentNode)
+}
+
+const handleHashChange = (evt) => {
+  console.log("#", window.location.hash);
+  document.body.dataset.hash = window.location.hash;
+}
+
+window.addEventListener("hashchange", handleHashChange);
+
+
+if (document.head) {
+  init();
+} else {
+  document.addEventListener("DOMContentLoaded", init);
+}
diff --git a/manifest.json b/manifest.json
@@ -0,0 +1,26 @@
+{
+  "name": "Inbox theme for Gmail",
+  "description" : "Makes Gmail look and behave like Inbox",
+  "homepage_url": "http://flowapps.co/inboxnostalgia",
+  "author": "Kalle Persson",
+  "version": "1.0.0",
+  "icons": {
+    "16": "img/icon-256.png",
+    "19": "img/icon-256.png",
+    "38": "img/icon-256.png",
+    "48": "img/icon-256.png",
+    "128": "img/icon-256.png",
+    "256": "img/icon-256.png"
+  },
+  "manifest_version": 2,
+  "content_scripts": [
+    {
+      "matches": [
+        "https://mail.google.com/*"
+      ],
+      "js": [
+        "in-min.js"
+      ]
+    }
+  ]
+}
diff --git a/options.html b/options.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<html>
+<head>
+	<style type="text/css">
+		img {
+			cursor: pointer;
+			display: block;
+			margin: 0 0 5px 0;
+		}
+
+		.selected {
+			outline: 2px solid #76a7fa;
+		}
+	</style>
+</head>
+<body>
+
+	<img src="img/theme-default.png" id="default" alt="Default" title="Default">
+	<img src="img/theme-dark.png"  id="dark" alt="Dark" title="Dark">
+	<img src="img/theme-sepia.png"  id="sepia" alt="Sepia" title="Sepia">
+
+	<script type="text/javascript" src="options.js"></script>
+</body>
+</html>
diff --git a/options.js b/options.js
@@ -0,0 +1,37 @@
+function restoreOptions() {
+  chrome.storage.sync.get({
+    theme: "default"
+  }, function(items) {
+    selectTheme(items.theme)
+  });
+}
+
+function selectTheme(theme) {
+  let elm = document.getElementById(theme);
+  if (!elm) {
+    return;
+  }
+
+  let selectedElement = document.querySelector(".selected");
+  if (selectedElement) {
+    selectedElement.classList.remove("selected");
+  }
+
+  elm.className = "selected";
+
+  chrome.storage.sync.set({
+    theme: theme,
+  }, function() {
+    console.log("saved", theme);
+  });
+}
+
+window.addEventListener("click", function(evt) {
+  if (evt.target.tagName != "IMG") {
+    return;
+  }
+
+  selectTheme(evt.target.id);
+});
+
+document.addEventListener("DOMContentLoaded", restoreOptions);