eglassman/main.html

## main.html
<html>
  <head>
  </head>
  <body>
    <h1 id="error" style="display:none; color: red">Too many characters to save. Please delete some.</h1>
    <div id="c" contenteditable style="min-height:300px;outline:none;"></div>
  </body>
  <script src="main.js"></script>
</html>

## main.js
let editor = document.querySelector('#c');
let error = document.querySelector("#error");
let splitKeys = [0,1,2,3,4,5,6,7,8,9,10,11,12];
let timeout;
chrome.storage.sync.get(null, items => {
  // Rejoin text that we split up below
  let text = splitKeys.map(i => items['text' + i]).filter(t => t).join()
  editor.innerHTML = text;
})
editor.addEventListener('keyup', (e) => {
  clearTimeout(timeout);
  timeout = setTimeout(() => {
    let text = editor.innerHTML;
    setText(text)
  }, 500);

  function setText(text) {
    // Split up text into multiple keys because there's a 8000 char limit on keys
    // https://developer.chrome.com/apps/storage#type-StorageArea
    var texts = {}
    splitKeys.forEach(i => {
      texts['text' + i] = text.substring(i * 8000, (i + 1) *8000);
    });
    error.style.display = text.length > 100000 ? 'block' : 'none';
    chrome.storage.sync.set(texts, e => {
      if (chrome.runtime.lastError) {
        alert("Check console for error")
        console.log(chrome.runtime.lastError)
      }
    });
  }
});


// TODOS
//
// extract debounce / throttle as own function
// show how many charcters are left
// checkbox when synced
// better favicons / icons
// publish to chrome store
// find a way to update the page when the data is changed in another tab without screwing things up (there's an onChanged event)
// broadcast: put on my website / tweet about it / put on HN / put on PH

## manifest.json
  {
    "name": "FastNote",
    "version": "1.0",
    "description": "The fastest way to take a note",
    "permissions": ["storage"],
    "chrome_url_overrides" : {
      "newtab": "main.html"
    },
    "manifest_version": 2
  }
	<html>
	<head>
	</head>
	<body>
	<h1 id="error" style="display:none; color: red">Too many characters to save. Please delete some.</h1>
	<div id="c" contenteditable style="min-height:300px;outline:none;"></div>
	</body>
	<script src="main.js"></script>
	</html>
	let editor = document.querySelector('#c');
	let error = document.querySelector("#error");
	let splitKeys = [0,1,2,3,4,5,6,7,8,9,10,11,12];
	let timeout;
	chrome.storage.sync.get(null, items => {
	// Rejoin text that we split up below
	let text = splitKeys.map(i => items['text' + i]).filter(t => t).join()
	editor.innerHTML = text;
	})
	editor.addEventListener('keyup', (e) => {
	clearTimeout(timeout);
	timeout = setTimeout(() => {
	let text = editor.innerHTML;
	setText(text)
	}, 500);

	function setText(text) {
	// Split up text into multiple keys because there's a 8000 char limit on keys
	// https://developer.chrome.com/apps/storage#type-StorageArea
	var texts = {}
	splitKeys.forEach(i => {
	texts['text' + i] = text.substring(i * 8000, (i + 1) *8000);
	});
	error.style.display = text.length > 100000 ? 'block' : 'none';
	chrome.storage.sync.set(texts, e => {
	if (chrome.runtime.lastError) {
	alert("Check console for error")
	console.log(chrome.runtime.lastError)
	}
	});
	}
	});


	// TODOS
	//
	// extract debounce / throttle as own function
	// show how many charcters are left
	// checkbox when synced
	// better favicons / icons
	// publish to chrome store
	// find a way to update the page when the data is changed in another tab without screwing things up (there's an onChanged event)
	// broadcast: put on my website / tweet about it / put on HN / put on PH
	{
	"name": "FastNote",
	"version": "1.0",
	"description": "The fastest way to take a note",
	"permissions": ["storage"],
	"chrome_url_overrides" : {
	"newtab": "main.html"
	},
	"manifest_version": 2
	}