initial commit

content_script.js

@@ -0,0 +1,60 @@
+function matchRule(str, rule) {
+	return new RegExp(rule.split("*").join(".*")).test(str);
+}
+
+function getColorFromUrl(url) {
+	var color = null
+
+  console.log(url)
+  console.log(env)
+	env.forEach(function(env) {
+		if (matchRule(url, env.match)) {
+			color = env.color
+		}
+	})
+
+	return color
+}
+
+function setColorInsideTab(color) {
+
+  if (color == null)
+    return
+
+  envify_left_div = document.createElement('div')
+  envify_left_div.classList.add('envify')
+  envify_left_div.classList.add('left')
+
+  envify_right_div = document.createElement('div')
+  envify_right_div.classList.add('envify')
+  envify_right_div.classList.add('right')
+
+  envify_right_div.style.backgroundColor = color
+  envify_left_div.style.backgroundColor = color
+  document.body.classList.add('envify')
+  document.body.appendChild(envify_left_div)
+  document.body.appendChild(envify_right_div)
+}
+
+url = window.location.href
+
+chrome.storage.sync.get("environments", function(results){
+  console.log(results);
+  env = []
+  let { environments } = results;
+
+  if (environments == undefined) {
+    return
+  }
+
+  Object.keys(environments).map(function(value){
+    env.push( { match: value, color: environments[value] });
+  });
+
+  env.sort(function(a, b) {
+    return a.match.length - b.match.length
+  })
+
+  setColorInsideTab(getColorFromUrl(url))
+})
+

manifest.json

@@ -0,0 +1,20 @@
+{
+  "name": "Envify chrome",
+  "version": "1.0",
+  "description": "The same as envify firefox but for chrome",
+  "manifest_version": 2,
+  "permissions": [
+    "storage"
+  ],
+  "options_ui": {
+    "page": "popup/manage_env.html",
+    "open_in_tab": true
+  },
+  "content_scripts": [
+    {
+      "matches": ["<all_urls>"],
+      "css": ["style.css"],
+      "js": ["popup/browser-polyfill.min.js", "content_script.js"]
+    }
+  ]
+}

popup/main.js

@@ -0,0 +1,68 @@
+let listEnvironments = document.querySelector(".list-environments")
+let btnAddEnv = document.getElementById("btn-add-env");
+let btnSaveEnv = document.getElementById("btn-save-env");
+
+let addEnvironment = function(url, color){
+	let environmentNode =  document.createElement("section");
+	environmentNode.classList.add("environment");
+
+	let envColor = document.createElement("input");
+	envColor.type = "color";
+	envColor.value = color || randomDefaultColor();
+	environmentNode.appendChild(envColor);
+
+	let envDomain = document.createElement("input");
+	envDomain.type = "text";
+	envDomain.placeholder = "*.dev.example.com";
+	envDomain.value = url || "";
+	environmentNode.appendChild(envDomain);
+
+	let envRemove = document.createElement("button");
+	envRemove.className = "btn-remove";
+	envRemove.textContent = "Remove";
+	envRemove.addEventListener("click", () => removeEnvironment(environmentNode), false);
+	environmentNode.appendChild(envRemove);
+
+	listEnvironments.appendChild(environmentNode);
+}
+
+let randomDefaultColor = function(){
+	let flatColors = [ "#0a84ff", "#00feff", "#ff1ad9", "#30e60b", "#ffe900", "#ff0039", "#9400ff", "#ff9400", "#363959", "#737373"];
+	return flatColors[ Math.floor(Math.random() * flatColors.length)];
+}
+
+let removeEnvironment = function(section){
+	section.remove();
+}
+
+let updateEnvironments = function(){
+	let environments = {};
+	for (let el of listEnvironments.children){
+		let url = el.querySelector("input[type=text]").value;
+		if(!url){
+			continue;
+		}
+		environments[url] = el.querySelector("input[type=color]").value;
+	}
+	browser.storage.sync.set({"environments": environments}).catch(function(err){
+		btnAddEnv.setCustomValidity("Could not save your environments");
+		btnAddEnv.reportValidity();
+	});
+}
+
+btnAddEnv.addEventListener("click", function() { addEnvironment() }, false)
+btnSaveEnv.addEventListener("click", updateEnvironments, false)
+
+document.addEventListener("DOMContentLoaded", function(){
+	browser.storage.sync.get("environments")
+	.then(function(results){
+		let { environments } = results;
+		Object.keys(environments).map(function(value){
+			addEnvironment(value, environments[value]);
+		});
+	})
+	.catch(function(err){
+		btnAddEnv.setCustomValidity("Could not load your environments");
+		btnAddEnv.reportValidity();
+	})
+}, false)

popup/manage_env.html

@@ -0,0 +1,23 @@
+<!doctype html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<meta name="description" content="">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>Envify</title>
+	<link rel="stylesheet" href="styles.css">
+</head>
+<body>
+	<h1>Envify</h1>
+	<p>Define your own environments below.</p>
+	<button id="btn-add-env">Add an environment</button>
+	<main class="list-environments">
+
+	</main>
+
+	<button id="btn-save-env">Save</button>
+
+  <script src="browser-polyfill.min.js"></script>
+	<script src="main.js"></script>
+</body>
+</html>

popup/styles.css

@@ -0,0 +1,62 @@
+html, body {
+	height:  100%;
+	margin: 0;
+}
+
+body {
+	padding: 20px;
+	background: linear-gradient(#34495e, #2c3e50);
+	color: #ecf0f1;
+	box-sizing: border-box;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+
+* {
+	box-sizing: inherit;
+}
+
+h1 {
+	font-family: 'Courier', monospace;
+	text-align: center;
+}
+
+#btn-add-env {
+	height: 10%;
+	font-weight: bolder;
+	font-family: 'Courier', monospace;
+	margin-bottom: 7px;
+}
+
+.list-environments {
+	width: 100%;
+	margin: 0 auto;
+	border: 2px dashed #2ecc71;
+	padding: 1%;
+}
+
+.environment {
+	display: flex;
+	margin: 5px;
+	justify-content: left;
+	align-items: stretch;
+}
+
+
+input[type="color"] {
+	border: none;
+	background-color: white;
+	padding: 0;
+	min-width: 57px;
+}
+
+input[type="color"]::-moz-color-swatch{
+	border: none;
+}
+
+input[type="text"] {
+	width: 100%;
+	height: inherit;
+	border:  none;
+}

style.css

@@ -0,0 +1,20 @@
+body.envify {
+  padding-left: 35px !important;
+  padding-right: 35px !important;
+}
+
+body div.envify.left {
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  height: 100%;
+  width: 35px;
+}
+
+body div.envify.right {
+  position: fixed;
+  top: 0px;
+  right: 0px;
+  height: 100%;
+  width: 35px;
+}