Improved popup

hrishibawane · Jun 12, 2021 · 70eb56c · 70eb56c
1 parent 7892112
commit 70eb56c
Show file tree

Hide file tree

Showing 8 changed files with 77 additions and 25 deletions.
diff --git a/icons/logo128.png b/icons/logo128.png
diff --git a/icons/logo16.png b/icons/logo16.png
diff --git a/icons/logo32.png b/icons/logo32.png
diff --git a/icons/logo48.png b/icons/logo48.png
diff --git a/manifest.json b/manifest.json
@@ -11,7 +11,19 @@
 		"keyword": "hb"
 	},
 	"action": {
-		"default_popup": "popup.html"
+		"default_popup": "popup.html",
+		"default_icon": {
+			"16": "/icons/logo16.png",
+			"32": "/icons/logo32.png",
+			"48": "/icons/logo48.png",
+			"128": "/icons/logo128.png"
+		}
+	},
+	"icons": {
+		"16": "/icons/logo16.png",
+		"32": "/icons/logo32.png",
+		"48": "/icons/logo48.png",
+		"128": "/icons/logo128.png"
 	},
 	"author": "Hrishikesh Bawane"
 }
diff --git a/popup.html b/popup.html
@@ -2,19 +2,34 @@
 <html>
 	<head>
 		<link rel="stylesheet" href="style.css">
+		<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
 	</head>
 	<body>
 		<div>
-			<label for="aliasInput">Alias</label>
-			<input id="aliasInput">
-			<br />
-			<label for="urlInput">URL</label>
-			<input id="urlInput">
-			<br />
-			<button id="saveAlias">Save</button>
-		</div>
-		<div>
-			<p id="prevAliases"></p>
+			<div id="titleArea" class="junbotron jumbotron-fluid">
+				<div class="row">
+					<div class="col-4">
+						<img src="icons/logo48.png">
+					</div>
+					<div class="col-6">
+						<h3>URL Alias Extension</h3>
+					</div>
+				</div>
+			</div>
+			<div id="inputArea">
+				<label for="aliasInput">Alias</label>
+				<input id="aliasInput" type="text" placeholder="Alias">
+				<br />
+				<label for="urlInput">URL</label>
+				<input id="urlInput" type="text" placeholder="URL">
+				<br /><br />
+				<button id="saveAlias" type="button" class="btn btn-primary btn-sm">Save</button>
+			</div>
+			<div id="contentArea">
+				<h5>Aliases in use:</h5>
+				<ul id="prevAliases" class="list-group list-group-flush">
+				</ul>
+			</div>
 		</div>
 		<script src="popup.js"></script>
 	</body>

diff --git a/popup.js b/popup.js
@@ -8,24 +8,28 @@ window.onload = setPrevAliases;
 
 document.getElementById("saveAlias").addEventListener("click", saveNewAlias);
 
+function saveNewAlias() {
+	var newAlias = document.getElementById("aliasInput").value;
+	var newUrl = document.getElementById("urlInput").value;
+	aliasToUrlMap[newAlias] = newUrl;
+	var aliasToURLParsed = JSON.stringify(aliasToUrlMap);
+	chrome.storage.sync.set({ aliasToURLParsed });
+	setPrevAliases();
+}
+
 function setPrevAliases() {
 	chrome.storage.sync.get("aliasToURLParsed", ({aliasToURLParsed}) => {
 		aliasToUrlMap = JSON.parse(aliasToURLParsed);
-		var displayStr = "";
+		var parentElem = document.getElementById("prevAliases");
+		parentElem.innerHTML = "";
 		for (var alias in aliasToUrlMap)
 		{
-			displayStr += alias + ": " + aliasToUrlMap[alias];
-			displayStr += "<br />";
+			var listTag = document.createElement("li");
+			listTag.className = "list-group-item";
+			var listText = document.createTextNode(alias + ": " + aliasToUrlMap[alias]);
+			listTag.appendChild(listText);
+			parentElem.appendChild(listTag);
 		}
-		document.getElementById("prevAliases").innerHTML = displayStr;
+		//document.getElementById("prevAliases").innerHTML = displayStr;
 	});
 }
-
-function saveNewAlias() {
-	var newAlias = document.getElementById("aliasInput").value;
-	var newUrl = document.getElementById("urlInput").value;
-	aliasToUrlMap[newAlias] = newUrl;
-	var aliasToURLParsed = JSON.stringify(aliasToUrlMap);
-	chrome.storage.sync.set({ aliasToURLParsed });
-	setPrevAliases();
-}
diff --git a/style.css b/style.css
@@ -3,15 +3,36 @@ button {
 	width: 100px;
 	margin: 10px;
 	background-color: lightgreen;
+	font-size: medium;
 }
 
 input {
 	height: 30px;
 	width: auto;
 	margin: 10px;
+	padding: 10px;
+	font-size: medium;
 }
 
 label {
 	font-weight: bold;
+	font-size: medium;
 	margin: 10px;
-}
+}
+
+h2, h5 {
+	margin: 10px;
+	font-weight: bold;
+}
+
+#contentArea, #inputArea {
+	background-color: whitesmoke;
+	padding: 10px;
+}
+
+#titleArea {
+	background-color: lightgrey;
+	padding: 10px;
+}
+
+