Adding NewTab Memo extension

README.md

@@ -120,9 +120,18 @@ The published [Unicorn Theme](https://chrome.google.com/webstore/detail/unicorn-
 ### ext-darkedit-ntp
 *~12 users*
 
-The published [DarkEdit New Tab](https://chrome.google.com/webstore/detail/darkedit-new-tab/lcjehgmglbjnagbdcbobefdbpeippiig) extension is available on the Chrome Web store.
+The published [DarkEdit New Tab](https://chrome.google.com/webstore/detail/darkedit-new-tab/lcjehgmglbjnagbdcbobefdbpeippiig) extension is available on the Chrome Web Store.
+
+![darkedit-ntp-screenshot.png](/images/darkedit-ntp-screenshot.png?raw=true)
+
+### ext-newtab-memo
+
+The published [NewTab Memo](https://chrome.google.com/webstore/detail/newtab-memo/gmahiocgkhbehfpmdndjpppdehlccaoh) extension is available on the Chrome Web Store.
+
+![newtab-memo-screenshot-1.png](/images/newtab-memo-screenshot-1.png?raw=true)
+
+![newtab-memo-screenshot-2.png](/images/newtab-memo-screenshot-2.png?raw=true)
 
-![darkedit-ntp-screenshot.png](/ext-darkedit-ntp/darkedit-ntp-screenshot.png?raw=true)
 
 ### Not Launched
 

ext-newtab-memo/1.0.2/editor.js

@@ -0,0 +1,107 @@
+/* editor.js
+- Implement the memopad functionality in a Chrome browser new tab
+- Allow saving, reseting, retrieving saved text
+- Update memopad size settings according to changes set in the options
+
+*/
+
+var storage = chrome.storage.local;
+
+var textarea = document.querySelector('textarea');
+var resetTextButton = document.querySelector('button.resetText');
+var saveTextButton = document.querySelector('button.saveText');
+var optionsButton = document.querySelector('button.optionsPage');
+
+loadChanges();
+loadOptionChanges();
+
+optionsButton.addEventListener('click', openOptions);
+saveTextButton.addEventListener('click', saveChanges);
+resetTextButton.addEventListener('click', resetChanges);
+
+
+function saveChanges() {
+  var text = textarea.value;
+
+  if (!text) {
+    alert("No text to save.")
+  }
+  else if (text) {
+    storage.set({'txt': text});
+  }
+}
+
+function resetChanges() {
+  // storage.clear would achieve the same thing.
+  storage.remove('txt');
+  textarea.value = '';
+}
+
+function loadChanges() {
+  storage.get('txt', function(items) {
+    if (items.txt) {
+      textarea.value = items.txt;
+    }
+  });
+
+  adjustViewSize();
+}
+
+function openOptions() {
+  if (chrome.runtime.openOptionsPage) {
+    chrome.runtime.openOptionsPage();
+  } 
+  else {
+    window.open(chrome.runtime.getURL('options.html'))
+  }
+}
+
+function loadOptionChanges() {
+  storage.get('css', function(items) {
+    if (items.css) {
+      // Load new CSS settings
+      document.getElementById("text-area").style = items.css;
+      document.getElementsByTagName("BODY")[0].style = items.css;
+
+      adjustViewSize();
+    }
+  });
+}
+
+function adjustViewSize() {
+  // Automatically adjust the textarea box depending on browser tab size
+  // Get the font size used in the text box
+  var textFontSizeLength = document.getElementById("text-area").style.fontSize.length;
+  // Slice out the "px" portion in the tail end
+  var textFontSizeRaw = document.getElementById("text-area").style.fontSize.slice(0, textFontSizeLength - 2);
+  // Split by "." and use the first number value as font size
+  var textFontSize = textFontSizeRaw.split(".")[0];
+
+  // For example, for font 12 = Approximating 1 row in Text area as 15 in height; font 10 = 13
+  var adjustment_array = {
+    '8': 9.75,
+    '9': 11,
+    '10': 13,
+    '11': 14,
+    '12': 15,
+    '13': 16,
+    '14': 17,
+    '15': 18,
+    '16': 19.5,
+    '20': 24
+  }
+
+  if (adjustment_array[textFontSize]) {
+    var adjustment = adjustment_array[textFontSize];
+  } else {
+    // Setting this as the default
+    adjustment = 15;
+  }
+
+  var height = document.documentElement.clientHeight;
+  // Text box row formula; the "- 2" to leave room for Save, etc. buttons
+  document.getElementById("text-area").rows = ((height / adjustment) - 2);
+}
+
+
+

ext-newtab-memo/1.0.2/manifest.json

@@ -0,0 +1,23 @@
+{
+  "name": "NewTab Memo",
+  "version": "1.0.2",
+  "description": "Transforms new tabs into memopads. Type, edit, and save.",
+  "chrome_url_overrides" : {
+    "newtab": "newTab.html"
+  },
+  "browser_action": {
+    "default_icon": "icon-128.png",
+    "default_title": "NewTab Memopad",
+    "default_popup": "popup.html"
+  },
+  "options_page": "options.html",
+  "permissions": [
+    "storage"
+  ],
+  "manifest_version": 2,
+  "icons": {
+  	"16": "icon-16.png",
+    "48": "icon-48.png",
+  	"128": "icon-128.png"
+  }
+}

ext-newtab-memo/1.0.2/newTab.css

@@ -0,0 +1,49 @@
+/* Minimalist styling */
+
+html {
+	/*background-color: gray;*/
+	/*background-color: #404040;*/
+	color: white;
+}
+
+body {
+	background-color: #404040;
+	color: white;
+	font-family: monospace;
+	font-size: 14px;
+}
+
+h2 {
+	color: white;
+	font-family: Monaco, monospace;
+}
+
+h3 {
+	color: white;
+	font-family: Monaco, monospace;
+}
+
+#text-area {
+	background-color: #404040; 
+	border: none;
+	outline: none;
+	width: 100%;
+
+	font-size: 12px; 
+	font-family: monospace; 
+	color: white; 
+}
+
+#button1 {
+	background-color: silver;
+	color: black;
+	border: none;
+	padding: 8px 15px;
+	text-align: center;
+	text-decoration: none;
+	display: inline-block;
+	font-size: 13px;
+	font-weight: bold;
+	font-family: monospace;
+}
+

ext-newtab-memo/1.0.2/newTab.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+  <meta charset="utf-8">
+  	<link rel="stylesheet" href="newTab.css">
+	  	<title>NewTab Memo</title>
+		<body>
+			<textarea id="text-area" placeholder="> > >" rows=38></textarea>
+			<hr color="gray">
+
+			<!-- Save and Reset Buttons -->
+			<button class="saveText" id="button1">Save</button>
+    		<button class="resetText" id="button1">Reset</button>
+    		<!-- Options Button -->
+    		<button class="optionsPage" id="button1">Options</button>
+
+    		<script src="editor.js"></script>
+		</body>
+</html>

ext-newtab-memo/1.0.2/options.html

@@ -0,0 +1,126 @@
+<!DOCTYPE html>
+	<html>
+	<meta charset="utf-8">
+	<link rel="stylesheet" href="newTab.css">
+		<title>NewTab Memo - Options</title>
+		<body>
+			<h2>&nbsp;NewTab Memo Options</h2>
+
+			<form id="settings">
+			<table border="0" cellpadding="5">
+			<tr>
+				<td><h3>&nbsp;Text Box and Page Options</h3></td>
+			</tr>
+			<tr>
+				<td>Background Color: </td>
+				<td>
+					<input type="text" name="bgColorCustom" size="10" placeholder="#color">
+					or 
+					<select name="bgColorSelect">
+						<option value=''></option>
+						<option value='#404040'>Dark Default</option>
+						<option value='white'>White</option>
+						<option value='silver'>Silver</option>
+						<option value='gray'>Gray</option>
+						<option value='black'>Black</option>
+						<option value='red'>Red</option>
+						<option value='maroon'>Maroon</option>
+						<option value='yellow'>Yellow</option>
+						<option value='olive'>Olive</option>
+						<option value='lime'>Lime</option>
+						<option value='green'>Green</option>
+						<option value='aqua'>Aqua</option>
+						<option value='teal'>Teal</option>
+						<option value='blue'>Blue</option>
+						<option value='navy'>Navy</option>
+						<option value='fuchsia'>Fuchsia</option>
+						<option value='purple'>Purple</option>
+					</select>
+				</td>
+			</tr>
+			<tr>
+				<td>Text Color: </td>
+				<td>
+					<input type="text" name="textColorCustom" size="10" placeholder="#color"> 
+					or 
+					<select name="textColorSelect">
+						<option value=''></option>
+						<option value='#404040'>Dark Default</option>
+						<option value='white'>White</option>
+						<option value='silver'>Silver</option>
+						<option value='gray'>Gray</option>
+						<option value='black'>Black</option>
+						<option value='red'>Red</option>
+						<option value='maroon'>Maroon</option>
+						<option value='yellow'>Yellow</option>
+						<option value='olive'>Olive</option>
+						<option value='lime'>Lime</option>
+						<option value='green'>Green</option>
+						<option value='aqua'>Aqua</option>
+						<option value='teal'>Teal</option>
+						<option value='blue'>Blue</option>
+						<option value='navy'>Navy</option>
+						<option value='fuchsia'>Fuchsia</option>
+						<option value='purple'>Purple</option>
+					</select>
+				</td>
+			</tr>
+			<tr>
+				<td>Font Family: </td>
+				<td>
+					<input type="text" name="ftFamilyCustom" size="10">
+					or
+					<select name="ftFamilySelect">
+						<option value=''></option>
+						<option value='monospace'>Monospace</option>
+						<option value='serif'>Serif</option>
+						<option value='sans-serif'>Sans-Serif</option>
+					</select>
+				</td>
+			</tr>
+			<tr>
+				<td>Font Size: </td>
+				<td>
+					<input type="text" name="ftSize" size="10">
+				</td>
+			</tr>
+			<!-- <tr>
+				<td><h3>&nbsp;New Tab Page Options</h3></td>
+			</tr>
+			<tr>
+				<td>Background Color: </td>
+				<td>
+					<input type="text" name="pageBgColorCustom" size="10">
+					or 
+					<select name="pageBgColorSelect">
+						<option value=''></option>
+						<option value='#404040'>Dark Default</option>
+						<option value='white'>White</option>
+						<option value='silver'>Silver</option>
+						<option value='gray'>Gray</option>
+						<option value='black'>Black</option>
+						<option value='red'>Red</option>
+						<option value='maroon'>Maroon</option>
+						<option value='yellow'>Yellow</option>
+						<option value='olive'>Olive</option>
+						<option value='lime'>Lime</option>
+						<option value='green'>Green</option>
+						<option value='aqua'>Aqua</option>
+						<option value='teal'>Teal</option>
+						<option value='blue'>Blue</option>
+						<option value='navy'>Navy</option>
+						<option value='fuchsia'>Fuchsia</option>
+						<option value='purple'>Purple</option>
+					</select>
+				</td>
+			</tr> -->
+			</table>
+			<br>
+			<!-- <hr color="gray"> -->
+			<button type="submit" class="saveSize" id="button1">Save</button>
+			<button class="restoreDefaults" id="button1">Restore Defaults</button>
+			</form>
+
+			<script src="options.js"></script>
+		</body>
+</html>