Stored replacements, v4.2

content_script.js

@@ -1,16 +1,28 @@
 var valChange = /\by\/n\b|\(y\/n\)|\[y\/n\]/ig;
 var person;
-chrome.storage.local.get("person", function(value){
+chrome.storage.local.get(null, function(items){
-	person = value.person;
+	for(var key in items){
-	if(person){
+		if(items[key]){
-		loadReplace(valChange, person);
+			if(key=="person")
+				loadReplace(valChange, items[key]);
+			else{
+				var s = escapeRegExp(key);
+				var temp = new RegExp(s, "ig");
+				loadReplace(temp, items[key]);
+			}
+		}
 	}
 });
-// loadReplace(valChange);
+
+
+function escapeRegExp(str) {
+  return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
+}
 
 chrome.extension.onMessage.addListener(function(message,sender,sendResponse){
   //This is where the stuff you want from the background page will be
-  var val = new RegExp(message.stuff, "ig");
+  var s = escapeRegExp(message.stuff);
+  var val = new RegExp(s, "ig");
   if(message.isYN)
   	loadReplace(val, person);
   else

manifest.json

@@ -3,7 +3,7 @@
 
 	"manifest_version": 2,
 	"name": "InteractiveFics",
-	"version": "4.1",
+	"version": "4.2",
 	"description": "Replaces Y/N & other variables in Reader Insert/second person fics with words of your choice.",
 	"browser_action": {
 	"default_icon": "icon.png",

popup.html

@@ -20,11 +20,11 @@ a:hover{
 color: #16a085;
 }
 
-label *{
+label *:not([type="checkbox"]){
 	display:block;
 }
 
-.otherWords input{
+.otherWords input:not([type="checkbox"]){
 	margin-top:0.2em;
 	width:100%;
 }
@@ -36,9 +36,23 @@ label *{
 }
 #clear-name{
 	margin-top:0.5em;
-	width:87%;
+	width:96%;
+}
+input[type="text"]{
+	width:70%;
+}
+.strikethrough{
+	text-decoration: line-through;
+}
+.one-saved-item:hover{
+	background-color: #e74c3c;
+	color: white;
+	cursor: pointer;
+}
+.savedItemsList{
+	height:100px;
+	overflow: auto;
 }
-
 </style>
 <script src="popup.js" type="text/javascript" >
 
@@ -49,14 +63,8 @@ label *{
 <h1>Enter the name here:</h1>
 <form><input type="text" id="inputTxt"/><input type="submit" id="submit" value="Change"/></form>
 <button id="clear-name">Clear Name</button> 
-<p><details><summary>Is the author not using Y/N?</summary>
+<p><details id="moreWords"><summary>Need to replace something other than Y/N?</summary>
-	<p>Enter the expression the author's using instead:</p>
+	<p><small>(This change will go away when you refresh/go to another page unless you check the box next to "Store this replacement")</small></p>
-	<p><small>(Make sure you already entered a name above. This change will go away if you refresh, so you'll have to enter it again)</small></p>
-	<p><form class="changeForm"><input type="text" name="replaceWord" class="other">
-	<input type="submit" class="change" value="Enter"></form></p>
-</details></p>
-<p><details id="moreWords"><summary>Need to replace something else?</summary>
-	<p><small>(This change will go away when you refresh/go to another page)</small></p>
 	
 	<p><form class="otherWords changeForm">
 			<label><span>Value [e.g L/N, E/C, etc]:</span>
@@ -64,11 +72,20 @@ label *{
 			<br>
 			<label><span>Replace with:</span>
 			<input type="text" name="replaceWith" class="replaceBy"></label>
+			<label><input type="checkbox" name="isPerm">Store this replacement</label>
 			<input type="submit" class="change" value="Change">
 		</form>
 	</p>
 </details></p>
 <p>
+<p><details><summary  id="show-saved">STORED REPLACEMENTS</summary>
+	<p>To remove, simply click on a replacement.</p>
+	<div class="savedItemsList">
+		<ul id="theList">
+		</ul>
+	</div>
+</details></p>
+<p>
 <details><summary>About</summary>
 <a href="http://interactivefics.tumblr.com" target="_blank" title="Official tumblr">Interactive Fics</a> is a free Chrome extension developed by <a href="https://github.com/blaringsilence" target="_blank" title="her github">blaringsilence</a> to improve your online story reading experience. The extension is open source and all source code can be found <a href="https://github.com/blaringsilence/interactive-fics" title="github repo">here.</a>
 </details>

popup.js

@@ -1,6 +1,31 @@
 
 document.addEventListener('DOMContentLoaded', function () {
   document.getElementById('submit').addEventListener('click', clickHandler);
+  document.getElementById('show-saved').addEventListener('click', function(){
+	chrome.storage.local.get(null, function(items){
+		var list = document.getElementById('theList');
+		list.innerHTML = "";
+		for(var key in items){
+			var k;
+			if(key=="person")
+				k = "Y/N";
+			else
+				k = key;
+			var v = items[key];
+			var rep = k + " -> " + v;
+			var text = document.createTextNode(rep);
+			var node = document.createElement("LI");
+			node.appendChild(text);
+			node.id = key;
+			node.className = 'one-saved-item';
+			node.addEventListener('click', function(){
+				chrome.storage.local.remove(this.id);
+				this.className+=' strikethrough';
+			});
+			list.appendChild(node);
+		}
+	});
+  });
   document.getElementById('clear-name').addEventListener('click', function(){ chrome.storage.local.remove("person", chrome.tabs.reload()) } );
   var others = document.getElementsByClassName('changeForm');
   for(var i=0; i<others.length; i++)
@@ -12,26 +37,29 @@ document.addEventListener('DOMContentLoaded', function () {
 function otherHandler(){
 	var myInput = this.replaceWord.value;
 	if(myInput){
-	var valChange = escapeRegExp(myInput);
+	var valChange = myInput;
 	var isYN;
 	var replace;
 	if(this.replaceWith){
 		isYN = false;
 		replace = this.replaceWith.value;
+		if(this.isPerm.checked){
+			var obj = {};
+			obj[valChange] = replace;
+			chrome.storage.local.set(obj);
+		}
 	}
 	else{
 		isYN = true;
 		replace = 'NOPE'; // should/will never get accessed
 	}
+
 	chrome.tabs.query({active:true,currentWindow:true}, function(tab){
-  	chrome.tabs.sendMessage(tab[0].id, {stuff:valChange, isYN: isYN, replaceVal:replace});
+  		chrome.tabs.sendMessage(tab[0].id, {stuff:valChange, isYN: isYN, replaceVal:replace});
 	});
  }
 }
 
-function escapeRegExp(str) {
-  return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
-}
 
 
 function clickHandler(){
@@ -40,4 +68,3 @@ if(person)
 	chrome.storage.local.set({"person": person}, chrome.tabs.reload());
 }
 
-